Có thể tải nhiều phiên bản jQuery khác nhau trên cùng một trang không?

Question

Tôi đang tạo một bookmarklet sẽ tải jQuery nếu đối tượng không được tìm thấy. Việc tải sẽ kiểm tra phiên bản của jQuery. Mã này cũng giống như:

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

})(); 

tôi sử dụng xây dựng bookmarklet này để tạo ra các bookmarklet http://subsimple.com/bookmarklets/jsbuilder.htm

Rõ ràng nếu trang đã có jQuery nạp. Việc tải tập lệnh 1.3.2 sẽ ghi đè đối tượng window.jQuery trên trang. Tôi chỉ tự hỏi là có anyway để cho 1.3.2 để tải đến một biến tự đặt tên? Sử dụng jQuery.noConflict(true);?

Answer 1

tôi nghi ngờ bạn đã nhìn thấy tất cả những hãy cẩn thận và tìm hiểu bạn có thể di chuyển jQuery để namespace khác:

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

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

Và đó plugins có thể sẽ không làm việc và bạn phải làm tất cả những điều này trước khi kịch bản khác được nạp hoặc được sử dụng.

Chúc may mắn/kinda tò mò muốn tìm hiểu xem điều này có phù hợp với bạn không ~

Answer 2

Có. Tôi đã cho nó hoạt động bằng mã này:

(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 3

Kiểm tra this blog

Bạn có thể sử dụng phương pháp

$.noConflict(true); 

để thực hiện điều này. Ví dụ:

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

Answer 4

Khi chạy "jQuery.noConflict (true);" Mã sử ​​dụng phiên bản jQuery đầu tiên có thể bị hỏng.
Trong một số trường hợp, mã này thậm chí không thuộc về bạn. Bạn viết một kịch bản, được cho là được thêm vào các trang và sử dụng jQuery, và bạn không biết gì về trang lưu trữ.
Một mã lưu trữ có thể tải phiên bản jQuery của nó, phát hiện rằng nó đã được tải, bắt đầu làm việc với nó, sau đó chờ (setTimeout), và sau đó mã của bạn bắt đầu, làm "jQuery.noConflict (true);" và đợi cho đến khi nó được nạp. Trong khi mã của bạn chờ đợi, điều khiển có thể trở lại mã lưu trữ cố gắng chạy jQuery của nó và thấy rằng nó không tồn tại.

Đề xuất của tôi, trong trường hợp này, là tải jQuery trong một cửa sổ mới khác, mà không xóa nó khỏi cửa sổ ban đầu. Sau đó, khi nó được tải, sử dụng "jQuery.noConflict (true);" trên cửa sổ mới để sao chép nó vào cửa sổ gốc. Tuy nhiên đối tượng jQuery mới thực sự đang chạy trên cửa sổ mới và tài liệu của nó. Vì vậy, khi sử dụng jQuery mới window.document gốc phải vượt qua như tham số thứ hai như thế này:

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

Tiếp theo thực hiện của tôi cho ý tưởng này:

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