Código HTML como fuente IFRAME en lugar de una URL

122

Este código estándar para un IFRAME, ¿hay alguna manera de reemplazar la URL src con solo código html? entonces mi problema es simple, tengo una página que carga un cuerpo HTML de MYSQL. Quiero presentar ese código en un marco para que se vuelva independiente del resto de la página y en los límites de ese borde específico.

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

Respuestas:

149

Puede hacer esto con una URL de datos. Esto incluye todo el documento en una sola cadena de HTML. Por ejemplo, el siguiente HTML:

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

se puede codificar así:

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

y luego establecer como srcatributo del iframe. Ejemplo .

Editar: La otra alternativa es hacer esto con Javascript. Es casi seguro que esta es la técnica que elegiría. No puede garantizar la longitud de la URL de datos que aceptará el navegador. La técnica de Javascript se vería así:

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

iframedoc.body.innerHTML = 'Hello world';

Ejemplo

Edición 2 (diciembre de 2017) : use el atributo srcdoc de Html5 , al igual que en la respuesta de Saurabh Chandra Patel , ¡que ahora debería ser la respuesta aceptada! Si puede detectar IE / Edge de manera eficiente , un consejo es usar la biblioteca srcdoc-polyfill solo para ellos y el atributo srcdoc "puro" en todos los navegadores que no sean IE / Edge (consulte caniuse.com para estar seguro).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
día solitario
fuente
5
¿Soporte de Internet Explorer? URI de datos no puede representar archivos html en IE8
franzlorenzon
1
¿Hay alguna forma de proporcionar encabezados de origen cruzado aquí? Chrome sigue quejándose Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
jozxyqk
1
@AndrewSwan No entiendo del todo el problema con las comillas simples. ¿Puedes darme un ejemplo?
Septagrama
5
Para cualquiera como yo que buscaba cómo codificar HTML de esta manera con php, querrá rawurlencode ( php.net/manual/en/function.rawurlencode.php )
Braiba
4
Tenga en cuenta que si utiliza el innerHTMLnavegador no ejecutará las etiquetas de secuencia de comandos descendientes. Para obtener más información, consulte la sección Consideraciones de seguridad de la página Element.innerHTML MDN.
Leonid Vasilev
92

use html5el nuevo atributo srcdoc(srcdoc-polyfill) Docs 

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

Compatibilidad con navegadores: probado en los siguientes navegadores:

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
fuente
1
Gracias ! Necesitaba una solución para una vista web de webkit moderna, ¡y esa era, con mucho, la forma más sencilla de hacerlo!
Antoine Bolvy
1
No es compatible con IE
amigo
1
CanIUse.com dice que el soporte es bastante pobre: caniuse.com/#search=srcdoc
msquitieri
5
@msquitieri No, dice que el soporte nativo es deficiente, no el de polyfill.
Walf
1
Pero esto se rompe tan pronto como comienza a usar comillas
Agil
21

Según W3Schools, HTML 5 le permite hacer esto usando un nuevo atributo "srcdoc" , pero el soporte del navegador parece muy limitado.

Andrew Swan
fuente
4
También hay un Polyfill para srcdoc .
Uwe Keim
2
@UweKeim Gracias por sugerir el polyfill. Es liviano y funciona muy bien.
The Muffin Man
1
Según caniuse.com, solo los infames navegadores IE y Edge de Microsoft (además de Opera Mini) no admiten el atributo srcdoc , por lo que NO es "muy limitado". Simplemente use srcdoc-polyfill para usuarios de Microsoft.
Heitor