是否可以在同一页面上加载多个不同版本的 jQuery?
我正在制作一个书签,如果未找到该对象,它将加载 jQuery。 加载将检查 jQuery 的版本。 代码如下:
(function(){
var myBkl = {
loadScript: function(src) {
if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){
return;
}
var s = document.createElement('script');
s.setAttribute('src', src);
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
},
whenLoaded: function(callback){
if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') {
callback(window.jQuery);
}
else {
setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
}
},
init: function($){
console.log($.fn.jquery);
}
};
myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
myBkl.whenLoaded(myBkl.init);
})();
我使用这个小书签生成器来创建小书签 http://subsimple.com/bookmarklets/jsbuilder .htm
显然,如果页面已经加载了 jQuery。 1.3.2 脚本的加载将覆盖页面上的 window.jQuery 对象。 我只是想知道是否有办法让 1.3.2 加载到另一个自命名变量? 使用 jQuery.noConflict(true); ?
I'm making a bookmarklet which will load jQuery if the object is not found. The loading will check on the version of jQuery. The code is like:
(function(){
var myBkl = {
loadScript: function(src) {
if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){
return;
}
var s = document.createElement('script');
s.setAttribute('src', src);
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
},
whenLoaded: function(callback){
if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') {
callback(window.jQuery);
}
else {
setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
}
},
init: function($){
console.log($.fn.jquery);
}
};
myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
myBkl.whenLoaded(myBkl.init);
})();
I use this bookmarklet builder to create the bookmarklet http://subsimple.com/bookmarklets/jsbuilder.htm
Obviously if the page already has jQuery loaded. The loading of the 1.3.2 script would overwrite the window.jQuery object on the page. I just wonder is there anyway to let 1.3.2 to load to another self named variable? Using jQuery.noConflict(true);
?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
是的。 我通过这段代码让它工作:
Yes. I got it work by this code:
我怀疑您已经看到了所有注意事项并了解您可以将 jQuery 移动到另一个名称空间:
并且该插件可能无法工作并且您必须在加载或使用其他脚本之前完成所有这些操作。
祝你好运/有点好奇这是否适合你~
I suspect you've already seen all the caveats and understand you can move jQuery to another namespace:
And that plugins probably won't work AND you must do all this before other scripts are loaded or used.
Good Luck / kinda curious to learn if this works for you~
运行“jQuery.noConflict(true);”时 使用第一个 jQuery 版本的代码可能会损坏。
在某些情况下,代码甚至不属于您。 您编写了一个脚本,该脚本应该添加到页面并使用 jQuery,但您对托管页面一无所知。
托管代码可能会加载其 jQuery 版本,检测到它已加载,开始使用它,然后等待 (setTimeout) ,然后您的代码启动,执行“jQuery.noConflict(true);” ,然后等待它被加载。 当您的代码等待时,控件可能会返回到尝试运行其 jQuery 的托管代码,但发现它不存在。
对于这种情况,我的建议是在另一个新窗口中加载 jQuery,而不是将其从原始窗口中删除。 然后,当它加载时,使用“jQuery.noConflict(true);” 在新窗口上将其复制到原始窗口。 然而,新的 jQuery 对象实际上在新窗口及其文档上运行。 因此,当使用新的 jQuery 时,原始 window.document 必须作为第二个参数传递,如下所示:
按照我的想法实现:
When running "jQuery.noConflict(true);" The code that use the first jQuery version may break.
In some cases this, code doesn't even belong to you. You write a script, which is supposed to be added to pages and which uses jQuery, and you know nothing about the hosting page.
A hosting code may load its jQuery version, detected that it was loaded, start working with it, then wait (setTimeout) ,and then your code starts, do "jQuery.noConflict(true);" , and waits till it is loaded. While your code waits, the control may return to the hosting code which tries to run its jQuery and finds that it doesn't exist.
My suggestion, for this case, is to load the jQuery in a different new window, without removing it from the original one. Then, when it is loaded, use the "jQuery.noConflict(true);" on the new window to copy it to the original window. However the new jQuery object is actually running on the new window and its document. So when using the new jQuery the original window.document must be pass as the second parameter like this:
Following my implementation for this idea:
检查此博客
您可以使用 方法
实现这一点的 。 例如:
Check this blog
You can use the method
to accomplish this. For example: