mettere HTML in un iframe (usando javascript)

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

Domanda

Posso creare un iframe vuoto come segnaposto per inserire successivamente HTML in esso?

In altre parole, supponiamo che io abbia un iframe vuoto con un ID,

Come inserisco HTML in esso?

Sto usando jquery, se questo semplifica le cose.

È stato utile?

Soluzione

Puoi farlo anche senza 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();

html di jQuery rimuove body, html e tag head dall'HTML inserito.

Altri suggerimenti

Visualizza l'origine di questa pagina: http://mg.to/test/dynaframe.html Sembra fare esattamente quello che vuoi fare. 

$(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 non lo è. Modificare lo script in questo modo: 

$(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ì, lo so che è possibile, ma il problema principale è che non possiamo gestire un frame dall'esterno. Ho già caricato un'altra 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 );
});

ma se iniziamo come 

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

Quindi è impossibile eliminarlo.

  

Ho lo stesso problema, dove devo mostrare lo snippet di codice html in iframe in modo dinamico dal database senza l'attributo SRC di iframe e ho risolto lo stesso problema con il seguente codice

     

Spero che ciò possa aiutare qualcuno con gli stessi requisiti che avevo.

esempio jsfiddle qui

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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top