Inhaltsverzeichnis

Die Anleitung zu HTML IFrame

View more Tutorials:

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:
  • TODO Link!
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

View more Tutorials: