代码之家 › 专栏 › 技术社区 › cgp

bookmarklet等待javascript加载

bookmarklet jquery javascript

cgp · 技术社区 · 15 年前

我有一个书签可以加载jquery和其他一些JS库。

我如何:

等待直到我使用的javascript库可用/已加载。如果我尝试在脚本完成加载之前使用它,比如在加载之前将$function与jquery一起使用,就会引发未定义的异常。
确保我加载的bookmarklet不会被缓存(如果不使用服务器头,或者显然这是一个javascript文件: 梅塔塔格 )

有人知道动态添加的javascript的onload在IE中是否有效吗?(与此相矛盾 post )

对于这些问题,最简单、最清晰的解决方案是什么?

4 回复 | 直到 8 年前

Vincent Robert 8 年前

这取决于您实际如何加载jquery。如果要将脚本元素追加到页面,可以使用jquery用于动态加载脚本的相同技术。

编辑 :我做了家庭作业,并从jquery代码中提取了一个loadscript函数,以在bookmarklet中使用。它可能对很多人(包括我)有用。

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();
});

Josh Stodola 15 年前

要回答您的第一个问题:javascript是按顺序解释的,因此在加载库之前,不会执行以下任何bookmarklet代码(假设库解释成功-没有语法错误)。

为了防止文件被缓存,可以附加一个无意义的查询字符串…

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

Michael Spector 13 年前

我注意到,在chrome中,当使用@vincent robert的技术时,脚本的加载顺序是不确定的。在这种情况下,稍加修改有助于:


(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();
    }
})();

cgp 15 年前

我有点接近 this ,但不完全是。最好有一个不连续的书签示例来演示如何避免缓存。