Hinzufügen eines iFrames zu einer Toolerweiterung

In diesem Artikel fügen wir einer neuen, leeren Toolerweiterung einen iFrame hinzu, den wir mit der Windows Admin Center CLI erstellt haben.

Vorbereiten der Umgebung

Falls noch nicht geschehen, folgen Sie den Anweisungen in der Entwicklung einer Toolerweiterung , um Ihre Umgebung vorzubereiten und eine neue, leere Toolerweiterung zu erstellen.

Hinzufügen eines Moduls zu Ihrem Projekt

Fügen Sie Ihrem Projekt ein neues leeres Modul hinzu, dem wir im nächsten Schritt einen iFrame hinzufügen werden.

Hinzufügen eines iFrames zu Ihrem Modul

Nun fügen wir dem neuen, leeren Modul, das wir gerade erstellt haben, einen iFrame hinzu.

Navigieren Sie in „\src\app“ zu Ihrem Modulordner, und öffnen Sie dann die Datei {!module-name}.component.html, die der folgenden Namenskonvention entspricht:

Wert	Erklärung	Beispieldateiname
{!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal.component.html

Fügen Sie der HTML-Datei folgenden Inhalt hinzu:

<div>
  <iframe  style="height: 850px;" src="https://www.bing.com"></iframe>
</div>

Das war‘s, Sie haben Ihrer Erweiterung einen iFrame hinzugefügt. Als Nächstes können Sie Ihre Erweiterung in Windows Admin Center erstellen und quer laden , um die Ergebnisse anzuzeigen.

Hinweis

Einstellungen der Richtlinie für Inhaltssicherheit (Content Security Policy, CSP) könnten verhindern, dass manche Websites in einem iFrame innerhalb von Windows Admin Center gerendert werden. Weitere Informationen hierzu finden Sie hier.