자바 스크립트를 Iframe에 삽입

Question

내 웹 사이트의 실시간 편집기를 만들고 있습니다. 나는 CSS와 HTML 부분을 가지고있다. 문제는 JS 부분이다. 여기

var frame = $('#preview_content'), 
      contents = frame.contents(), 
      body = contents.find('body'); 
      csstag = contents.find('head').append('<style></style>').children('style'); 
      java = contents.find('head').append('<script><\/script>').children('script');//Issues here 
     $('.area_content_box').focus(function() { 
     var $this = $(this); 
     var check = $this.attr('id'); 
     $this.keyup(function() { 

     if (check === "html_process"){ 
     body.html($this.val()); 
     } else if(check === "css_process") { 
     csstag.text($this.val()); 
     } else if (check === "java_process"){ 
     java.text($this.val()); 
     } 

     }); 
     }); 

문제는 내가이 시도 그 어느 때가 iframe을 몸이나 머리에 스크립트 태그를 주입하지 않는 것입니다 코드의 조각이다. 내가 주사를 읽고 끝점 스크립트 태그를 포함하는 몇 가지 문제를 읽었습니다. 나는 스크립트 태그를 삽입하는 방법을 알아야하고, 실제로 그것들을 머리 속에 넣고 싶지만, 몸이 더 쉽다면 괜찮습니다.

jfriend00 - 정직하게 생각한다면이 바닐라 만들기에 집중할 것입니다.

내 JS 편집기를 올바르게 사용하는 방법에 대한 조언이 필요하십니까? 이 스타일 태그를 만들고 해당 DOM 요소를 기억하는 것이 훨씬 더 좋을 것이다 것 같다

csstag = contents.find('head').append('<style></style>').children('style'); 
java = contents.find('head').append('<script><\/script>').children('script');//Issues here 

: 그들은으로 문제가있을 수 있습니다 같은 코드의

Answer 1

이 두 라인이 보인다.

var iframe = document.getElementById("preview_content"); 
var iframewindow = iframe.contentWindow || iframe.contentDocument.defaultView; 
var doc = iframewindow.document; 
var csstag = doc.createElement("style"); 
var scripttag = doc.createElement("script"); 
var head = doc.getElementsByTagName("head")[0]; 
head.appendChild.cssTag; 
head.appendChild.scriptTag; 

$('.area_content_box').focus(function() { 
    var $this = $(this); 
    var check = this.id; 
    $this.keyup(function() { 
     if (check === "html_process") {\ 
      // I would expect this to work 
      doc.body.html($this.val()); 
     } else if(check === "css_process") { 
      // I don't know if you can just replace CSS text like this 
      // or if you have to physically remove the previous style tag 
      // and then insert a new one 
      csstag.text($this.val()); 
     } else if (check === "java_process"){ 
      // this is unlikely to work 
      // you probably have to create and insert a new script tag each time 
      java.text($this.val()); 
     } 
    }); 
}); 

이 코드는 본문 HTML에서 작동하며 CSS 텍스트를 스타일 태그로 사용할 수 있습니다.

나는 당신이하는 방식대로 태그에 텍스트를 할당하여 스크립트를 변경할 수 없으므로 자바 스크립트에서 작동하지 않을 것이라고 생각합니다. 스크립트가 파싱되면 javascript 네임 스페이스에 있습니다.

공개 API가 없습니다. 이전에 정의되고 해석 된 스크립트를 제거하는 것에 대해 알고 있습니다. 후속 스크립트로 전역 심볼을 재정의 할 수는 있지만 이전 스크립트 나 그 효과를 제거 할 수는 없습니다.

내 코드라면 이전 스타일 태그를 제거하고 새 스타일 태그를 만들고 DOM에 삽입하기 전에 텍스트를 설정 한 다음 DOM에 삽입하십시오.

그런 식으로하지 않으려는 경우 이미 삽입 된 (및 구문 분석 한) 스타일 태그에 .text()을 설정하는 개념이 모든 관련 브라우저에서 작동하는지 여부를 테스트해야합니다.

스크립트 태그의 경우 새 스크립트 태그를 작성하고 다시 삽입해야하지만 전역 심볼을 다시 정의하는 것 외에 이미 구문 분석 된 이전 코드를 제거 할 방법은 없습니다. 코드를 처음부터 새로 시작하려면 처음부터 새로운 iframe 객체를 만들어야합니다.

---

다른 문제가 있습니다. .area_content_box에 포커스가있을 때마다 .keyup() 이벤트 핸들러를 설치하면 많은 수의 이벤트 핸들러가 설치되어 결국 모두 호출되고 동일한 작업을 수행하려고 할 수 있습니다.