Html-Code als IFRAME-Quelle und nicht als URL

Question 1

Dieser Standardcode für einen IFRAME, gibt es eine Möglichkeit, die src-URL durch nur HTML-Code zu ersetzen? Mein Problem ist also einfach. Ich habe eine Seite, auf der ein HTML-Text aus MYSQL geladen wird. Ich möchte diesen Code in einem Frame darstellen, damit er sich unabhängig vom Rest der Seite und in den Grenzen dieser bestimmten Umrandung darstellt.

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

Question 2

Sie können dies mit einer Daten-URL tun. Dies umfasst das gesamte Dokument in einem einzigen HTML-String. Beispielsweise der folgende HTML-Code:

<html><body>foo</body></html>

kann so codiert werden:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

und dann als einstellen src Attribut des Iframes. Beispiel.

Bearbeiten: Die andere Alternative ist, dies mit Javascript zu tun. Dies ist mit ziemlicher Sicherheit die Technik, die ich wählen würde. Sie können nicht garantieren, wie lange eine Daten-URL vom Browser akzeptiert wird. Die Javascript-Technik würde in etwa so aussehen:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Beispiel

Bearbeiten 2 (Dezember 2017): Verwenden Sie die Html5 srcdoc Attribut, genau wie in Saurabh Chandra Patel‘s Antwort, die jetzt die akzeptierte Antwort sein sollte! Wenn du kannst IE/Edge effizient erkennenist ein Tipp zu verwenden srcdoc-polyfill Bibliothek nur für sie und das “reine” srcdoc-Attribut in allen Nicht-IE/Edge-Browsern (check caniuse.com um sicher zu sein).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

Question 3

verwenden html5‘s neues Attribut srcdoc (srcdoc-polyfill) Dokumente

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

Browserunterstützung – Getestet in den folgenden Browsern:

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

Question 4

Laut W3Schools können Sie dies in HTML 5 mit a tun neues “srcdoc”-Attributaber die Browserunterstützung scheint sehr begrenzt zu sein.

Question 5

iframe srcdoc: Dieses Attribut enthält HTML Inhalt, der überschrieben wird Quelle Attribut. Falls ein Browser das nicht unterstützt srcdoc -Attribut, wird auf die URL in der zurückgegriffen Quelle Attribut.

Lassen Sie es uns anhand eines Beispiels verstehen

<iframe 
    name="my_iframe" 
    srcdoc="<h1 style="text-align:center; color:#9600fa">Welcome to iframes</h1>"
    src="https://www.birthdaycalculatorbydate.com/"
    width="500px"
    height="200px"
></iframe>

Ursprünglicher Inhalt wird übernommen iframes.

Question 6

Ich habe eine Seite, die einen HTML-Körper aus MYSQL lädt. Ich möchte diesen Code in einem Frame präsentieren, damit er sich unabhängig vom Rest der Seite und in den Grenzen dieser spezifischen Umrandung darstellt.

Ein object mit einem uncodierten dataUri hätte möglicherweise auch Ihren Anforderungen entsprochen, wenn nur ein Teil des Datentexts geladen werden sollte:

Der HTML-Code <object> -Element stellt eine externe Ressource dar, die als Bild, verschachtelter Browsing-Kontext oder als von einem Plug-in zu handhabende Ressource behandelt werden kann.

body {display:flex;min-height:25em;}
p {margin:auto;}
object {margin:0 auto;background:lightgray;}

<p>here My uploaded content: </p>
<object data="data:text/html,
  <style>

.table {
  display: table;
  text-align:center;
  width:100%;
  height:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>


<div class="table">
  <header>
    <h1>Title</h1>
    <p>subTitle</p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>">

</object>

Aber behalten Sie Ihre Iframe-Idee bei, Sie könnten Ihren HTML-Code auch in Ihr Iframe-Tag laden und ihn als srcdoc-Wert festlegen. Sie sollten sich nicht um Anführungszeichen kümmern oder ihn in einen dataUri umwandeln, sondern nur einmal onload auslösen.

Das HTML-Inline-Frame-Element (<iframe>) stellt einen verschachtelten Browsing-Kontext dar, der eine andere HTML-Seite in die aktuelle einbettet.

Beide Iframes unten werden dasselbe rendern, einer erfordert zusätzliches Javascript.

Beispiel Laden eines vollständigen Dokuments:

body {
  display: flex;
  min-height: 25em;
}

p {
  margin: auto;
}

iframe {
  margin: 0 auto;
  min-height: 100%;
  background:lightgray;
}

<p>here my uploaded contents =>:</p>
  <iframe srcdoc="<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
html, body {
  height: 100%;
  margin:0;
}

body.table {
  display: table;
  text-align:center;
  width:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>
</head>

<body class="table">
  <header>
    <h1>title</h1>
    <p>injected via <code>srcdoc</code></p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>
</body>
</html>">

</iframe>

  <iframe onload="this.setAttribute('srcdoc', this.innerHTML);this.setAttribute('onload','')">
    <!-- below html loaded -->
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
      <title>Test</title>
      <style>
        html,
        body {
          height: 100%;
          margin: 0;
          overflow:auto;
        }
        
        body.table {
          display: table;
          text-align: center;
          width: 100%;
        }
        
        .table>* {
          display: table-row;
        }
        
        .table>main {
          display: table-cell;
          height: 100%;
          vertical-align: middle;
        }
      </style>
    </head>

    <body class="table">
      <header>
        <h1>Title</h1>
        <p>Injected from <code>innerHTML</code></p>
      </header>

      <main>
        <p>Collection</p>
        <p>Version</p>
        <p>Id</p>
      </main>

      <footer>
        <p>Edition</p>
      </footer>
    </body>

    </html>
    </iframe>