Wie man iframe verwendet

Das iframe-Element (kurz für internal frame) dient dazu, Inhalte aus anderen Quellen in eine HTML-Seite einzubetten. Dank der Verwendung eines iframe brauchen Sie zum Beispiel nicht daran zu denken, einen eigenen Videoplayer zu erstellen und große Videodateien zu speichern. Stattdessen können Sie YouTube verwenden und das gewünschte Video mithilfe eines iframe in Ihre Webanwendung einfügen.

Verwendung eines iframe für YouTube-Videos

Schauen wir uns ein konkretes Beispiel an. Wir wollen eine Seite erstellen, auf der ein Video aus dem Kanal AppMaster YouTube über die Verwendung von Dateien in Geschäftsprozessen angesehen werden kann. Dazu müssen Sie ein iframe-Element auf der Arbeitsfläche platzieren, die erforderlichen Einstellungen vornehmen (z. B. Größe und Einzüge) und einen Link zum gewünschten Video im Feld Src Feld.

Dabei geht YouTube zunächst von der Möglichkeit einer solchen Videoeinbettung aus und stellt die notwendigen Werkzeuge zur Verfügung, um den Vorgang möglichst komfortabel zu gestalten. Mit einem Klick auf den "Share" unter dem Video klicken, können Sie die "EmbedOption" verwenden.

YouTube stellt den gesamten erforderlichen HTML-Code zur Verfügung, um das Video auf seiner Seite zu platzieren, aber in unserem Fall ist nicht der gesamte Code von Interesse, sondern nur ein Link zu dem gewünschten Video. Diesen müssen Sie kopieren und in den iframe-Einstellungen platzieren.

Die Standardeinstellungen für Breite und Höhe - 560 und 315 - sind hier ebenfalls sichtbar.

Sie können die Anwendung veröffentlichen und sicherstellen, dass sie nun wirklich ein eingebettetes Video enthält.

Auf ähnliche Weise können Sie auch andere Arten von Daten aus anderen Quellen einbetten. Fügen Sie zum Beispiel eine Karte hinzu.

Aufgrund dieser Einstellungen können Sie die Karte als Kreis mit einem dicken gepunkteten Rand anzeigen.

Verwendung von benutzerdefiniertem HTML in einem iframe

Betrachten wir nun eine komplexere Option. Wir werden eigenständig HTML-Seiten für den Iframe erstellen und keine Daten aus Drittquellen verwenden. Dazu fügen Sie ein RichtextEditor Element in den Canvas ein. Es ermöglicht Ihnen, HTML zu erstellen, sowohl mit Hilfe eines praktischen visuellen Editors als auch durch direkte Bearbeitung des HTML-Codes.

Es ist notwendig, dass jedes im Editor erstellte HTML als Datei gespeichert und dann über einen iframe angezeigt werden kann. Fügen wir eine Schaltfläche hinzu und erstellen den entsprechenden Geschäftsprozess, der gestartet wird, wenn die Schaltfläche angeklickt wird.

Als Teil des Geschäftsprozesses sollten Sie:

1. Holen Sie HTML aus dem Editor, indem Sie den Richtext Get Properties Block.
2. HTML in Bytes umwandeln (To Bytes).
3. Verwenden Sie den Make File Block, um eine Datei zu erstellen. Denken Sie daran, dass Sie zum Erstellen einer Datei nur ihren Inhalt (Bytes, den Sie im vorherigen Schritt erhalten haben) und den Namen (er kann beliebig sein, muss aber installiert sein).
4. Senden Sie die erstellte Datei an den Server, und speichern Sie sie in der Datenbank (Server request POST /_files/).
5. Ermitteln Sie die ID der erstellten Datei (Expand File - ID)
6. Konvertieren Sie die ID in einen String (To String)
7. Sammeln eines Links zu einer Datei mit Concat String. Das Ergebnis sollte ein Link wie https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ sein, wobei "vdjyien-app.apms.io" Ihre Serveradresse und "dQhJVTYrToCqr9G4KWKRD" die im vorherigen Schritt ermittelte Datei-ID ist. Der resultierende Link sollte sich in einem Browser öffnen. Vergewissern Sie sich, dass der Datei-Empfangsendpunkt selbst (GET /_files/:id/download/) keine Autorisierung benötigt und für den Zugriff offen ist.
8. Wenn der Link in Ordnung ist, müssen Sie ihn nur noch an den iframe übergeben und das Ergebnis sehen (iFrame Update Properties).

Nun kann jeder HTML-Code, der in der Richtext Editor kann in der Datenbank gespeichert und in der Anwendung angezeigt werden. So können Sie mit dem iframe-Block sogar Elemente zu Ihrer Anwendung hinzufügen, die ursprünglich nicht vom Designer bereitgestellt wurden, nicht standardisierte Schriftarten verwenden oder Blöcke mit benutzerdefiniertem HTML-Code erstellen.