如果未加载，则从外部源加载 jQuery

Question

从源加载 jQuery

我喜欢做的是删除本地 jquery.js 并拥有 它托管在其他地方。但如果谷歌宕机了怎么办？所以 让我们编写一个使用其他源的后备代码，如果 jQuery “仍然”未加载...

我做了这个测试用例，但它似乎不起作用，也许 有人可以帮助我：

http://jsfiddle.net/RBz4n

Answer 1

这工作得相当好（来自 HTML5 Boilerplate）：

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

Answer 2

这是一个纯 JavaScript 解决方案，首先检测 jQuery 是否可用。如果没有，它会尝试 CDN 版本。如果该版本不可用，它将尝试本地版本。处理 404 错误。我在一个不知道该网站是否包含 jQuery 的解决方案中使用它。

<script>
if (typeof jQuery === "undefined") {
  loadjQuery("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", verifyJQueryCdnLoaded);
} else 
  main();

function verifyJQueryCdnLoaded() {
  if (typeof jQuery === "undefined")
    loadjQuery("script/jquery-1.6.1.js", main);
  else
    main();
}

function loadjQuery(url, callback) {
  var script_tag = document.createElement('script');
  script_tag.setAttribute("src", url)
  script_tag.onload = callback; // Run callback once jQuery has loaded
  script_tag.onreadystatechange = function () { // Same thing but for IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') callback();
  }
  script_tag.onerror = function() {
    loadjQuery("script/jquery-1.6.1.js", main);
  }
  document.getElementsByTagName("head")[0].appendChild(script_tag);
}

function main() {
  if (typeof jQuery === "undefined")
    alert("jQuery not loaded.");

  $(document).ready(function () {
    // Rest of your code here...
  });

}

</script>

Answer 3

您的脚本的问题在于您没有等待脚本加载然后测试 jQuery 是否已加载。使用类似这样的东西：

function loadScript(src, callback) {
    var head=document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.onreadystatechange = function () {
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            callback();
        }
    }
    script.onload = callback;
    script.src = src;
    head.appendChild(script);
}

function isjQueryLoaded() {
    return (typeof jQuery !== 'undefined');
}

function tryLoadChain() {
    var chain = arguments;
    if (!isjQueryLoaded()) {
        if (chain.length) {
            loadScript(
                chain[0],
                function() {
                    tryLoadChain.apply(this, Array.prototype.slice.call(chain, 1));
                }
            );
        } else {
            alert('not loaded!');
        }
    } else {
        alert('loaded!');
    }
}

tryLoadChain(
    'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
    'http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js',
    'mine.js');

Answer 4

问题

如果您使用 Firebug 并查看 jQuery 的加载位置，您可以看到 Google 已成功加载它。为什么它似乎不起作用？因为请求是异步的，并且当您的脚本同步运行时，它会在加载第一个脚本之前执行所有步骤。

所以：

1. jQuery 不存在。
2. 添加 SCRIPT 元素以从 Google 加载（浏览器发送请求并继续执行脚本）
3. jQuery 不存在 添加另一个源
4. ...

等等。

解决

方案 您应该做的是附加到您的 onLoad 事件脚本加载元素并在加载后检查 jQuery。

与向互联网上的某个服务器发送请求并获取结果进行处理相比，脚本的执行速度快如闪电。

附加说明

正如我所读到的，您在使用此技术检测 404 时会遇到问题。建议的方法是使用 Ajax (XHR)，然后附加脚本元素并向其中添加收到的内容。对于所有浏览器来说，这将是最可靠的方法。

Answer 5

罗杰的回答很荒谬。在这里，使用它，它的两行。

<script>window.jQuery || document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>')</script> 
<script>window.jQuery || document.write('<script src="Content/Scripts/jquery-1.9.1.min.js"><\/script>')</script>