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>

html iframe frame

— 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

Internet Explorer Unterstützung? Daten-URI kann keine HTML-Dateien in IE8 darstellen

— franzlorenzon

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

@ AndrewSwan Ich verstehe das Problem mit den einfachen Anführungszeichen nicht ganz. Kannst du mir ein Beispiel geben?

— Septagramm

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

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

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

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

Es wird nicht in IE

— Dude

CanIUse.com sagt, dass der Support ziemlich schlecht ist: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri Nein, es heißt, native Unterstützung schlecht, nicht die Polyfills.

— Walf

Dies bricht jedoch ab, sobald Sie Anführungszeichen verwenden

— Agil

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

Es gibt auch eine Polyfüllung für srcdoc .

— Uwe Keim

@UweKeim Danke, dass du die Polyfüllung vorgeschlagen hast. Es ist leicht und funktioniert großartig.

— Der Muffin-Mann

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