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

¿Soporte de Internet Explorer? URI de datos no puede representar archivos html en IE8

— franzlorenzon

¿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

@AndrewSwan No entiendo del todo el problema con las comillas simples. ¿Puedes darme un ejemplo?

— Septagrama

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

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

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

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

No es compatible con IE

— amigo

CanIUse.com dice que el soporte es bastante pobre: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri No, dice que el soporte nativo es deficiente, no el de polyfill.

— Walf

Pero esto se rompe tan pronto como comienza a usar comillas

— Agil

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

También hay un Polyfill para srcdoc .

— Uwe Keim

@UweKeim Gracias por sugerir el polyfill. Es liviano y funciona muy bien.

— The Muffin Man

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