Kann ich mehrere Versionen von jQuery auf derselben Seite verwenden?

426

Für ein Projekt, an dem ich arbeite, muss jQuery auf den Webseiten der Kunden verwendet werden. Kunden fügen einen von uns bereitgestellten Codeabschnitt ein, der einige <script>Elemente enthält, die ein Widget in einem erstellten <script>Code erstellen <iframe>. Wenn sie nicht bereits die neueste Version von jQuery verwenden, umfasst dies (höchstwahrscheinlich) auch eine <script>für Googles gehostete Version von jQuery.

Das Problem ist, dass auf einigen Kunden möglicherweise bereits eine ältere Version von jQuery installiert ist. Während dies möglicherweise funktioniert, wenn es sich zumindest um eine relativ neue Version handelt, stützt sich unser Code auf einige kürzlich eingeführte Funktionen in der jQuery-Bibliothek, sodass es zwangsläufig Fälle gibt, in denen die jQuery-Version eines Kunden einfach zu alt ist. Wir können nicht verlangen, dass sie auf die neueste Version von jQuery aktualisieren.

Gibt es eine Möglichkeit, eine neuere Version von jQuery zu laden, die nur im Kontext unseres Codes verwendet wird und keinen Code auf der Kundenseite beeinträchtigt oder beeinflusst? Im Idealfall könnten wir das Vorhandensein von jQuery überprüfen, die Version erkennen und, wenn sie zu alt ist, die neueste Version laden, um sie für unseren Code zu verwenden.

Ich hatte die Idee, jQuery in eine <iframe>Domäne des Kunden zu laden , die auch unsere enthält <script>, was möglicherweise machbar erscheint, aber ich hoffe, dass es einen eleganteren Weg gibt, dies zu tun (ganz zu schweigen von den Leistungs- und Komplexitätseinbußen von extra <iframe>s).

Verpfuschen
quelle
1
Ich bin auf das gleiche Problem gestoßen. Da ich jQuery in meinem eingebetteten Skript nur einige Male verwendet habe, habe ich beschlossen, ganz auf jQuery zu verzichten und einfach das, was ich brauchte, direkt in JavaScript zu tun. Diese Seite: youmightnotneedjquery.com war äußerst nützlich.
Ferruccio

Antworten:

578

Ja, dies ist aufgrund des Nichtkonfliktmodus von jQuery möglich. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Dann würden Sie stattdessen $('#selector').function();tun jQuery_1_3_2('#selector').function();oder jQuery_1_1_3('#selector').function();.

ceejayoz
quelle
13
Vielen Dank, ceejayoz! Das scheint eine praktikable Lösung zu sein - das einzige potenzielle Problem ist, dass ich keine Kontrolle über den ersten Teil Ihrer Codelösung habe (Zuweisen der älteren Version von jQuery zu einem anderen Alias). Wie der Kunde jQuery verwendet, ist unterschiedlich und liegt außerhalb meiner Kontrolle. Kann ich sicher nur die zweite Hälfte verwenden oder müssen beide Bibliotheken noConflict () aufrufen?
Bungle
7
Ja, Sie sollten nur die zweite Hälfte verwenden können.
Ceejayoz
9
Ist das wirklich transparent für die Originalseite? Wenn sie nach diesem Code $ oder jQuery verwenden, bezieht sich dies auf ihre eigene jQuery-Version oder die neuere (auf der möglicherweise weniger Plugins installiert sind)?
Wim
2
@ceejayoz, was passiert, wenn Sie eine selbstaufrufende Funktion haben, die viel $ enthält. Wir müssten jedes einzelne $ in jquery_1_3_2 innerhalb dieses Nichtkonfliktabschnitts ändern ???
Klewis
37
@blachawk Nein, nur alias es. (function($) { /*your code here*/ }(jquery_x_x_x));
Fabrício Matté
85

Nachdem ich mir das angeschaut und ausprobiert hatte, stellte ich fest, dass nicht mehr als eine Instanz von jquery gleichzeitig ausgeführt werden konnte. Nachdem ich mich umgesehen hatte, stellte ich fest, dass dies genau das Richtige war und viel weniger Code war.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>var $j = jQuery.noConflict(true);</script>
    <script>
      $(document).ready(function(){
       console.log($().jquery); // This prints v1.4.2
       console.log($j().jquery); // This prints v1.9.1
      });
   </script>

Dann musste ich nur noch das "j" nach dem "$" hinzufügen.

$j(function () {
        $j('.button-pro').on('click', function () {
            var el = $('#cnt' + this.id.replace('btn', ''));
            $j('#contentnew > div').not(el).animate({
                height: "toggle",
                opacity: "toggle"
            }, 100).hide();
            el.toggle();
        });
    });
Seltsamer Mike
quelle
6
Um zu vermeiden, dass jquery variable an so vielen Stellen umbenannt wird, können Sie Ihren alten Code einfach wie folgt einschließen:(function($){ })($j)
Marinos An
36

Entnommen von http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :

  • Die Originalseite lädt seine "jquery.versionX.js" - $ und jQuerygehört zu versionX.
  • Sie nennen Ihre "jquery.versionY.js" - jetzt $und jQuerygehören zu versionY, plus _$und_jQuery gehören zu versionX.
  • my_jQuery = jQuery.noConflict(true);- jetzt $und jQuerygehören zu versionX _$und _jQuerysind wahrscheinlich null und my_jQuerysind versionY.
Juan Vidal
quelle
9
Ich habe es nicht verstanden, bis ich zum Link ging. "Wenn Sie Ihre jQuery.xxjs laden, werden die vorhandenen $ - und jQuery-Variablen überschrieben ... ABER es wird eine Sicherungskopie davon (in _ $ und _jQuery) gespeichert. Wenn Sie noConflict (true) aufrufen, stellen Sie die Situation wie zuvor wieder her Ihre js Aufnahme "
Colin
Bitte erläutern Sie in Zukunft expliziter externe Quellen. Weitere Informationen finden Sie unter stackoverflow.com/help/referencing
Matt
23

Sie können so viele verschiedene jQuery-Versionen auf Ihrer Seite haben, wie Sie möchten.

Verwendung jQuery.noConflict():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
    var $i = jQuery.noConflict();
    alert($i.fn.jquery);
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    alert($j.fn.jquery);
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var $k = jQuery.noConflict();
    alert($k.fn.jquery);
</script> 

DEMO | Quelle

Martynas
quelle
23

Es ist möglich, die zweite Version von jQuery zu laden, sie zu verwenden und dann das Original wiederherzustellen oder die zweite Version beizubehalten, wenn zuvor keine jQuery geladen wurde. Hier ist ein Beispiel:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    var jQueryTemp = jQuery.noConflict(true);
    var jQueryOriginal = jQuery || jQueryTemp;
    if (window.jQuery){
        console.log('Original jQuery: ', jQuery.fn.jquery);
        console.log('Second jQuery: ', jQueryTemp.fn.jquery);
    }
    window.jQuery = window.$ = jQueryTemp;
</script>
<script type="text/javascript">
    console.log('Script using second: ', jQuery.fn.jquery);
</script>
<script type="text/javascript">
    // Restore original jQuery:
    window.jQuery = window.$ = jQueryOriginal;
    console.log('Script using original or the only version: ', jQuery.fn.jquery);
</script>
Tomas Kirda
quelle
5

Ich möchte sagen, dass Sie immer die neuesten oder neuesten stabilen Versionen von jQuery verwenden müssen. Wenn Sie jedoch mit anderen Versionen arbeiten müssen, können Sie diese Version hinzufügen und die $in einen anderen Namen umbenennen . Zum Beispiel

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>var $oldjQuery = $.noConflict(true);</script>

Schauen Sie hier, wenn Sie etwas mit schreiben, erhalten $Sie die neueste Version. Aber wenn Sie etwas mit alt machen müssen, dann verwenden Sie einfach $oldjQuerystatt $.

Hier ist ein Beispiel

$(function(){console.log($.fn.jquery)});
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)})

Demo

gdmanandamohon
quelle