7

从源代码加载 jQuery

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

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

http://jsfiddle.net/RBz4n

4

5 回答 5

7

这工作得很好（来自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>
于 2011-01-13T22:44:46.213 回答
4

这是一个纯 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>
于 2012-04-16T20:33:19.883 回答
2

您的脚本的问题是您没有等待脚本加载，然后再测试是否已加载 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');
于 2010-12-24T00:09:39.313 回答
1

问题

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

所以：

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

等等等等

解决方案

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

与将请求发送到 Internet 上的某个服务器并取回结果进行处理相比，脚本的执行速度快如闪电。

补充说明

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

于 2010-12-23T23:59:20.433 回答
0

罗杰的回答是荒谬的。在这里，改用它，它的 2 行。

<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>
于 2013-05-22T18:45:19.603 回答