Codice HTML come sorgente IFRAME invece che URL

122

Questo codice standard per un IFRAME, c'è un modo per sostituire l'URL src con solo codice html? quindi il mio problema è semplice, ho una pagina che carica un corpo HTML da MYSQL voglio presentare quel codice in un frame in modo che lo renda autonomo dal resto della pagina e nei confini di quello specifico confine.

<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
fonte

Risposte:

149

Puoi farlo con un URL di dati. Ciò include l'intero documento in una singola stringa di HTML. Ad esempio, il seguente codice HTML:

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

può essere codificato in questo modo:

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

e quindi impostato come srcattributo dell'iframe. Esempio .

Modifica: l'altra alternativa è farlo con Javascript. Questa è quasi certamente la tecnica che sceglierei. Non puoi garantire la durata di un URL di dati che il browser accetterà. La tecnica Javascript sarebbe simile a questa:

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

iframedoc.body.innerHTML = 'Hello world';

Esempio

Modifica 2 (dicembre 2017) : usa l' attributo srcdoc di Html5 , proprio come nella risposta di Saurabh Chandra Patel , che ora dovrebbe essere la risposta accettata! Se riesci a rilevare IE / Edge in modo efficiente , un suggerimento è usare la libreria srcdoc-polyfill solo per loro e l'attributo srcdoc "puro" in tutti i browser non IE / Edge (controlla caniuse.com per esserne sicuro).

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

— lonesomeday
fonte

Supporto per Internet Explorer? L'URI dei dati non può rappresentare i file html in IE8

— franzlorenzon

C'è un modo per fornire intestazioni cross origin qui? Chrome continua a lamentarsi Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

— jozxyqk

@AndrewSwan Non capisco bene il problema con le virgolette singole. Mi puoi fare un esempio?

— Septagram

Per uno come me che stava cercando il modo per codificare HTML in questo modo con PHP, si vuole rawurlencode ( php.net/manual/en/function.rawurlencode.php )

— Braiba

Nota che se utilizzi il innerHTMLbrowser non verranno eseguiti tag di script discendenti. Per ulteriori informazioni, consultare la sezione Considerazioni sulla sicurezza della pagina MDN di Element.innerHTML.

— Leonid Vasilev,

uso html5 il nuovo attributo di srcdoc(srcdoc-polyfill) Documenti

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

Supporto browser: testato nei seguenti browser:

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
fonte

Grazie ! Avevo bisogno di una soluzione per una webview webkit moderna, e quello era di gran lunga il modo più semplice per farlo!

— Antoine Bolvy

Non è supportato in IE

— amico

CanIUse.com dice che il supporto è piuttosto scarso: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri No, dice il supporto nativo povero, non il polyfill.

— Walf

Ma questo si interrompe non appena inizi a usare le virgolette

— Agil

Secondo W3Schools, HTML 5 ti consente di farlo utilizzando un nuovo attributo "srcdoc" , ma il supporto del browser sembra molto limitato.

— Andrew Swan
fonte

C'è anche un Polyfill per srcdoc .

— Uwe Keim

@UweKeim Grazie per aver suggerito il polyfill. È leggero e funziona alla grande.

— The Muffin Man

Secondo caniuse.com solo i famigerati browser IE ed Edge di Microsoft (oltre a Opera Mini) non supportano l' attributo srcdoc , quindi NON è "molto limitato". Usa semplicemente srcdoc-polyfill per gli utenti Microsoft.

— Heitor