Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts

    document.body.innerHTML and Javascript

    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?
    Last edited by djh101; 01-17-2012 at 08:29 AM.
    "Yeah science!"
    Online Science Tools

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    text nodes?

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    What about text nodes?
    "Yeah science!"
    Online Science Tools

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    weren't you looking for suggestions? I thought I read that somewhere.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    document.write seems to work just fine. Isn't it lovely when you solve your own problems? 8)
    "Yeah science!"
    Online Science Tools

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by djh101 View Post
    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.
    Last edited by felgall; 01-17-2012 at 09:05 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    I suppose you're right. I was hoping for a nice one line solution, but those don't always exist.
    "Yeah science!"
    Online Science Tools

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by djh101 View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    djh101 (01-18-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •