是否可以在同一页面上加载多个不同版本的 jQuery?

发布于 2024-07-14 17:41:36 字数 1326 浏览 5 评论 0原文

我正在制作一个书签,如果未找到该对象,它将加载 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

时光匆匆的小流年 2024-07-21 17:41:36

是的。 我通过这段代码让它工作:

    (function(){

    var myBkl = {
         jq: null,
         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') { 
                myBkl.jq = window.jQuery.noConflict(true);
                callback(myBkl.jq); 
            } 
            else {
                setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
            } 
        },
        init: function($){
            console.log($.fn.jquery);
            console.log(window.jQuery.fn.jquery);
        }
    };
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
    myBkl.whenLoaded(myBkl.init);

})();

Yes. I got it work by this code:

    (function(){

    var myBkl = {
         jq: null,
         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') { 
                myBkl.jq = window.jQuery.noConflict(true);
                callback(myBkl.jq); 
            } 
            else {
                setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
            } 
        },
        init: function($){
            console.log($.fn.jquery);
            console.log(window.jQuery.fn.jquery);
        }
    };
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
    myBkl.whenLoaded(myBkl.init);

})();
最美的太阳 2024-07-21 17:41:36

我怀疑您已经看到了所有注意事项并了解您可以将 jQuery 移动到另一个名称空间:

//Completely move jQuery to a new namespace in another object.

var dom = {};
dom.query = jQuery.noConflict(true);

并且该插件可能无法工作并且您必须在加载或使用其他脚本之前完成所有这些操作。

祝你好运/有点好奇这是否适合你~

I suspect you've already seen all the caveats and understand you can move jQuery to another namespace:

//Completely move jQuery to a new namespace in another object.

var dom = {};
dom.query = jQuery.noConflict(true);

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~

荒路情人 2024-07-21 17:41:36

运行“jQuery.noConflict(true);”时 使用第一个 jQuery 版本的代码可能会损坏。
在某些情况下,代码甚至不属于您。 您编写了一个脚本,该脚本应该添加到页面并使用 jQuery,但您对托管页面一无所知。
托管代码可能会加载其 jQuery 版本,检测到它已加载,开始使用它,然后等待 (setTimeout) ,然后您的代码启动,执行“jQuery.noConflict(true);” ,然后等待它被加载。 当您的代码等待时,控件可能会返回到尝试运行其 jQuery 的托管代码,但发现它不存在。

对于这种情况,我的建议是在另一个新窗口中加载 jQuery,而不是将其从原始窗口中删除。 然后,当它加载时,使用“jQuery.noConflict(true);” 在新窗口上将其复制到原始窗口。 然而,新的 jQuery 对象实际上在新窗口及其文档上运行。 因此,当使用新的 jQuery 时,原始 window.document 必须作为第二个参数传递,如下所示:

newJq("#elementInOriginalDocument", window.document).html("some text");

按照我的想法实现:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    </head>
    <body>
        Test jQuery
        <br />
        <span id="hostScope">hostScope</span>
        <br />
        <span id="guestScope">guestScope</span>

        <script>
            (function(hostWin){
                    var myBkl = {
                            win: null,
                            doc: null,
                            jq: null,
                            loadScript: function(src) {
                                if (this.doc == null){
                                    var nAgt = navigator.userAgent;
                                    if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
                                        var iframe = document.createElement('iframe');
                                        iframe.id = "if1";
                                        iframe.src= window.location.href;
                                        document.getElementsByTagName('head')[0].appendChild(iframe);
                                        this.whenIEIFrameLoaded(src, 0);
                                    } else {
                                        var iframe = document.createElement('iframe');
                                        iframe.id = "if1";
                                        document.getElementsByTagName('head')[0].appendChild(iframe);
                                        setTimeout((function() {myBkl.whenIframeLoaded(src); }), 1);
                                    }
                                }
                            },
                            whenIframeLoaded: function(src){
                                var oIframe = document.getElementById('if1');
                                var newdocument = (oIframe.contentWindow || oIframe.contentDocument);
                                if (newdocument.document) {
                                    newdocument = newdocument.document;
                                }
                                var newwin = oIframe.contentWindow;

                                if (newwin.document.documentElement.innerHTML){
                                    newwin.document.documentElement.innerHTML = '<!DOCTYPE html><html><head></head><body>N</body></html>';
                                }
                                this.doc = newwin.document;
                                this.win = newwin;

                                var script = this.doc.createElement('script');
                                script.setAttribute('src', src);
                                script.setAttribute('type', 'text/javascript');

                                this.doc.getElementsByTagName('head')[0].appendChild(script); 
                                this.whenLoaded(this.callback, 0);
                            },
                            whenIEIFrameLoaded: function(src, times){
                                var oIframe = document.getElementById('if1');

                                if (oIframe && oIframe.contentWindow && oIframe.contentWindow.document && oIframe.contentWindow.document.body){
                                    var newdocument = (oIframe.contentWindow || oIframe.contentDocument);
                                    if (newdocument.document) {
                                        newdocument = newdocument.document;
                                    }

                                    var script = newdocument.createElement('script');
                                    script.setAttribute('src', src);
                                    script.setAttribute('type', 'text/javascript');

                                    newdocument.getElementsByTagName('head')[0].appendChild(script); 

                                    this.doc = newdocument;
                                    this.win = oIframe.contentWindow;
                                    this.whenLoaded(myBkl.callback, 0);
                                } else {
                                    if (times < 5000){
                                        times++;
                                        setTimeout((function() {myBkl.whenIEIFrameLoaded(src, times); }), 2);
                                    }
                                } 
                            },
                            whenLoaded: function(callback, times){
                                    if (this.win && this.win.jQuery && typeof(this.win.jQuery) !== 'undefined' && this.win.jQuery.fn.jquery == '1.3.2') { 
                                        myBkl.jq = this.win.jQuery.noConflict(true);
                                        callback(myBkl.jq);
                                    } 
                                    else {
                                        if (times < 5000){
                                            times++;
                                            setTimeout((function() {myBkl.whenLoaded(callback, times); }), 5);
                                        }
                                    } 
                            },
                            callback: function(loadedJq){
                                    hostWin.myJq = loadedJq;
                                    //console.log("callback: The loaded jQuery ver is " + loadedJq.fn.jquery);
                                    whenLoadedOut();
                            }
                    };
                    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
            })(window);

            function whenLoadedOut(){
                if (window.jQuery) { 
                    //console.log("Host jQuery ver (window.jQuery.fn.jquery) is " + jQuery.fn.jquery);
                    //console.log("guest jQuery ver (window.lpJq)  is " + myJq.fn.jquery);
                    $("#hostScope").html("The jQuery ver of host is " + jQuery.fn.jquery);
                    myJq("#guestScope", document).html("The jQuery ver of guest is " + myJq.fn.jquery);
                } 
                else {
                    setTimeout((function() {whenLoadedOut(); }), 2);
                } 
            }
        </script>
    </body>
</html>

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:

newJq("#elementInOriginalDocument", window.document).html("some text");

Following my implementation for this idea:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    </head>
    <body>
        Test jQuery
        <br />
        <span id="hostScope">hostScope</span>
        <br />
        <span id="guestScope">guestScope</span>

        <script>
            (function(hostWin){
                    var myBkl = {
                            win: null,
                            doc: null,
                            jq: null,
                            loadScript: function(src) {
                                if (this.doc == null){
                                    var nAgt = navigator.userAgent;
                                    if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
                                        var iframe = document.createElement('iframe');
                                        iframe.id = "if1";
                                        iframe.src= window.location.href;
                                        document.getElementsByTagName('head')[0].appendChild(iframe);
                                        this.whenIEIFrameLoaded(src, 0);
                                    } else {
                                        var iframe = document.createElement('iframe');
                                        iframe.id = "if1";
                                        document.getElementsByTagName('head')[0].appendChild(iframe);
                                        setTimeout((function() {myBkl.whenIframeLoaded(src); }), 1);
                                    }
                                }
                            },
                            whenIframeLoaded: function(src){
                                var oIframe = document.getElementById('if1');
                                var newdocument = (oIframe.contentWindow || oIframe.contentDocument);
                                if (newdocument.document) {
                                    newdocument = newdocument.document;
                                }
                                var newwin = oIframe.contentWindow;

                                if (newwin.document.documentElement.innerHTML){
                                    newwin.document.documentElement.innerHTML = '<!DOCTYPE html><html><head></head><body>N</body></html>';
                                }
                                this.doc = newwin.document;
                                this.win = newwin;

                                var script = this.doc.createElement('script');
                                script.setAttribute('src', src);
                                script.setAttribute('type', 'text/javascript');

                                this.doc.getElementsByTagName('head')[0].appendChild(script); 
                                this.whenLoaded(this.callback, 0);
                            },
                            whenIEIFrameLoaded: function(src, times){
                                var oIframe = document.getElementById('if1');

                                if (oIframe && oIframe.contentWindow && oIframe.contentWindow.document && oIframe.contentWindow.document.body){
                                    var newdocument = (oIframe.contentWindow || oIframe.contentDocument);
                                    if (newdocument.document) {
                                        newdocument = newdocument.document;
                                    }

                                    var script = newdocument.createElement('script');
                                    script.setAttribute('src', src);
                                    script.setAttribute('type', 'text/javascript');

                                    newdocument.getElementsByTagName('head')[0].appendChild(script); 

                                    this.doc = newdocument;
                                    this.win = oIframe.contentWindow;
                                    this.whenLoaded(myBkl.callback, 0);
                                } else {
                                    if (times < 5000){
                                        times++;
                                        setTimeout((function() {myBkl.whenIEIFrameLoaded(src, times); }), 2);
                                    }
                                } 
                            },
                            whenLoaded: function(callback, times){
                                    if (this.win && this.win.jQuery && typeof(this.win.jQuery) !== 'undefined' && this.win.jQuery.fn.jquery == '1.3.2') { 
                                        myBkl.jq = this.win.jQuery.noConflict(true);
                                        callback(myBkl.jq);
                                    } 
                                    else {
                                        if (times < 5000){
                                            times++;
                                            setTimeout((function() {myBkl.whenLoaded(callback, times); }), 5);
                                        }
                                    } 
                            },
                            callback: function(loadedJq){
                                    hostWin.myJq = loadedJq;
                                    //console.log("callback: The loaded jQuery ver is " + loadedJq.fn.jquery);
                                    whenLoadedOut();
                            }
                    };
                    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
            })(window);

            function whenLoadedOut(){
                if (window.jQuery) { 
                    //console.log("Host jQuery ver (window.jQuery.fn.jquery) is " + jQuery.fn.jquery);
                    //console.log("guest jQuery ver (window.lpJq)  is " + myJq.fn.jquery);
                    $("#hostScope").html("The jQuery ver of host is " + jQuery.fn.jquery);
                    myJq("#guestScope", document).html("The jQuery ver of guest is " + myJq.fn.jquery);
                } 
                else {
                    setTimeout((function() {whenLoadedOut(); }), 2);
                } 
            }
        </script>
    </body>
</html>
会发光的星星闪亮亮i 2024-07-21 17:41:36

检查此博客

您可以使用 方法

$.noConflict(true);

实现这一点的 。 例如:

<script src="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //create this naming for Jquery 1.3.2 version
    var jQuery_1_3_2 = $.noConflict(true);
</script>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

Check this blog

You can use the method

$.noConflict(true);

to accomplish this. For example:

<script src="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //create this naming for Jquery 1.3.2 version
    var jQuery_1_3_2 = $.noConflict(true);
</script>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文