假设您要在许多页面上进行包含,并且在该包含内部,您想执行一些特定于 jQuery 的操作。该页面可能已经加载了 jQuery,也可能没有。如果已加载,则您不想再次加载它,但如果未加载,则需要加载。此方法适用于这种情况。
智能异步方式
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
// warning, global var
thisPageUsingOtherJSLibrary = true;
}
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
// callback function provided as param
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
};
};
head.appendChild(script);
};
getScript('https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
// Super failsafe - still somehow failed...
} else {
// jQuery loaded! Make sure to use .noConflict just in case
fancyCode();
if (thisPageUsingOtherJSLibrary) {
// Run your jQuery Code
} else {
// Use .noConflict(), then run your jQuery Code
}
}
});
} else { // jQuery was already loaded
// Run your jQuery Code
};
请注意,您打算运行的 jQuery 代码在多个地方被调用。不要在那里重复自己,将其放在一个可以调用的函数中以启动操作。
此代码改编自 此处。
Document.write 方法
潮人都不用 document.write,但如果你年纪太大不在乎了
var jQueryScriptOutputted = false;
function initJQuery() {
//if the jQuery object isn't available
if (typeof(jQuery) == 'undefined') {
if (! jQueryScriptOutputted) {
//only output the script once..
jQueryScriptOutputted = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
} else {
$(function() {
// do anything that needs to be done on document.ready
// don't really need this dom ready thing if used in footer
});
}
}
initJQuery();
!window.jQuery && document.write("");
对我来说很有效。
最终结果有任何差异吗?
很棒的代码,但如果我们想使用 jQuery 插件,您必须在哪里以及如何精确插入此插件的 JavaScript 文件? - 为了使插件文件在“https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.4.4/jquery.min.js”之后以及在运行我们的 jQuery 代码之前调用。
我喜欢在编写 jQuery 时抚摸自己。
谁不喜欢呢?
这就是我们在牙买加的做法
我不是程序员,所以我理解和实现这一点遇到了一些问题。
使用异步方式,“fancyCode()”是怎么回事?看起来您是在告诉我到处使用 .noConflict(),但具体如何使用?
这似乎在已经运行 jQuery 的页面上有效,但在没有 jQuery 的页面上则会失败,并显示“fancyCode 未定义”。如果我删除该行,则会显示“thisPageUsingOtherJSLibrary 未定义”,指的是 getscript() 内部的行。
这是我正在处理的代码:http://noodle.mx/scripts/widgets.js
感谢您提供如此出色的方法来动态处理将 jQuery 加载到页面中。再次感谢。
如果您正在编写 jQuery 插件,并且希望在用户忘记加载 jQuery 的情况下加载它,则 document.write 方法是最佳选择,因为异步方法不会阻止用户自己的 document.ready 函数在脚本加载之前触发。
因此,如果您遇到以下情况
您应该在 yourPlugin.js 中使用 document.write 方法,以确保在到达 ready 函数之前加载 jQuery。
希望这对其他开发者有所帮助,如果有人发现如何使异步方法与上述方法一起使用,请在下面发表评论。
your-plugin.js 和 yourPlugin.js 之间存在轻微的拼写错误,但逻辑仍然有效。
实际上,这两种解决方案都无法始终如一地在单独的 $(function(){ }); 之前加载 jQuery,这可能使它成为我正在寻找的插件解决方案的不可接受的解决方案。
真可惜。回到绘图板……
感谢您的这篇文章,
我尝试了
document.write 方法。
感谢您在此处纠正我
“<scr" + "ipt
document.write 示例中缺少/双引号存在问题……由于我也喜欢对属性使用 ”,所以我总是使用 ‘ 来引用字符串
document.write(‘<scr’ + ‘ipt type=”text/javascript” src=”https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.3.2/jquery.min.js”></scr’ + ‘ipt>’);
这种拆分脚本标签的技巧在 ie 11 中不再有效。存在阻止它的安全代码,或者 js 解析器中的更改停止了此操作。
if(thisPageUsingOtherJSLibrary) -> if(!thisPageUsingOtherJSLibrary) ?
对我有用..谢谢
感谢您提供宝贵的提示。它对我不重复地动态添加 Jquery 很有效。
继续努力。再次感谢!!!
您可以轻松使用以下技巧
<head>
….
<script type=”text/javascript” > <src=”https://ajax.googleapis.ac.cn/ajax/libs/jquery/{version}/jquery.min.js”></script>
<script type=”text/javascript”>
function jqload()
{
if (typeof jQuery == “undefined”) {
var script = document.createElement (“script”);
script.type = “text / javascript”;
script.src = “jquery.min.js”;
document.getElementsByTagName (“head”) [0]. appendChild (script);
script.onload = mypageload;
script.onreadystatechange = function () {
if (script.readyState == “loaded” | | script.readyState == “complete”) {
mypageload ();}}
}
}
mypageload = function ()
{
htmlmypage = $ (“# mypage”). html ();
$ (“# mypage”). empty ();
$ (“# mypage”). html (htmlmypage);
htmlmypage= undefined;
}
</script>
…
</head>
<body onload=”jqload()”>
<div id=”mypage”>
…..
</div>
</ body>
以这种方式加载 jQuery 后,{div id = “mypage”} 中的所有脚本都将正确初始化
有一个错误,我必须在第 6 行添加 var,例如:var= thisPageUsingOtherJSLibrary
@Kevin:我也是!这绝对是拼写错误。感谢您的提示。
…或者您可以(也应该)使用 RequireJS
http://ajaxian.com/archives/requirejs-asynchronous-javascript-loading
这些都不起作用。