2009-03-06 7 views
32

後でHTMLを挿入するための空のiframeをプレースホルダとして作成できますか?言い換えればiframe内にhtmlを入れる(JavaScriptを使用)

、私はidを持つ空のiframeを持っていると仮定し、

は、どのように私はそれにHTMLを挿入するのですか?

私はjqueryを使用しています。

答えて

30

あなたはまた、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(); 

jQueryのhtmlのストリップ本体、htmlと頭のタグを挿入するHTMLから。

+0

これは正解です。 ''となります。 iframeは親ドキュメントに挿入する必要があります。 –

+0

AJAXリクエストから "document.write"スクリプトを読み込むときの魅力のように働く –

+2

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

36

このページのソースを表示する:http://mg.to/test/dynaframe.htmlあなたのやりたいことを正確に行うようです。

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

あなたは 'head'要素、あるいは属性が必要になる場合があります。このコピーのみ' body'要素、 'html'要素の – Flimm

1

はい、私はそれが可能である知っているが、主な問題は、我々は、私はすでにいくつかの他の事をロードしたことの外側からフレームを扱うことができないということです。

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

が、我々はそれをヒットするのは不可能次に

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

として開始した場合。

8

いいえ、そうではありません。あなたは、このようなスクリプトを変更します:

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

私は、IFRAMEのSRC属性なしで動的にデータベースからのiframe内のHTMLコードスニペットを表示する必要があると私はこれが誰かを助ける願って、次のコード

と同じ問題を修正し、同じ問題を持っています私が持っていたのと同じ要求を持っている人。

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> 
関連する問題