2009-03-05 24 views
5

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

回答

3

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

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

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

这插件可能不会工作,你必须做这一切之前,其他脚本加载或使用。

好运/有点好奇学习,如果这对你有用〜

7

是的。我把它通过此代码的工作:

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

})(); 
+0

verra凉爽。 tnx分享 – 2009-03-05 07:13:34

0

检查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> 
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> 
相关问题