Can't insert js programmatically if it uses document.write

Question

I am trying to insert js files programmatically, using jquery and something like this:

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://someurl/test.js';
$('body').append(script);

It works fine, if test.js contains an alert or some simple code it works fine, but if the file test.js contains document.write, and the file including the js is hosted on another domain than test.js (or localhost), nothing happens and firebug shows the error :

A call to document.write() from an asynchronously-loaded external script was ignored.

If the test.js and the file that include it are hosted on the same domain, on chrome it still wont work but on firefox the document.write gets executed fine but the page stays "loading" forever and sniffer show request to all the files with "pending" status.

What other methods to include js files programmatically could I try?

The problem isn't how you're including the file, it is that there is a `document.write()` being executed after the page has loaded. — nnnnnn, Jan 06 '12 at 04:03

score 4 · Answer 1 · edited Aug 31 '15 at 21:39

4

use innerHTML instead of using document,write.

and use following code to register script,

(function() {
    var jq = document.createElement('script');
    jq.type = 'text/javascript';
    jq.async = true;
    jq.src = 'http://someurl/test.js';
    var s = document.body.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(jq, s);
})();

edited Aug 31 '15 at 21:39

THE AMAZING

1,374
2
15
37

answered Jan 06 '12 at 04:02

Chamika Sandamal

22,027
5
58
81

score 1 · Answer 2 · answered Jan 06 '12 at 04:00

1

Document.write is ONLY for synchronous tasks when the html is loaded (for the very first time), never for asynchronous tasks like the one you are trying to do.

answered Jan 06 '12 at 04:00

Ivan Castellanos

7,234
1
39
39

That is correct; but if can modify the external script, use innerHTML instead of document.write like @ChamikaSandamal said. – Ivan Castellanos Jan 06 '12 at 04:22

score 1 · Answer 3 · answered Jan 06 '12 at 04:11

1

What you want to do is dynamically insert a <script> DOM element into the HEAD element. I had this script sitting around. As an example, it's a race condition, but you get the idea. Call load_js with the URL. This is done for many modern APIs, and it's your best friend for cross-domain JavaScript.

<html>
    <head>
        <script>
            var load_js = function(data, callback)
            {
                    var head = document.getElementsByTagName("head")[0];

                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = data;
                    head.appendChild(script);

                    if(callback != undefined)
                            callback();
            }

            load_js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");

            setTimeout(function() {
                $('body').html('loaded');
            }, 1000);
        </script>
    </head>

    <body></body>
</html>

answered Jan 06 '12 at 04:11

Eric Muyser

3,263
3
26
28

Hi Eric, 1>This loads the jQuery, but if I pass any function as a second parameter to load_js() that function is not called after loading of js. 2> At what moment load_js and setTimeout are called ? Can you tell the flow of execution here ? – Umesh Patil Jan 06 '12 at 04:25
1

Umesh, the 2nd parameter isn't called after loading the JS, just after the DOM element is injected. In order to get a callback after a script is loaded, you want JSONP. http://en.wikipedia.org/wiki/JSONP Google's JS API handles that for you if you use it, but the above was only an example. Here: http://925html.com/code/using-googles-ajax-apis/ Once you have jQuery, you can inject more – Eric Muyser Jan 06 '12 at 04:34
Eric, This is really wonderful stuff you said :) I am following your blog..why don't you write many more stuffs like that.. – Umesh Patil Jan 06 '12 at 05:13

score 0 · Answer 4 · answered Jan 06 '12 at 04:02

There isn't anything wrong with your approach to inserting JavaScript. document.write just sucks a little bit. It is only for synchronous tasks, so putting a document.write in a separate script file is asking for trouble. People do it anyway. The solution I've seen most often for this is to override document.write.

Can't insert js programmatically if it uses document.write

4 Answers4

Linked