Ist es möglich, mehrere verschiedene Versionen von jQuery auf derselben Seite zu laden?

Question

Ich mache ein Bookmarklet, das jQuery lädt, wenn das Objekt nicht gefunden wird. Das Laden überprüft die Version von jQuery. Der Code ist wie:

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

})(); 

ich dieses Bookmarklet Builder verwenden das Bookmarklet http://subsimple.com/bookmarklets/jsbuilder.htm

Offensichtlich zu erstellen, wenn die Seite bereits hat jQuery geladen. Das Laden des 1.3.2-Skripts würde das window.jQuery-Objekt auf der Seite überschreiben. Ich frage mich nur ob es da überhaupt 1.3.2 auf eine andere selbst benannte Variable laden soll? Verwenden Sie jQuery.noConflict(true);?

Answer 1

Ich vermute, Sie haben bereits alle Einsprüche gesehen und verstehen Sie jQuery zu einem anderen Namensraum bewegen kann:

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

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

Und das Plugins wird wahrscheinlich nicht funktionieren und Sie müssen alles tun, bevor andere Scripts geladen sind oder benutzt.

Good Luck/irgendwie neugierig zu erfahren, ob dies für Sie arbeitet ~

Answer 2

Ja. Ich habe es von diesem Code arbeiten:

(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

prüfen this blog

Sie die Methode dieses

$.noConflict(true); 

erreichen nutzen können. Zum Beispiel:

<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

Bei der Ausführung von "jQuery.noConflict (true);" Der Code, der die erste jQuery-Version verwendet, kann beschädigt werden.
In einigen Fällen gehört dieser Code nicht einmal zu Ihnen. Sie schreiben ein Skript, das zu Seiten hinzugefügt werden soll und das jQuery verwendet, und Sie wissen nichts über die Hosting-Seite.
Ein Hosting-Code lädt möglicherweise seine jQuery-Version, erkannte, dass es geladen wurde, beginnt damit zu arbeiten, wartet dann (setTimeout), und dann startet Ihr Code, tun Sie "jQuery.noConflict (true);" und wartet, bis es geladen ist. Während Ihr Code wartet, kann das Steuerelement zu dem Hostcode zurückkehren, der versucht, seine jQuery auszuführen und findet, dass es nicht existiert.

Mein Vorschlag in diesem Fall ist, die jQuery in ein anderes neues Fenster zu laden, ohne es von der ursprünglichen zu entfernen. Wenn es dann geladen wird, verwenden Sie die "jQuery.noConflict (true);" auf dem neuen Fenster, um es in das ursprüngliche Fenster zu kopieren. Das neue jQuery-Objekt wird jedoch tatsächlich im neuen Fenster und in seinem Dokument ausgeführt. Also, wenn die neue jQuery die ursprüngliche window.document verwenden muss als zweiten Parameter wie dies passiert sein:

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

Nach meiner Implementierung für diese Idee:

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