codestory

Die Anleitung zu HTML IFrame

  1. HTML iframe
  2. width, height
  3. srcdoc
  4. name
  5. sandbox

1. HTML iframe

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:
  • HTML Global Attributes
Mehr sehen, benutzen Sie Javascript um mit der Hierarchie von Frame zu arbeiten:

2. width, height

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%;
}

3. srcdoc

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>

4. name

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>

5. sandbox

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

Neueste Artikel

Show More