Sök…
parametrar
| Attribut | detaljer |
|---|---|
name | Ställer in elementets namn som ska användas med a tagg för att ändra iframes src . |
width | Ställer in elementets bredd i pixlar. |
height | Ställer in elementets höjd i pixlar. |
src | Anger sidan som ska visas i ramen. |
srcdoc | Anger innehållet som ska visas i ramen, förutsatt att webbläsaren stöder det. Innehållet måste vara giltigt HTML. |
sandbox | När inställt, behandlas innehållet i iframe som från ett unikt ursprung och funktioner inklusive skript, plugins, formulär och popups kommer att inaktiveras. Begränsningar kan selektivt avslappas genom att lägga till en mellanrumsskild värdelista. Se tabellen i Anmärkningar för möjliga värden. |
allowfullscreen | Huruvida iframes innehåll ska använda requestFullscreen() |
Anmärkningar
En iframe används för att bädda in ett annat dokument i det aktuella HTML-dokumentet.
Du KAN använda iframes för att visa:
- andra HTML-sidor på samma domän;
- andra HTML-sidor på en annan domän (se nedan - Samma ursprungspolicy);
- PDF-dokument (även om IE kan ha några problem, kan denna SO-fråga hjälpa);
Du BÖR använda en iframe som en sista utväg, eftersom den har problem med bokmärkning och navigering, och det finns alltid bättre alternativ än en iframe. Denna SO-fråga skulle hjälpa dig att förstå mer om upp-och nedgångarna i iframes.
Samma ursprungspolitik
Vissa webbplatser kan inte visas med en iframe, eftersom de upprätthåller en policy som kallas Same-origin policy . Detta innebär att webbplatsen som iframe ligger på måste vara på samma domän som den som ska visas.
Denna policy gäller också för att manipulera innehåll som lever inuti en iFrame. Om iFrame får åtkomst till innehåll från en annan domän kommer du inte att kunna komma åt eller manipulera innehållet i en iFrame.
Iframe-elementet på W3C
sandbox attribut
sandbox lägger till extra begränsningar när iframe är inställt. En mellanseparerad lista med symboler kan användas för att koppla av dessa begränsningar.
| Värde | detaljer |
|---|---|
allow-forms | Tillåter att blanketter skickas in. |
allow-pointer-lock | Aktiverar JavaScript-pointer-API. |
allow-popups | Pop-ups kan skapas med window.open eller <a target="_blank" |
allow-same-origin | Iframe-dokumentet använder sitt verkliga ursprung istället för att ges ett unikt dokument. Om det används med allow-scripts kan iframe-dokumentet ta bort alla sandlådor om det är från samma ursprung som överordnade dokument. |
allow-scripts | Aktiverar skript. Iframe-dokumentet och förälderdokumentet kanske kan kommunicera med varandra med hjälp av postMessage() . Om det används med allow-same-origin kan iframe-dokumentet ta bort alla sandlådor om det är från samma ursprung som överordnade dokument. |
allow-top-navigation | Tillåter iframes innehåll att ändra platsen för dokumentet på högsta nivå. |
Grunderna i en inline ram
Termen "IFrame" betyder Inline Frame. Det kan användas för att inkludera en annan sida på din sida. Detta ger en liten ram som visar det exakta innehållet i base.html .
<iframe src="base.html"></iframe>
Ställa in ramstorlek
IFrame kan ändras med hjälp av width och height attribut, där värdena är representerade i pixlar (HTML 4,01 tillåtna procentvärden, men HTML 5 tillåter endast värden i CSS-pixlar).
<iframe src="base.html" width="800" height="600"></iframe>
Använda ankare med IFrames
Normalt initieras en förändring av webbsidan inom en Iframe från med Iframe, till exempel genom att klicka på en länk inuti Ifame. Det är dock möjligt att ändra en IFrames innehåll utanför IFrame. Du kan använda ett ankare tagg vars href -attribut ställs in på önskad URL och vars target attribut är inställd på iframe s name attribut.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Använda "srcdoc" -attributet
srcdoc attributet kan användas (istället för src attributet) för att specificera det exakta innehållet i iframe som ett helt HTML-dokument. Detta ger en IFrame med texten "IFrames är coola!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Om srcdoc attributet inte stöds av webbläsaren, faller IFrame istället tillbaka till att använda src attributet, men om både src och srcdoc attribut är närvarande och stöds av webbläsaren har srcdoc företräde.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
I exemplet ovan, om webbläsaren inte stöder srcdoc attributet, kommer den istället att visa innehållet på base.html sidan.
sandbox
Följande inbäddar en opålitlig webbsida med alla begränsningar aktiverade
<iframe sandbox src="http://example.com/"></iframe>
För att tillåta sidan att köra skript och skicka formulär, lägg till allow-scripts och allow-forms till sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
Om det finns otillförlitligt innehåll (som användarkommentarer) på samma domän som överordnad webbsida, kan en iframe användas för att inaktivera skript medan det fortfarande tillåter överordnade dokument att interagera med dess innehåll med JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
Förälderdokumentet kan lägga till händelselister och ändra storlek på IFrame så att det passar dess innehåll. Detta, tillsammans med allow-top-navigation , kan göra att sandlådan iframe verkar vara en del av överordnade dokument.
Denna sandlåda är inte en ersättning för att desinficera input men kan användas som en del av en fördjupad djupstrategi.
Var också medveten om att denna sandlåda kan subverteras av en angripare som övertygar en användare att besöka iframes källa direkt. HTTP-rubriken för innehållssäkerhet kan användas för att mildra denna attack.