poniendo html dentro de un iframe (usando javascript)

StackOverflow https://stackoverflow.com/questions/620881

Pregunta

¿Puedo crear un iframe vacío como un marcador de posición para luego insertar html en él?

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

¿Cómo inserto html en él?

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

¿Fue útil?

Solución

También puedes hacerlo sin jQuery: 

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

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

El cuerpo de html de jQuery, el código html y las etiquetas de cabeza del HTML insertado.

Otros consejos

Ver el código fuente de esta página: http://mg.to/test/dynaframe.html Parece hacer exactamente lo que quieres 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 );
});

No, no lo es. Deberías modificar el script de esta manera: 

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

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

Sí, sé que es posible, pero el problema principal es que no podemos manejar un marco desde fuera. Ya he cargado algo más. 

$(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 empezamos como 

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

Entonces es imposible sacar eso.

  

Tengo el mismo problema, donde tengo que mostrar un fragmento de código html en iframe dinámicamente desde la base de datos sin el atributo SRC de iframe y solucioné el mismo problema con el siguiente código

     

Espero que esto ayude a alguien que tiene el mismo requisito que yo tenía.

ejemplo de jsfiddle aquí

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>

JS 

<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top