[자바스크립트] javascript로 iframe에 동적으로 소스를 추가하거나 변경하는 방법

by zzznara

HTML

<script src="https://code.jquery.com/jquery-git.min.js"></script>
<h2>Textarea에 입력한 내용이 Iframe에 반영됩니다.</h2>
<textarea name="contents"><font color=red>빨강</font><font color=blue>파랑</font></textarea>

<br/>

<h2>Iframe</h2>
<iframe id="dIframe"></iframe>

<p><br/></p>

CSS

textarea {
    width: 100%;
    height: 80px;
}

iframe {
    width: 100%;
    height: 80px;
}

JavaScript

$(function(){
    // Textarea의 내용을 iframe에 세팅하자.
    funcSetIframe();

    // Textarea에 입력(key-in)을 할 때마다 실행되는 event 세팅
    $("[name=contents]").keyup(function(){
       funcSetIframe();
    });
});

function funcSetIframe() {
    // iframe을 담는 변수
    var iframe = document.getElementById('dIframe');

    // 브라우저 버전에 따라 iframe의 document를 가져온다.
    var iframedoc = iframe.document;
    if (iframe.contentDocument) {
        iframedoc = iframe.contentDocument;
    } else if (iframe.contentWindow) {
        iframedoc = iframe.contentWindow.document;
    }
 
     // iframe에 textarea에 입력한 소스를 반영한다.
     if ( iframedoc ) {
         iframedoc.open();
         iframedoc.writeln( $("[name=contents]").val());
         iframedoc.close();
     } else {
        alert('소스를  iframe 안에 추가할 수 없습니다.');
     }
}