Anzeige an App Builder Seite auf einer Website mit Iframe im Jitterbit App Builder

Der folgende Artikel beschreibt Konfigurationseinstellungen für die Arbeit mit iframes und App Builder. Je nachdem, wie Sie das Iframe implementieren, möchten Sie möglicherweise optional das Widget iframe Resizer nutzen, um die Größe des Iframes automatisch an den entsprechenden Inhalt anzupassen. Konfigurationsinformationen für das Widget iframe Resizer werden in diesem Artikel beschrieben.

Dieser Artikel bietet einen Überblick darüber, wie Sie an App Builder Seite aus einer App auf einer Website. Dies wird erreicht durch die Verwendung eines <iframe> HTML-Tag auf der Website, der verwendet wird, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten. In diesem Szenario wird der Iframe-Tag verwendet, um das App Builder Anwendungsinhalt.

Anforderungen an den Domänennamen

Damit an App Builder Wenn Sie eine Anwendungsseite über ein Iframe auf einer Website anzeigen möchten, müssen bestimmte Domänennamen-Anforderungen erfüllt sein, damit das Iframe die Seite rendern und anzeigen kann. App Builder Anwendungsinhalte. Nämlich die App Builder Anwendung und Client-Website sollten dieselbe Top-Level-Domain verwenden.

Beispiel: Die Website läuft auf www.example.com Und an App Builder Anwendung läuft auf prod.example.com würde gut zusammenarbeiten und die Anzeige eines Iframes ermöglichen App Builder Anwendungsinhalte auf der Website.

Um diese Anforderung zu erfüllen, empfiehlt es sich, die {{nm.ab}} Server, um ihn an die Hauptdomäne der Website anzupassen. Mit dieser Konfiguration {{nm.ab}} würde jetzt laufen auf vinyl {{Kunde}}.com Vergleiche {{Kunde}}.zudy.host.

HTML-Iframe-Codebeispiele

Sie müssen der Website in der Region, in der Sie das anzeigen möchten, einen HTML-Iframe-Codeausschnitt hinzufügen. App Builder Seite. Beispiele für diesen Code sind wie folgt:

Beispiel 1

<iframe style="border: 0;" src="{{url}}" width="100%" frameborder="0"></iframe>

In diesem Beispiel würden Sie das url Wert, abhängig von Ihrer Konfiguration. Dieses Beispiel verwendet Inline-Styling, um Kontrolle über den Inhalt zu bieten, der im Iframe-Bereich angezeigt wird.

Beispiel 2

<iframe class="JobsFormiframe" src="https://example.zudy.com/app/CovidTesting" width="100%" scrolling="yes"></iframe>

In diesem Beispiel würden Sie ersetzen die src Wert abhängig von Ihrer Konfiguration. Darüber hinaus wird CSS verwendet, um die App Builder Seite, die angezeigt wird, damit sie mit den Informationen auf Ihrer Website übereinstimmt. Hier ist dem Iframe die Klasse „JobsFormiframe“ zugewiesen, die es ermöglicht, dass alle für diese Klasse geschriebenen Stile auf den im Iframe gerenderten Inhalt angewendet werden.

IFrame-Resizer-Konfiguration

Die Größenanpassung von iFrames macht Ihre Seiten komplexer und ist nur erforderlich, wenn Folgendes zutrifft:

1. Der iFrame wird in der Mitte einer Seite angezeigt und Sie möchten, dass der Bereich der Webseite darunter sichtbar ist, wenn der von App Builder ist klein
2. Die Seiten, die App Builder Die Render unterscheiden sich erheblich und Sie möchten, dass die Größe des IFrames mit der des App Builder Seite ändert Größe

Wenn Sie den iframe resizer verwenden-Widget erfordert dies im Allgemeinen die Konfiguration von zwei Komponenten für die Verwendung mit an App Builder App:

1. Das externe Seitenhosting App Builder in einem Iframe
2. Innerhalb des Iframes, wo App Builder läuft. Dieser Schritt wird in der Dokumentation im Abschnitt „Anzeige“ beschrieben. an App Builder Seite auf einer Website mit einem Iframe-Abschnittsinhalt.

Konfiguration für die Außenseite

Die externe Webseite, die hostet App Builder in einem Iframe muss konfiguriert werden, damit das Iframe Resizer-Widget richtig funktioniert. Folgen Sie den Anweisungen im Abschnitt Erste Schritte der Iframe Resizer Github-Bibliothek. Hier möchten Sie die normale Konfiguration aus dem Abschnitt „Typische Einrichtung“ der Dokumentation überprüfen und implementieren.

Im <script> Tag-Teil der Syntax aus der Anleitung „Erste Schritte“. Möglicherweise müssen Sie diese Informationen gegenüber dem bereitgestellten Beispiel leicht anpassen, damit sie für Ihre Implementierung funktionieren.

Beispielsyntax für die typische Einrichtung des Iframe-Resizer-Widgets

Sie können die Syntax beispielsweise je nach Ihrer speziellen Einrichtung wie folgt anpassen:

iframeResize( { log:true, heightCalculationMethod: 'lowestElement', resizeFrom: 'child' }, '#myIframe');

Konfiguration im App Builder App

Im Inneren des App Builder App installieren Sie das Iframe Resizer-Widget und konfigurieren es als Site-Widget.

Wir empfehlen, dass die Anwendung, die Seiten im Iframe bereitstellt, in den mobilen App-Einstellungen das vertikale Scrollen aktiviert.

So aktivieren Sie das vertikale Scrollen

1. Navigieren Sie zur App Workbench
2. Klicken Sie in den App-Einstellungen auf Mehr > Edge Case
3. Klicken Sie auf die Schaltfläche Mobile Einstellungen
4. Wählen Sie Vertikales Scrollen

Beheben von Problemen

HTTP-Antwortheader

Wenn Sie Probleme mit einem Iframe haben, der keinen Inhalt anzeigt, prüfen Sie, ob die Website HTTP-Antwortheader verwendet, die mit dem, was ein Iframe zu tun versucht, in Konflikt stehen könnten. Wenn Sie HTTP-Antwortheader verwenden, benötigen Sie möglicherweise einen Systemadministrator (oder jemanden mit Webserverzugriff und -berechtigungen), um die Header Datensatzinformationen auf dem Webserver zu ändern, damit der Iframe wie vorgesehen funktioniert.

Ein Beispiel für einen HTTP- Header, der einen Konflikt verursachen kann, ist Content-Security-Policy. Der HTTP- Header „Content-Security-Policy“ soll XSS-Risiken in modernen Browsern reduzieren, indem er angibt, welche dynamischen Ressourcen geladen werden dürfen. Dieser Header kann einen Konflikt mit dem eingebetteten Iframe verursachen, indem er dem Iframe das Laden und Anzeigen von Inhalten verweigert.

Hier ist ein Beispiel für einen HTTP-Antwortheader - Datensatz, der die vorgenommene Änderung veranschaulicht, damit der Iframe Inhalte wie gewünscht laden kann. In diesem Beispiel wurde der Wert für Content-Security-Policy aktualisiert, um Folgendes einzuschließen: frame-ancestors https://*.Website-DomainName.com, wo Sie den entsprechenden Wert für den Domänennamen Ihrer Website verwenden:

Beispiel für eine Änderung des HTTP-Header