Einbetten einer ArcGIS-App in einen <iframe>

Iframes sind eine Webtechnologie, die verwendet wird, um Inhalte von einer Website in einer anderen Website oder HTML-Seite einzubetten. Das HTML-Tag <iframe> wird zu diesem Zweck verwendet und kann mit einer Vielzahl von Konfigurationen und Eigenschaften erstellt werden.

Bei der Integration von ArcGIS-Bedienoberflächen oder -Funktionen in andere Business-Systeme besteht ein häufiges Muster darin, eine Web-App, wie etwa eine von ArcGIS Instant Apps, ArcGIS Experience Builder oder einer anderen mit dem Maps SDK for JavaScript entwickelten App, mittels Verwendung eines iframe einzubetten.

Dies kann das Schreiben von Code oder HTML-Code beinhalten, der explizit einen <iframe> definiert. Das andere System kann auch ein Muster wie ein Einbettungs-Widget oder -Werkzeug aufweisen, das den Iframe-Prozess verarbeitet. Dadurch können zusätzliche Einschränkungen für den Iframe gelten, oder es kann gesteuert werden, welche Iframe-Tag-Attribute festgelegt werden können.

Beispiele für Workflows, die mit diesem Muster unterstützt werden können:

  • Betten Sie eine Locator-Karte in eine größere Webseite ein, um Filialstandorte oder gemeinsame geographische Features zu finden.

  • Erstellen Sie eine editierbare Webkarte und -App, und betten Sie sie in einen weiteren größeren Datenerfassungs- oder Konfigurationsprozess ein, der formularbasiert ist oder mit einer anderen Technologie entwickelt wird.

  • Zeigen Sie ein ArcGIS Survey123-Formular mit URL-Parametern an, als Teil einer Website oder Anwendung, die Daten sammelt oder Teil eines umfassenderen Workflows ist.

Diese Funktion und ihre Best Practices gelten auch für Szenarien, in denen ArcGIS-Anwendungen in andere ArcGIS-Anwendungen eingebettet sind.

Integrationsmuster in ArcGIS

Funktion ArcGIS Online ArcGIS Enterprise ArcGIS Location Platform ArcGIS Pro
Einbetten von ArcGIS-Apps in ein anderes System N. z. N. z.

Volle Unterstützung Teilunterstützung


In einem Remotesystem kann ein <iframe> verwendet werden, um Anwendungen aus ArcGIS Online, ArcGIS Enterprise oder benutzerdefinierten, mit dem ArcGIS Maps SDK for JavaScript erstellten Anwendungen einzubetten.

Verwenden von URL-Parametern

Viele ArcGIS-Web-Apps unterstützen eine Reihe von beim Laden konfigurierbaren Eigenschaften, die durch URL-Parameter definiert sind, wie z. B. https://my.domain.com/portal/home/apps/viewer.html?center=-54,120&zoom=5 (die App an diesen Koordinaten zentrieren und auf Maßstabsebene 5 zoomen). Mit diesem Integrationsmuster ist es üblich, diese URL-Parameter dynamisch festzulegen (die steuern, wie die iframe-Anwendung geladen wird). Dazu werden Eigenschaften der Parent- oder Business-Systemanwendung verwendet. Wenn der Benutzer beispielsweise einen Datensatz in einem Nicht-ArcGIS-System mit der Kennung BD1245 in der Parent-Anwendung anzeigt und ein iframe definiert ist, kann eine URL wie ../my-app.html?featureID=BD1245 enthalten sein, sodass beim Laden der App die relevanten Daten bereits sichtbar und fokussiert sind.

Best Practices für <iframe>-Einbettungen

Historisch sind Iframes eine beliebte Technologie, die auch eine Vielzahl von Sicherheitsherausforderungen mit sich brachte. Dies hat zu einer Vielzahl von Browser-Einschränkungen geführt, die für Iframes gelten und die Funktionalität oder Benutzerfreundlichkeit systemübergreifend einschränken können. Wichtige Herausforderungen:

  • Single Sign-on ist kompliziert. Browser-Standards blockieren oft die Wiederverwendung vorhandener Sitzungs-Cookies in einem <iframe>, es sei denn, die <iframe>-Domäne entspricht der Domäne des Parent-Inhalts. Das bedeutet, dass ein Benutzer sich häufig bei dem ArcGIS-System authentifizieren muss, das in den <iframe> eingebettet ist, was eine Anmeldeinteraktion erfordert. Wenn sowohl das Parent des Frames als auch der Frame selbst über denselben Identity-Provider authentifiziert werden, erwarten Benutzer möglicherweise eine Single Sign-on-Erfahrung und sind mit einer zweiten Anmeldeanforderung unzufrieden. Einige Unternehmens-Identity-Provider blockieren möglicherweise auch die Nutzung ihres Anmeldedialogs in einem Iframe, und andere Ansätze wie sorgfältig gestaltete Content-Security-Policy-Header können erforderlich sein.
  • Um dieses Problem bestmöglich zu lösen, verwenden Sie dieselbe Domäne (z. B. .domain.com) sowohl für die Parent- als auch für die Iframe-Site, verwenden Sie denselben Single-Sign-On-Provider, und lassen Sie zu, dass die App Benutzer bei Bedarf automatisch zur Anmeldung weiterleitet.
  • Datei-Downloads oder -Uploads können blockiert werden. Die Browsersicherheit kann das Herunterladen von Dateien aus Iframes blockieren, wobei ein Download-Link oder eine Download-Schaltfläche in einer eingebetteten App keinen error Fehler meldet, sondern einfach das Herunterladen einer Datei, z. B. ein Export aus einer Funktionstabelle, nicht mehr durchführt. Diese Problemkategorie wird üblicherweise über eine JavaScript-Konsolennachricht des Browsers gemeldet.

  • Die Bildschirmgröße kann sich negativ auf Bedienoberflächen auswirken. Iframes werden häufig als konstante Rahmengröße in Pixeln definiert, und Apps, die eingebettet werden, sollten für diese erwartete Anzeigegröße ausgelegt sein. Wenn die Parent-Anwendung den Iframe intelligent entsprechend der Bildschirmauflösung des Benutzers skalieren kann, haben Benutzer mit größeren Bildschirmen möglicherweise eine responsive Experience, aber ein Iframe mit fester Größe führt zu einem kleinen eingebetteten Fenster, das eine negative User Experience haben kann. Eingebettete Apps sollten so gestaltet sein, dass alle primären Bedienoberflächenelemente und Interaktionen im verfügbaren Bildschirmbereich ausgeführt werden können.

  • Die Kommunikation zwischen dem Iframe und dem Parent-Fenster ist in der Regel begrenzt. Während einige <iframe>-Muster die Kommunikation zwischen dem Parent-Fenster und dem <iframe> über Protokolle oder Muster wie postMessage unterstützen, bieten die meisten ArcGIS-Anwendungen diese Funktion nicht, sodass Interaktionen in der Iframe-Anwendung das Parent-Fenster nicht beeinflussen (dies gilt auch umgekehrt).
Top