Bookmarklet wait until Javascript is loaded

Question

I've got a bookmarklet which loads jQuery and some other js libraries.

How do I:

Wait until the javascript library I'm using is available/loaded. If I try to use the script before it has finished loading, like using the $ function with jQuery before it's loaded, an undefined exception is thrown.
Insure that the bookmarklet I load won't be cached (without using a server header, or obviously, being that this is a javascript file: a metatag)

Is anyone aware if onload for dynamically added javascript works in IE? (to contradict this post)

What's the simplest solution, cleanest resolution to these issues?

"Wait until the javascript library is available" please elaborate this. What are you waiting for? — Josh Stodola, Apr 16 '09 at 14:40

Vincent Robert · Accepted Answer · 2016-08-19T12:47:45.290

24

It depends on how you are actually loading jQuery. If you are appending a script element to the page, you can use the same technique that jQuery uses to dynamically load a script.

EDIT: I did my homework and actually extracted a loadScript function from the jQuery code to use in your bookmarklet. It might actually be useful to many (including me).

function loadScript(url, callback)
{
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = url;

    // Attach handlers for all browsers
    var done = false;
    script.onload = script.onreadystatechange = function()
    {
        if( !done && ( !this.readyState 
                    || this.readyState == "loaded" 
                    || this.readyState == "complete") )
        {
            done = true;

            // Continue your code
            callback();

            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            head.removeChild( script );
        }
    };

    head.appendChild(script);
}


// Usage: 
// This code loads jQuery and executes some code when jQuery is loaded
loadScript("https://code.jquery.com/jquery-latest.js", function()
{
    $('my_element').hide();
});

edited Aug 19 '16 at 12:47

answered Apr 16 '09 at 14:57

Vincent Robert

35,564
14
82
119

1

you don't need to specify type="text/javascript" ? – vsync Sep 14 '09 at 07:16
1

not any more. Nowadays browsers assume untyped scripts are javascript – joeytwiddle Dec 20 '10 at 09:40
They do assume that, but is it considered proper form? – devios1 Mar 19 '12 at 14:50
how can we wrap this to check if a page already has jquery loaded (and a certain version) – Adi Mar 15 '13 at 12:10
More detail: http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/ – Bryan Downing Oct 22 '14 at 03:02
This works well, thanks. Worth noting that my page was on https and wouldn't load jquery from the http domain. – Carlton Aug 18 '16 at 17:51
Switched to HTTPS, I see no reason to use HTTP now. – Vincent Robert Aug 19 '16 at 12:48

score 1 · Answer 2 · answered Jun 04 '11 at 07:01

I've paid an attention that in Chrome the order of scripts that are loaded is undetermined, when using @Vincent Robert's technique. In this case a little modification helps:


(function() {
    var callback = function() {
        // Do you work
    };
        // check for our library existence
    if (typeof (MyLib) == 'undefined') {
        var sources = [
                'http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js',
            'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
            'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js',
            'http://myhost.com/javascripts/mylib.min.js'];

        var loadNextScript = function() {
            if (sources.length > 0) {
                var script = document.createElement('script');
                script.src = sources.shift();
                document.body.appendChild(script);

                var done = false;
                script.onload = script.onreadystatechange = function() {
                    if (!done
                            && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                        done = true;

                        // Handle memory leak in IE
                        script.onload = script.onreadystatechange = null;

                        loadNextScript();
                    }
                }
            } else {
                callback();
            }
        }
        loadNextScript();

    } else {
        callback();
    }
})();

score 1 · Answer 3 · answered Apr 16 '09 at 14:39

1

To answer your first question: Javascript is interpreted sequentially, so any following bookmarklet code will not execute until the library is loaded (assuming the library was interpreted successfully - no syntax errors).

To prevent the files from being cached, you can append a meaningless query string...

url = 'jquery.js?x=' + new Date().getTime();

answered Apr 16 '09 at 14:39

Josh Stodola

81,538
47
180
227

Apparently, dynamically added javascript doesn't work exactly as you describe. The element is added by the addElement DOM function and immediately returns. onLoad helps, but I'm disturbed by this post: http://answers.google.com/answers/threadview?id=595949 – cgp Apr 16 '09 at 14:51
Your comment is not accurate, specially when it comes to this question. altCognito described the problem, let me make it a bit clearer. If your script dynamically adds a script tag, the contents of the dynamic tag won't be parsed until you exit out of the current script tag – Ruan Mendes Dec 02 '10 at 23:59

score 0 · Answer 4 · answered Apr 16 '09 at 14:48

0

I got a little closer with this, but not completely. It would be nice to have a discrete, example of a bookmarklet that demonstrated how to avoided caching.

answered Apr 16 '09 at 14:48

cgp

41,026
12
101
131

Bookmarklet wait until Javascript is loaded

4 Answers4

Linked