iframe 안에 html 넣기(javascript 사용)

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

문제

나중에 HTML을 삽입하기 위해 빈 iframe을 자리 표시자로 만들 수 있나요?

즉, ID가 있는 빈 iframe이 있다고 가정해 보겠습니다.

html을 어떻게 삽입하나요?

더 쉽게 만들려면 jquery를 사용하고 있습니다.

도움이 되었습니까?

해결책

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의 헤드 태그.

다른 팁

이 페이지의 출처를보십시오. 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 );
});

아니요. 다음과 같이 스크립트를 수정합니다.

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

예, 가능하다는 것을 알고 있지만 주요 문제는 외부에서 프레임을 처리할 수 없다는 것입니다. 이미 다른 것을 로드했습니다.

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

그러면 그것을 치는 것은 불가능합니다.

Iframe의 SRC 속성없이 데이터베이스에서 동적으로 iframe에 HTML 코드 스 니펫을 표시 해야하는 문제가 있는데도 같은 문제가 있으며 다음 코드와 동일한 문제를 해결했습니다.

나는 이것이 내가 가진 것과 같은 요구 사항을 가진 사람에게 도움이되기를 바랍니다.

JSFIDDLE 예제

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top