Resolved document.body.innerHTML and Javascript

[djh101]

I'm currently working on an HTML executor and would like users to be able to put javascript in their code if they wish to do so. Currently I have their input sent to an iframe via document.body.innerHTML. The problem, though, is that user submitted javascript doesn't work (with the exception of anything placed in the onload attribute of an image). Any suggestions?

[xelawho]

text nodes?

[djh101]

What about text nodes?

[xelawho]

weren't you looking for suggestions? I thought I read that somewhere.

[felgall]

You can't add JavaScript using innerHTML - you have to use createElement('script') to add a script into a web page that will then be actually run.

innerHTML basically inserts text into the web page - that some of it is HTML tags means that the browser will apply the CSS applicable to those tags to their content however the entire content is really only text as far as JavaScript is concerned - to be able to interact with it from JavaScript you have to build the DOM properly.

[djh101]

document.write seems to work just fine. Isn't it lovely when you solve your own problems? 8)

[felgall]

Originally Posted by djh101

document.write seems to work just fine. Isn't it lovely when you solve your own problems? 8)

But in solving that one problem that way you now have a hundred more just waiting to happen the next time you touch the code in the page. There are lots of reasons why you should never use document.write in a script running against a web page and not knowing how to write JavaScript properly is the only reason now for doing so.

Unless you still run Netscape 4 you should consider document.write to be dead and gone as that is the most recent browser that requires that you use such messy obtrusive statements as document.write - that call is now only needed in userscripts that are generating new web pages from someone else's web page that you have loaded into your browser (such as a dynamic view source that shows the way the source looks after the JavaScript has updated it).

If the different ways JavaScript can update the web page were dates then the DOM would be 2012, innerHTML would be 2010 and document.write would be 12 billion BC.

[djh101]

I suppose you're right. I was hoping for a nice one line solution, but those don't always exist.

[felgall]

Originally Posted by djh101

I was hoping for a nice one line solution, but those don't always exist.

Any hugely complex piece of JavaScript written by someone else and contained within a function effectively is a nice one line solution at least as far as the code you need to write is concerned. So all you need to do is to find code that someone else has made available for others to use that does what you want and call that.

The same applies to any function you have already written yourself the second time you need to use it.

[felgall]

Take a look at http://ejohn.org/blog/pure-javascript-html-parser/ - The JavaScript there written by John Resig (who also wrote jQuery) provides you with a one line solution that just calls his code

for example instead of

document.getElementById('test').innerHTML = '<script ...';

which doesn't work you would substitute

HTMLtoDOM('<script ...', document.getElementById("test"));

which would parse the HTML and add it to the web page properly using the DOM therefore allowing script calls within the code to run and any subsequently run scripts to interact with the content properly.