2009-03-06 5 views
32

Могу ли я создать пустой iframe в качестве заполнителя, чтобы позже вставить html в него?размещение html внутри iframe (с помощью javascript)

В других случаях, предположим, что у меня есть пустой 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

Работает как шарм при загрузке сценариев «document.write» из запросов AJAX –

+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

Это только копирует 'body' элемент, когда вы, возможно, потребуется' head' элемент, или даже атрибуты элемента '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

У меня такая же проблема, где я должен показать HTML фрагмент кода в IFRAME динамически из базы данных без атрибута SRC из фрейма и я установил такую ​​же проблему с помощью следующего кода

Я надеюсь, это поможет кому-то у кого было такое же требование.

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> 
Смежные вопросы