javascript - 检查 jQuery 是否已加载到书签中

Question

在我的书签中执行 javascript 的主体之前，我正在使用以下代码确保 jQuery 已加载到页面中。此代码是否有可能无法在任何浏览器中正确加载 jQuery？

if (!window.jQuery) {
    var script = document.createElement("script");
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    script.onload = function () {
        foo();
    };
    document.head.appendChild(script);
} else {
    foo();
}

function foo() {
    // bookmarklet code goes here
}

Answer 1

Is there any chance this code fails to load jQuery properly in any browser?

除非相关页面是从本地资源而不是通过 http/https 加载的，否则不会。在这种情况下，协议(protocol)相对 URL 将失败。

不过，您需要颠倒设置 src 和 onload 属性的顺序；如果资源在缓存中，则可以在连接处理程序之前触发事件(浏览器中的 JavaScript 是单线程的，而不是 Web Workers，但浏览器不是单线程的)。

此外，无需在 foo 周围包装额外的函数:

if (!window.jQuery) {
    var script = document.createElement("script");
    script.onload = foo;
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    document.head.appendChild(script);
} else {
    foo();
}

function foo() {
    // bookmarklet code goes here
}

---

如果你想处理协议(protocol)问题，使其与 file: URLs 等一起工作，这很容易做到:

if (!window.jQuery) {
    var protocol = location.protocol;
    if (protocol !== "http:" && protocol !== "https:") {
        protocol = "http:";
    }
    var script = document.createElement("script");
    script.onload = foo;
    script.src = protocol + "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    document.head.appendChild(script);
} else {
    foo();
}

function foo() {
    // bookmarklet code goes here
}