it-swarm.com.de

Kann ich mehrere jQuery-Versionen auf derselben Seite verwenden?

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

Das Problem ist, dass einige Kunden möglicherweise bereits eine ältere Version von jQuery installiert haben. Dies kann zwar funktionieren, wenn es sich um eine relativ aktuelle Version handelt, unser Code stützt sich jedoch auf einige kürzlich eingeführte Funktionen in der jQuery-Bibliothek. Daher kann es vorkommen, dass die jQuery-Version eines Kunden einfach zu alt ist. Ein Upgrade auf die neueste Version von jQuery ist nicht erforderlich.

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önnen wir möglicherweise prüfen, ob jQuery vorhanden ist, die Version ermitteln und, wenn sie zu alt ist, die neueste Version laden, um sie für unseren Code zu verwenden.

Ich hatte die Idee, jQuery in einen <iframe> In der Kundendomain zu laden, der auch unseren <script> Enthält, was als machbar erscheint, aber ich hoffe, dass es eine elegantere Möglichkeit gibt es (ganz zu schweigen von den Leistungs- und Komplexitätsnachteilen zusätzlicher <iframe> s).

407
Bungle

Ja, dies ist möglich, da jQuery keinen Konflikt verursacht. 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>

Anstelle von $('#selector').function(); würden Sie dann jQuery_1_3_2('#selector').function(); oder jQuery_1_1_3('#selector').function(); ausführen.

550
ceejayoz

Nachdem ich mir das angeschaut und es 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 nur der Trick war und viel weniger Code.

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

Also war das Hinzufügen des "j" nach dem "$" alles, was ich tun musste.

$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();
        });
    });
82
Weird Mike

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

  • Die Originalseite lädt seine "jquery.versionX.js" - $ Und jQuery gehören zu versionX.
  • Sie nennen Ihre "jquery.versionY.js" - jetzt gehören $ Und jQuery zu versionY, plus _$ Und _jQuery Gehören zu versionX.
  • my_jQuery = jQuery.noConflict(true); - jetzt gehören $ und jQuery zur Version X, _$ und _jQuery sind wahrscheinlich null und my_jQuery ist versionY.
34
Juan Vidal

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

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

22
martynas

Es ist möglich, die zweite Version der jQuery zu laden, diese 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>
22
Tomas Kirda

Ich möchte sagen, dass Sie immer die neueste oder neueste stabile Version von jQuery verwenden müssen. Wenn Sie jedoch mit anderen Versionen arbeiten müssen, können Sie diese Version hinzufügen und den $ 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, verwenden Sie einfach $oldjQuery Anstelle von $.

Hier ist ein Beispiel

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

Demo

5
gdmanandamohon

Ja, das kannst du. Dieser Link enthält Details darüber, wie Sie dies erreichen können: https://api.jquery.com/jquery.noconflict/ .

2
Jaime Montoya