tag - poner html dentro de un iframe(usando javascript)
title of page html (6)
Tengo el mismo problema, donde tengo que mostrar el 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 tenga el mismo requisito que yo.
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>
¿Puedo crear un iframe vacío como marcador de posición para luego insertar html en él?
En otras palabras, supongamos que tengo un iframe vacío con una identificación,
¿Cómo inserto html en él?
Estoy usando jquery, si eso lo hace más fácil.
No, no es. Modificaría 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 );
});
Puedes 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();
El html de jQuery elimina las etiquetas de cuerpo, html y cabezales del HTML insertado.
Sí, sé que es posible, pero el problema principal es que no podemos manejar un marco desde afuera, ya he cargado 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 golpear eso.
Ver el origen 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 );
});
iframeElementContainer = document.getElementById(''BOX_IFRAME'').contentDocument;
iframeElementContainer.open();
iframeElementContainer.writeln("<html><body>hello</body></html>");
iframeElementContainer.close();