poner html dentro de un iframe (usando javascript)

¿Puedo crear un iframe vacío como marcador de posición para luego insertar html en él?poner html dentro de un iframe (usando javascript)

En otras palabras, supongamos que tengo un iframe vacío con un id,

¿Cómo insertar código HTML en ella?

Estoy usando jquery, si eso lo hace más fácil.

Fuente

2009-03-06 hasen

Usted puede hacerlo sin jQuery también:

var iframe = document.getElementById('iframeID'); 
iframe = iframe.contentWindow || (iframe.contentDocument.document || iframe.contentDocument); 

iframe.document.open(); 
iframe.document.write('Hello World!'); 
iframe.document.close();

de jQuery tiras del cuerpo HTML, HTML y etiquetas de cabeza desde el código HTML insertado.

Fuente

2013-09-23 10:36:53 Blacksonic

Esta es la respuesta correcta. ''. Tenga en cuenta que el iframe debe insertarse en su documento principal. –

Funcionando como un amuleto al cargar scripts "document.write" de solicitudes AJAX –

'iframe = iframe.contentWindow || (iframe.contentDocument.document || iframe.contentDocument); ' – Nildarar

Ver el código fuente de esta página: http://mg.to/test/dynaframe.html Parece que hace exactamente lo que quiere hacer.

$(function() { 
    var $frame = $('<iframe style="width:200px; height:100px;">'); 
    $('body').html($frame); 
    setTimeout(function() { 
     var doc = $frame[0].contentWindow.document; 
     var $body = $('body',doc); 
     $body.html('<h1>Test</h1>'); 
    }, 1); 
});

Fuente

2009-03-06 23:46:55 Tyson

Esto sólo copia el 'body' elemento, cuándo se puede necesitar el elemento' head', o incluso los atributos del elemento 'html' – Flimm

Sí sé que es posible, pero el principal problema es que no podemos manejar un fotograma de fuera de ella que ya se ha cargado alguna otra cosa.

$(function() { 
     var $frame = $('<iframe style="width:200px; height:100px;">'); 
     $('body').html($frame); 
     setTimeout(function() { 
       var doc = $frame[0].contentWindow.document; 
       var $body = $('body',doc); 
       $body.html('<h1>Test</h1>'); 
     }, 1); 
});

pero si comenzamos como

<iframe src="http:/www.hamrobrt.com"> 
<---Your Script to put as you like--->

Entonces es imposible que golpeó a cabo.

Fuente

2009-09-12 04:48:21

No, no lo es. Se podría modificar el script como el siguiente:

$(function() { 
    var $frame = $('iframe'); 
    setTimeout(function() { 
      var doc = $frame[0].contentWindow.document; 
      var $body = $('body',doc); 
      $body.html('<h1>Test</h1>'); 
    }, 1); 
});

Fuente

2010-02-15 17:08:11 hotmeteor

iframeElementContainer = document.getElementById('BOX_IFRAME').contentDocument; 
iframeElementContainer.open(); 
iframeElementContainer.writeln("<html><body>hello</body></html>"); 
iframeElementContainer.close();

Fuente

2014-08-04 10:59:01

tengo el mismo problema, ¿Dónde tengo que mostrar fragmento de código HTML en iframe dinámicamente de base de datos sin atributo SRC de marco flotante y me fijo mismo problema con el siguiente código

espero que esto ayudaría a alguien quien tiene el mismo requisito que yo tuve.

jsfiddle example here

HTML:

<iframe src="" frameborder="0" class="iframe"></iframe> 
<iframe src="" frameborder="0" class="iframe"></iframe> 
<iframe src="" frameborder="0" class="iframe"></iframe> 
<iframe src="" frameborder="0" class="iframe"></iframe>

<script> 
var doc,$body; 
var txt = Array(
      '<style>body{background-color:grey} h1{background-color:red;font-weight:900}</style><h1>Cool!!! this is text for</h1><p>First Iframe</p>', 
      '<style>body{background-color:pink}h1{background-color:green;font-weight:200}</style><h1>Cool This is Text for</h1><p> second Iframe', 
      '<style>body{background-color:yellow}h1{font-weight:400}</style><h1>Cool..... This is text FOR : </h1> <div>3rd Iframe</div>', 
      '<style>body{background-color:blue} h1{font-weight:400}</style><h1>Cool This is text for Fourth iframe</h1>' 
      ); 
$('.iframe').each(function(index,value){ 
    doc = $('iframe')[index].contentWindow.document; 
     $body = $('body',doc); 
     $body.html(txt[index]); 
}); 
</script>

Fuente

2016-07-26 08:13:41

poner html dentro de un iframe (usando javascript)

Respuesta

Cuestiones relacionadas