Inhaltsverzeichnis
Die Anleitung zu HTML IFrame
View more Tutorials:
Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.
Facebook
In HTML wird das Tag <iframe> benutzt um eine Seite innerhalb einer anderen Seite anzuzeigen.
Unten ist das die einfachste Syntax damit Sie ein <iframe> erstellen:
<iframe src="URL"></iframe>
Die Liste der Attributes von <iframe>:
| Das Attribut | Die Wert | Die Bezeichnung |
|---|---|---|
| src | URL | Die Addresse des Dokument festlegen, um in <iframe> einzubetten. |
| srcdoc | HTML_code | Die Inhalt HTML der Seite festlegen um in <iframe> anzuzeigen. |
| name | text | Den Name von <iframe> festlegen. |
| height | pixels | Die Höhe von <iframe> festlegen. Die Default-Wert ist 150 pixel. |
| width | pixels | Die Breite von <iframe> festlegen. Die Default-Wert ist 300 pixel. |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Einige Einschränkungen (restrictions) für die Inhalt in <iframe> einzusetzen erlauben. |
Achtung: Einige Attribute von HTML4.1 <iframe> werden in HTML5 nicht mehr unterstützt. Das sind :align, frameborder, longdesc, marginheight, marginwidth, scrolling.
Das Tag <iframe> unterstützt die Standard-Attribute in HTML auch:
Mehr sehen, benutzen Sie Javascript um mit der Hierarchie von Frame zu arbeiten:
Die Attribute width, height hilft Ihnen bei der Festlegung der Breite, Höhe in pixel für <iframe>. Die Default-Wert von (width,height) = (300px,150px).
width-height-example.html
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<meta charset="UTF-8">
</head>
<body>
<h3>iframe - width/height:</h3>
<iframe src='child.html'
width= 300 height = 100
style="border:1px solid black"></iframe>
</body>
</html>
Sie können CSS benutzen um die Breite und Höhe für <iframe> einzustellen:
css-width-height-example.html
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<meta charset="UTF-8">
</head>
<body>
<h3>iframe - width/height:</h3>
<iframe src='child.html'
style="width:300px;height:100px;border:1px solid black"></iframe>
</body>
</html>
vw, vh
In CSS ist vw-Einheit die Abkürzung von Viewport Width und vh die Abkürzung von Viewport Height.
- 20vw = 20% Viewport Width
- 100vw = 100% Viewport Width
- 20vh = 20% Viewport Height
- 100vh = 100% Viewport Height
- ...
Das folgende Beispiel benutzt CSS um die Breite und die Höhe für <iframe> zu 100% zu setzen:
width-height-100-vw-vh.html
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<meta charset="UTF-8">
</head>
<body>
<h3>iframe:</h3>
<p>style={width:100vw; height:100vh}</p>
<iframe src='child.html'
style="border:1px solid black;width:100%;height:100vh;"></iframe>
<br/>
</body>
</html>
Außerdem gibt es 2 Zugänge, damit Sie die Breite und Höhe für <iframe> zu 100% setzen können:
iframe {
position: fixed;
background: #000;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
}
Oder:
html, body {
height: 100%;
margin: 0; /* Reset default margin on the body element */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
width: 100%;
height: 100%;
}
Das Attribut srcdoc legt eine Inhalt HTML fest um in <iframe> anzuzeigen.
srcdoc-example.html
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<meta charset="UTF-8">
<script>
function setNewContentForIframe() {
var div = document.getElementById("mydiv");
document.getElementById("myframe").srcdoc = div.innerHTML;
}
</script>
</head>
<body>
<h3>iframe - srcdoc:</h3>
<iframe srcdoc="<h3>This is an iframe</h3>" id ="myframe"
height ="100"
style="border:1px solid black"></iframe>
<p>Div</p>
<div style="background: #e5e7e9;padding:5px;" id="mydiv">
<h4>Content in a div</h4>
Content in a div
</div>
<br/>
<button onClick="setNewContentForIframe()">Set new Content for Iframe</button>
<a href="">Reset</a>
</body>
</html>
Der Name von <iframe> kann wie ein target (das Ziel) für das Tag <a> verwendet werden:
name-example.html
<!DOCTYPE html>
<html>
<head>
<title>iframe name</title>
<meta charset="UTF-8">
</head>
<body>
<h3>iframe - name:</h3>
<a href="child.html" target="myframe">Open Link in 'myframe'</a>
<br/><br/>
<iframe src=''
style="border:1px solid black" name="myframe"></iframe>
<br/>
<a href="">Reset</a>
</body>
</html>
Das Attribut sandbox wird benutzt um für die zusätzlichen Einschränkungen (restriction) für <iframe> anzuwenden.
Das Attribut sandbox kann eine der folgenden Werten bekommen oder mehrere Werten werden durch ein Leerzeichen getrennt. Wenn die Wert von sandbox leer ist, d.h alle Einschränkungen werden angewendet.
allow-forms
FORM in <iframe> erlauben, vorzulegen (submit). Wenn Sie das Attribut sandbox für <iframe> benutzen, fasst sein Wert das Schlüsselwort "allow-forms" aber nicht um, d.h die Aktion submit von FORM in <iframe> wird deaktiviert .
allow-modals
Die Funktionen alert(), confirm(), prompt() erlauben, in <iframe> zu arbeiten.
allow-popups
Das Schlüsselwort allow-popups erlaubt <iframe> , ein neues Fenster zu öffnen, z.B erlaubt, window.open(), showModalDialog(), und <a target="_blank"> zu benutzen. Wenn <iframe> das Attribut sandbox hat, fasst seine Wert das Schlüsselwort allow-popups nicht um, d.h Sie können ein neues Fenster aus diesem <iframe> nicht öffnen.
allow-scripts
erlauben, dass <iframe> läuft die Script, aber kann die Fenster popup nicht erstellen.
allow-top-navigation
erlauben, dass <iframe> "die Browsing Kontext" (browsing context) in die Top-Niveau (top-level) auszurichten. D.h in <iframe> können Sie <a target="_top"> oder window.open(URL,"_top") benutzen, ...
allow-top-navigation-by-user-activation
<iframe> erlauben, die Browsing Kontext in die Top-Level auszurichten (navigate) aber die Ausrichtung muss aus den Aktionen des Benutzer abstammt.
allow-same-origin
Wenn <iframe> das Attribut sandbox hat, aber es enthaltet die Wert allow-same-origin nicht, wird URL von <iframe> behandelt wie sie aus einer besonderen Quelle kommt und passt die Same-Origin Policy nicht.
allow-pointer-lock
Das Schlüsselwort allow-pointer-lock erlaubt <iframe> , Pointer Lock API zu benutzen.
Pointer Lock API erlaubt den Cursor in einem Raum zu schließen (lock). Es guarantiert, dass die Events vom Cursor von diesem Raum noch managet werden, auch wenn der Cursor aus den Grenze des Raum austritt. API ist nützlich für die 3D-Games. Der Benutzer kann das Game kontrollieren auch wenn der Cursor aus der Interface des Game austritt.
allow-orientation-lock
allow-popups-to-escape-sandbox
allow-presentation
