Javascript inclusion in iframe

Question

I am creating a live editor for my site. I have parts of CSS and HTML, only problem now in JS. Here is a snippet of code

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

The problem is not that the script tags in the iframes body or in the head, when I try to do this, do not insert. I read about injections and some problems containing the end tag of the script. I need to figure out how to enter script tags, really want them to be in the head, but if the body has become easier, this is normal.

jfriend00 - I will focus on making this vanilla if you think I should be honest.

So, any tips on how to make the correct editor correct with JS injection?

Answer 1

These two lines of code look like they might have problems:

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

It seems to be much better to create a style tag and remember this DOM element.

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

This should work for the HTML body, and it can work for CSS text in a style tag.

I do not believe this will work for javascript since you cannot modify the script by assigning the text to the tag like you do. After parsing the script, it is in the javascript namespace.

There is no public API that I know for deleting previously defined and interpreted scripts. You can redefine global characters with subsequent scripts, but not delete previous scripts or their effects.

If this was my code, I would delete the previous style tag, create a new one, set the text on it before it was inserted into the DOM, and then paste it into the DOM.

If you are not going to do this, you will need to check to see if this installation concept .text() works on an already inserted (and parsed) style tag in all relevant browsers.

For the script tag, I am sure that you will need to create a new script tag and reinsert it, but there is no way to get rid of the old code that has already been parsed, other than overriding the global characters. If you really want to start a new code, you will need to create a new iframe from scratch.

---

There are other problems with this. You install the .keyup() event handler every time .area_content_box gets focus, which can easily cause many of the event handlers to be installed, all will be called, and everyone will try to do the same job.