Insert into specific place in head tag without using document.write

Question

This is probably not possible but worth asking. I am dynamically inserting script tags into my head section of my page. At the moment I am using document.write which many of you will frown upon, but it does do the job fine.

However, for the reasons outlined here, I would like to find an alternative to document.write.

Therefore, I need a function that will do this:

<!-- The document.write writes the new script here synchronously so it will block other scripts -->

<script type="text/javascript">
    // Code here that uses the code from the dynamically inserted script
</script>

Can anybody suggest anything with jQuery or plain javascript that will insert an element on the page, but also meets these requirements:

1. Places the element at the point of which the function was called. e.g. the script tag gets placed after the script tag that called it
2. The script gets loaded synchronously and therefore blocks the other scripts until it is complete

Google do this with their Google.load() method, do they use document.write? Surely not...

Answer 1

You can look at this article - http://www.phpied.com/non-onload-blocking-async-js/ Similar script is used by facebook for loading their SDK asynchronously.

It's cross-browser and can load scripts asynchronously even when the html on the page is not valid (even if the head/body tag are missing).

Here is an example directly from the facebook's SDK:

  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));

You have to make some modifications because it allows you to load the script just a single time (because of if (d.getElementById(id)) {return;}).

If we look at the script closer we can see a number of benefits:

• On your page you just must have a script tag (because of the script for async loading) so that's why it's getting the first script element
• It looks for already added SDK
• It creates new script element with the specified id
• It sets script's src
• It inserts the script element on a specific place
• It loads the scripts asynchronously so it prevents page blocking
• The self-invoking function creates short alias for the document object. This makes the script more compact.

Answer 2

You can do it different ways. As mentioned in various answers here Link. But I use following

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");