Studio Editor: Een HTML iFrame-element toevoegen

所要時間4分

Geef visuele inhoud van externe servers en andere bronnen weer in een HTML iFrame. Maak een weerwidget, een aandelenwidget, een kalender of een ander aangepast element dat in je opkomt. Je kunt een codefragment of een externe URL embedden.

Voorbeeld van een weerwidget op een Studio Editor-website, ingesloten met het HTML iFrame

この記事で詳しく説明しています：

Code of een website embedden

Voeg rechtstreeks vanuit het Elementen toevoegen-paneel een iFrame toe aan de website van je klant. Kies of je code of een website wilt embedden en plak je code / het webadres zodat het in het iFrame verschijnt.

邦題

Zorg ervoor dat je onze richtlijnen en beperkingen leest voordat je je code embedt.

Om een HTML iFrame toe te voegen:

エディターのリンクをクリックしてください。 Elementen toevoegen.
Klik op Embed en Social.
Selecteer een element om het aan de pagina toe te voegen en volg de relevante stappen hieronder:

Code embedden

Een website embedden

Screenshot van de Studio Editor, met het insluiten van een websiteadres in het iFrame-element.

De grootte van de weergegeven inhoud aanpassen

Embedded elementen bevatten vaak een vooraf gedefinieerde breedte en hoogte in pixels, gedefinieerd door de dienst waarvan ze zijn verkregen, zoals in het onderstaande voorbeeld:

1<iframe width="560" height="315" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>

Deze instellingen kunnen de inhoud mogelijk bijsnijden als de iFrame-container (op het canvas) kleiner is dan 560 px * 315 px. Om ervoor te zorgen dat de inhoud niet wordt bijgesneden, vervang je de px-waarden door procentuele eenheden en stel je ze in op 100%, zoals hieronder weergegeven:

1<iframe width="100%" height="100%" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>

Embedded code bewerken in de Studio Editor, de breedte en hoogte in de code wijzigen naar 100%

Richtlijnen en beperkingen

Lees de volgende richtlijnen en beperkingen om te leren hoe je code correct kunt embedden in het HTML iFrame, of het nu een websiteadres of aangepaste code is.

Richtlijnen

Zorg ervoor dat je code HTTPS bevat, niet HTTP, anders wordt deze niet weergegeven op je live website.
Zorg er altijd voor dat de code die je embed up-to-date en HTML5-compatibel is. De meeste browsers geven pagina's en scripts niet correct weer als ze zijn geschreven met oudere versies van HTML.
HTML-code bevat de kernelementen van de pagina, maar de ontwerpinstellingen en andere complexe functionaliteiten worden meestal afzonderlijk opgeslagen. Daarom werken sommige elementen mogelijk niet of zien ze er niet hetzelfde uit als de relevante elementen niet als verwijzing in de HTML-code zijn opgenomen, bijvoorbeeld de CSS- en JS-bestanden.
Als je niet zeker weet hoe je het target-attribuut moet gebruiken, lees er dan hier meer over of neem contact op met de maker van de code.

Beperkingen

Code binnen het HTML-element wordt op de website van je klant weergegeven in een iFrame met sandbox. Het gebruik van een sandbox beschermt bezoekers tegen mogelijke bijwerkingen van aangepaste code.

Gewoonlijk blokkeert een iFrame met sandbox het volgende:

Het gebruik van browser-API's
Inhoud die gebruikt maakt van plug-ins (via <embed>, <object>, <applet>, of andere)
Automatisch getriggerde functies (zoals het automatisch afspelen van een video of het automatisch focussen van een formulierbeheer)

We hebben echter de volgende mogelijkheden voor je aangepaste code opnieuw ingeschakeld volgens de W3C-specificaties:

Sandbox	をご覧ください：
allow-same-origin	Schakelt websitescripts/inhoud van derden opnieuw in
allow-forms	Schakelt het indienen van formulieren opnieuw in
allow-popups	Schakelt pop-ups opnieuw in
allow-scripts	Schakelt aangepaste JavaScript-code opnieuw in
allow-pointer-lock	Schakelt het pakken van de cursor opnieuw in

この記事はいかがですか？

この記事では

Code of een website embedden
De grootte van de weergegeven inhoud aanpassen
Richtlijnen en beperkingen
Richtlijnen
Beperkingen