HTML-Code als IFRAME-Quelle anstelle einer URL

122

Gibt es bei diesem Standardcode für einen IFRAME eine Möglichkeit, die src-URL durch einen reinen HTML-Code zu ersetzen? Mein Problem ist also einfach: Ich habe eine Seite, auf der ein HTML-Body aus MYSQL geladen wird. Ich möchte diesen Code in einem Frame präsentieren, damit er unabhängig vom Rest der Seite und innerhalb der Grenzen dieses bestimmten Rahmens ist.

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

Antworten:

148

Sie können dies mit einer Daten-URL tun. Dies umfasst das gesamte Dokument in einer einzigen HTML-Zeichenfolge. Zum Beispiel das folgende HTML:

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

kann wie folgt codiert werden:

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

und dann als srcAttribut des Iframes festlegen . Beispiel .


Bearbeiten: Die andere Alternative besteht darin, 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 ungefähr so ​​aussehen:

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

iframedoc.body.innerHTML = 'Hello world';

Beispiel


Edit 2 (Dezember 2017) : Verwenden Sie das srcdoc- Attribut von HTML5 , genau wie in der Antwort von Saurabh Chandra Patel , die jetzt die akzeptierte Antwort sein sollte! Wenn Sie IE / Edge effizient erkennen können , sollten Sie die srcdoc-polyfill- Bibliothek nur für sie und das Attribut "pure" srcdoc in allen Nicht-IE / Edge-Browsern verwenden (überprüfen Sie caniuse.com , um sicherzugehen).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
einsamer Tag
quelle
5
Internet Explorer Unterstützung? Daten-URI kann keine HTML-Dateien in IE8 darstellen
franzlorenzon
1
Gibt es hier eine Möglichkeit, Ursprungsübergreifende Header bereitzustellen? Chrome beschwert sich immer wieder darüber Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
jozxyqk
1
@ AndrewSwan Ich verstehe das Problem mit den einfachen Anführungszeichen nicht ganz. Kannst du mir ein Beispiel geben?
Septagramm
5
Für alle wie mich, die suchten, wie man HTML auf diese Weise mit PHP codiert, möchten Sie Rawurlencode ( php.net/manual/en/function.rawurlencode.php )
Braiba
4
Beachten Sie, dass bei Verwendung des innerHTMLBrowsers keine Nachkommen-Skript-Tags ausgeführt werden. Weitere Informationen finden Sie im Abschnitt Sicherheitsüberlegungen auf der MDN-Seite Element.innerHTML.
Leonid Vasilev
91

Verwenden Sie html5das neue Attribut srcdoc(srcdoc-polyfill) Docs

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

Browserunterstützung - In folgenden Browsern getestet:

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
Saurabh Chandra Patel
quelle
1
Vielen Dank ! Ich brauchte eine Lösung für eine moderne Webkit-Webansicht, und das war bei weitem der einfachste Weg, dies zu tun!
Antoine Bolvy
1
Es wird nicht in IE
Dude
1
CanIUse.com sagt, dass der Support ziemlich schlecht ist: caniuse.com/#search=srcdoc
msquitieri
5
@msquitieri Nein, es heißt, native Unterstützung schlecht, nicht die Polyfills.
Walf
1
Dies bricht jedoch ab, sobald Sie Anführungszeichen verwenden
Agil
21

Laut W3Schools können Sie dies in HTML 5 mithilfe eines neuen Attributs "srcdoc" tun , aber die Browserunterstützung scheint sehr eingeschränkt zu sein.

Andrew Swan
quelle
4
Es gibt auch eine Polyfüllung für srcdoc .
Uwe Keim
2
@UweKeim Danke, dass du die Polyfüllung vorgeschlagen hast. Es ist leicht und funktioniert großartig.
Der Muffin-Mann
1
Laut caniuse.com unterstützen nur berüchtigte Microsoft IE- und Edge-Browser (außer Opera Mini) das srcdoc- Attribut nicht, daher ist es NICHT "sehr eingeschränkt". Verwenden Sie einfach srcdoc-polyfill für Microsoft-Benutzer.
Heitor