2009-03-06 5 views
32

빈 iframe을 나중에 HTML을 삽입하기위한 자리 표시 자로 만들 수 있습니까?iframe 안에 html 넣기 (자바 스크립트 사용)

otherwords에서

,

가 어떻게 거기에 HTML을 삽입 할, 내가 ID로 빈 iframe이 있다고 가정?

jquery를 사용하면 더 쉽게 사용할 수 있습니다.

답변

30

당신은 또한 jQuery를하지 않고 작업을 수행 할 수 있습니다 삽입 된 HTML에서

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과 머리 태그를.

+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> 
관련 문제