라이브 JS/Jquery, Html, CSS 편집기

Question

라이브 HTML/js/jquery/css 편집기에 대한 고유 한 코드를 작성합니다. 이것은 단순히 css, html 및 javascript (특히 jquery)를 삽입하는 코드입니다. 는 CSS와 HTML 잘 작동,하지만 난 ican't을 상관없이 작동 JQuery와 또는 자바 스크립트를 얻을 수가 ... 은을 heres 내 코드 :

<div> 
    <form> 
     <h2>HTML</h2> 
     <textarea id="html"></textarea> 
     <h2>CSS</h2> 
     <textarea id="css"></textarea> 
     <h2>JS</h2> 
     <textarea id="js"></textarea> 
    </form> 
</div> 
<div id="output" style="height: 487px;"> 
    <iframe src="about:blank"></iframe> 
</div> 

: 여기

var contents = $('iframe').contents(), 
    body = contents.find('body'), 
    styleTag = $('<style></style>').appendTo(contents.find('head')); 
var makeScript = $('<script class type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>'); 
var scriptTag = $('<script type="text/javascript"><\/script>').appendTo(contents.find('head')); 
$ ('textarea').keyup(function() { 
    var ths = $(this); 
    if (ths.attr('id') === 'html') { 
     body.html(ths.val()); 
    } 
    else if (ths.attr('id') === 'css') { 
     // it had to be css 
     styleTag.text(ths.val()); 
    } 
    else { 
     makeScript.appendTo(contents.find('head')); 
     scriptTag.text(ths.val()); 
    } 
}); 

내 HTML의 어떤 사람이 제 코드에 뭔가 잘못되었다고 생각하면 도움을 청하십시오. 대답을한다면 해결책을 설명해주십시오. 코드 블록을 입력하는 것뿐입니다. 그리고 jquery와 일반 자바 스크립트를 html 텍스트 영역에 입력하려고했습니다 (스크립트 태그 내에서 그러나 그것은 여전히 ​​효과가 없었습니다).

Answer 1

처음에는 당신이 잘못 생각한 것 같습니다. 그것은이어야한다 scriptTag.text(this.val());

나는 당신의 문제점이 그것보다 더 깊게 간다고 생각한다. DOM에 스크립트 태그를 삽입하면 즉시 평가되지만 실제로 이미 페이지에 추가 된 후에 실제로 코드를 넣으려고 기다리는 중입니다. 그것을 재정렬하십시오.

scriptTag = $("<script type='text/javascript'>" + this.val() + "</script>") 
    .appendTo($('iframe').contents().find('head')); 

참고 다른 기능 범위에 있기 때문에 선택기 내용을 가져와야했습니다.