Loading JavaScript Into Div Dynamically

Question

I need to load JavaScript code (which I don\'t have control over) from a URL into a div. The JavaScript code is a bunch of document.write() statements. Once the document.write()

Answer 1

You can setup an html page that has just this (in this example it's called test2.html):

<script type="application/javascript" src="<url of JavaScript>.js"></script>

You can then load this page into the DOM in an iframe and attach a load event handler that gets the contents of the page after it's done loading. This example then also removes the <iframe> from the DOM:

$(function () {

    //append the iframe onto the body, then select it and attach an event handler for the `load` event
    $('body').append('<iframe id="myiframe" style="display: none"></iframe>').children('iframe').on('load', function () {

                //set the html of the `mydiv` element to the body of the loaded page (test2.html)
        $('#mydiv').html($(this).contents().children().children('body').html());

                //remove the iframe from the DOM
        $(this).remove();

      //set the source of the iframe after the `load` event handler is setup to make sure it fires properly
    }).attr('src', 'test2.html'); 
});

Here is a demo: http://apexeleven.com/stackoverflow/document.write/test.html

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.

Answer 2

$.getScript('foo.js', function() {
 alert('foo.js was loaded, do something cool now');
});

Answer 3

How would I know when the document.write statements have finished executing and I can safely extract the text out of the div and use it?

Your approach won't work at all.

If the DOM has finished loading (which is probably has if you are starting to manipulate it programatically) then it will be in a closed state so calling document.write will first call document.open which will erase the entire document.

(If the DOM hasn't finished loading, then the content will be written to the end of the document and not to the point where the script is inserted).

Answer 4

what you can do is::

1) initially set the div box to something default (zero or null)

2) set a timer, for 500/1000 MS and check if the text of the div has changed since last time or not.

3) if text is still default, goto 2

4) if text has changed and timeout, take the value as final value, else goto 2.

considering that the remote JS will do all the writing at once, that is, there is no large gap between its document.writes

Answer 5

You should see the jQuery.getScript() function.

Here is from the doc's example:

$.getScript('ajax/test.js', function(data, textStatus){
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log('Load was performed.');
});

Answer 6

document.write() after your document is loaded will clear your document and start a new one. You don't document.write() into a div that already exists unless it's inline javascript that is included in that div and is loaded as your document loads/renders.

So, that leaves you two options:

1) You can create an empty iframe and load the JS into that iframe and let it render into that iframe. If you have no cooperation from the JS, you will likely have to poll to see when the rendering appears to be done. If you create the iframe properly, you may be able to set up a monitor to see when the iframe is loaded.

2) You can include the JS inline into your div and it will render into your div as your page is loaded. This would require baking the div and the script file into your own page HTML like this:

<div id="renderTarget">
<script src="xxx.js"></script>
</div>

If you did it this way, then you would know that it was done rendering when your own document was done loading.