Hoe iframe gebruiken

Het iframe-element (kort voor intern frame) is ontworpen om inhoud van andere bronnen in een HTML-pagina in te sluiten. Dankzij het gebruik van een iframe moet u er bijvoorbeeld niet aan denken om uw eigen videospeler te maken en grote videobestanden op te slaan. In plaats daarvan kunt u YouTube gebruiken en de gewenste video toevoegen aan uw webapp met behulp van een iframe.

Iframe gebruiken voor YouTube-video

Laten we een specifiek voorbeeld bekijken. Laten we een pagina maken om een video te bekijken van het AppMaster YouTube kanaal over het gebruik van bestanden in bedrijfsprocessen. Daarvoor moet je een iframe-element op het canvas plaatsen, de nodige instellingen opgeven (bijvoorbeeld in grootte en inspringen), en een link naar de gewenste video in het Src veld.

Tegelijkertijd gaat YouTube in eerste instantie uit van de mogelijkheid van een dergelijke video-insluiting en biedt het de nodige hulpmiddelen voor een maximaal gemak van het proces. Door te klikken op de "Share" knop onder de video, kunt u de "Embed" optie.

YouTube levert alle benodigde HTML-code om de video op zijn pagina te plaatsen, maar in ons geval is niet alle code van belang, alleen een link naar de gewenste video. Die moet je kopiëren en in de iframe-instellingen plaatsen.

De standaardinstellingen voor breedte en hoogte - 560 en 315 - zijn hier ook zichtbaar.

U kunt de toepassing publiceren en ervoor zorgen dat deze nu echt een ingesloten video heeft.

Op dezelfde manier kunt u andere soorten gegevens van andere bronnen insluiten. Voeg bijvoorbeeld een kaart toe.

Door deze instellingen kun je de kaart weergeven als een cirkel met een dikke stippellijn.

Aangepaste HTML gebruiken in een iframe

Laten we een complexere optie overwegen. We zullen zelfstandig html-pagina's maken voor het iframe, en geen gegevens van bronnen van derden gebruiken. Om dit te doen, voeg je een RichtextEditor element toe aan het canvas. Hiermee kun je HTML maken, zowel met behulp van een handige visuele editor als door directe bewerking van de HTML-code.

Het is noodzakelijk om het zo te maken dat elke HTML die in de editor is gemaakt, kan worden opgeslagen als een bestand, en vervolgens kan worden weergegeven via een iframe. Laten we een knop toevoegen en het bijbehorende bedrijfsproces maken dat wordt gestart wanneer erop wordt geklikt.

Als onderdeel van het bedrijfsproces moet u:

1. HTML uit de editor halen met behulp van het Richtext Get Properties blok.
2. HTML converteren naar Bytes (To Bytes).
3. De Make File blok om een bestand te maken. Houd in gedachten dat om een bestand te maken, je alleen de inhoud (Bytes, deze is verkregen in de vorige stap) en de naam (deze kan van alles zijn, maar moet wel geïnstalleerd zijn).
4. Stuur het aangemaakte bestand naar de server, en sla het op in de database (Server request POST /_files/).
5. Verkrijg ID van het aangemaakte bestand (Expand File - ID)
6. Converteer ID naar String (To String)
7. Verzamel een link naar een bestand met Concat String. Het resultaat zou een link moeten zijn zoals https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, waarbij "vdjyien-app.apms.io" uw serveradres is, en "dQhJVTYrToCqr9G4KWKRD" de bestands-ID die in de vorige stap is verkregen. De resulterende link zou in een browser moeten openen. Zorg ervoor dat het ontvangende eindpunt van het bestand zelf (GET /_files/:id/download/) geen autorisatie nodig heeft en open staat voor toegang.
8. Als de link OK is, dan is het enige dat overblijft het doorgeven aan het iframe en het resultaat bekijken (iFrame Update Properties).

Nu kan elke HTML die in de Richtext Editor kan worden opgeslagen in de database en worden weergegeven in de toepassing. Met het iframe-blok kunt u dus zelfs elementen aan uw toepassing toevoegen die aanvankelijk niet door de ontwerper waren voorzien, niet-standaard lettertypen gebruiken of blokken met aangepaste HTML-code maken.