2009-03-06 4 views
32

Kann ich einen leeren iframe als Platzhalter erstellen, um später html einzufügen?html in einen iframe setzen (mit JavaScript)

In anderen Worten, nehme ich mit einem id ein leeres iframe haben,

Wie füge ich html drin?

Ich benutze jquery, wenn das es einfacher macht.

Antwort

30

Sie es ohne jQuery auch tun können:

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

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

jQuery html Streifen Körper, html und Kopf-Tags aus dem eingefügten HTML.

+0

Das ist die richtige Antwort. ''. Beachten Sie, dass der Iframe in das übergeordnete Dokument eingefügt werden muss. –

+0

Beim Laden von "document.write" -Skripts aus AJAX-Anfragen funktioniert das wie ein Zauber: –

+2

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

36

Die Quelle dieser Seite anzeigen: http://mg.to/test/dynaframe.html Es scheint genau das zu tun, was Sie tun möchten.

$(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); 
}); 
+1

Diese nur kopiert das 'body' Element, wenn Sie das' head' Element Möglicherweise müssen oder sogar die Attribute des 'html' Elements. – Flimm

1

Ja, ich weiß, das ist möglich, aber das Hauptproblem ist, dass wir nicht einen Rahmen von außen damit umgehen kann ich schon eine andere Sache geladen.

$(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); 
}); 

aber wenn wir als

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

Dann ist es unmöglich zu schlagen, dass aus starten.

8

Nein, ist es nicht. Sie würden das Skript wie folgt ändern:

$(function() { 
    var $frame = $('iframe'); 
    setTimeout(function() { 
      var doc = $frame[0].contentWindow.document; 
      var $body = $('body',doc); 
      $body.html('<h1>Test</h1>'); 
    }, 1); 
}); 
2
iframeElementContainer = document.getElementById('BOX_IFRAME').contentDocument; 
iframeElementContainer.open(); 
iframeElementContainer.writeln("<html><body>hello</body></html>"); 
iframeElementContainer.close(); 
0

ich gleiches Problem habe, wo ich HTML-Code-Schnipsel in iframe dynamisch aus der Datenbank ohne SRC-Attribut von iframe und I fixed gleiches Problem mit folgendem Code

Ich hoffe, zu zeigen, habe diese jemanden helfen würden, Wer hat die gleiche Anforderung, die ich hatte.

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> 

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>