5

我正在制作一个书签，如果找不到对象，它将加载 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);?

4

4 回答 4

8

是的。我通过以下代码使其工作：

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

})();
于 2009-03-05T07:09:51.443 回答
3

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

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

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

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

祝你好运/有点想知道这是否适合你~

于 2009-03-05T07:02:33.693 回答
2

运行“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>
于 2012-10-16T07:02:35.253 回答
0

检查这个博客

您可以使用该方法

$.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>
于 2009-12-18T13:59:43.343 回答