Question

从源

加载jQuery

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

我做了这个测试用例，但似乎没有用有人可以帮助我：

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已成功加载它。为什么它似乎不起作用？因为请求是异步的，并且当脚本同步运行时，它会在第一个脚本加载之前执行所有步骤。

所以：

jQuery不存在。
添加SCRIPT元素以从Google加载（浏览器发送请求并继续执行脚本）
jQuery不存在添加其他来源
...

等等。

解决方案

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

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

附加说明

正如我所读到的那样，使用这种技术检测404s时会遇到问题。建议的方法是使用Ajax（XHR），然后附加脚本元素并将收到的内容添加到其中。这将是为所有浏览器执行此操作的最可靠方式。

Answer 5

罗杰的回答很可笑。在这里，使用它代替它的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>

如果没有加载，从外部源加载jQuery

5 个答案:

问题

解决方案

附加说明