从源代码中加载jQuery
我喜欢放弃本地的jquery.js文件,将其托管在其他地方。但是如果Google出现了问题怎么办?因此,让我们编写一个备用方案,如果jQuery仍未加载,则使用另一个来源...
我制作了这个测试用例,但似乎不起作用,也许有人可以帮助我:
从源代码中加载jQuery
我喜欢放弃本地的jquery.js文件,将其托管在其他地方。但是如果Google出现了问题怎么办?因此,让我们编写一个备用方案,如果jQuery仍未加载,则使用另一个来源...
我制作了这个测试用例,但似乎不起作用,也许有人可以帮助我:
这个(来自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>
以下是一个纯javascript的解决方案,它首先检测jQuery是否可用。如果不可用,则尝试CDN版本。如果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>
您的脚本存在问题,即在测试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');
如果您使用Firebug并查看jQuery加载的位置,您会发现Google已经成功加载了它。为什么它似乎不起作用?因为请求是异步的,而您的脚本是同步运行的,它在第一个脚本加载之前执行所有步骤。
所以:
等等。
您应该做的是附加到您的脚本加载元素的onLoad
事件,并在它们加载后检查jQuery。
与向互联网上的某个服务器发送请求并获取结果进行处理相比,脚本执行速度非常快。
据我所读,您将使用此技术检测404时会遇到问题。建议的方法是使用Ajax(XHR),然后附加脚本元素并将接收到的内容添加到其中。这将是所有浏览器中最可靠的方法。
<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>
document.write
不在其中。 - buley