Question

我正在创建一个bookmarklet，如果找不到该对象，它将加载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);

})();

我使用此bookmarklet构建器来创建书签http://subsimple.com/bookmarklets/jsbuilder.htm

显然，如果页面已经加载了jQuery。加载1.3.2脚本将覆盖页面上的window.jQuery对象。我只是想知道有没有让1.3.2加载到另一个自命名变量？使用jQuery.noConflict(true);？

Answer 1

是。我通过这段代码得到了它的工作：

    (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);

})();

Answer 2

我怀疑你已经看到了所有警告，并且明白你可以将jQuery移动到另一个命名空间：

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

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

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

祝你好运/有点好奇，想知道这对你有用吗</ p>

Answer 3

运行“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>

Answer 4

检查this blog

您可以使用方法

$.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>

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

4 个答案: