2009-03-05 30 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> 
相關問題