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

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

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

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.

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

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>

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

Absolut ja, das kannst du. Dieser Link enthält Details dazu, wie Sie dies erreichen können: https://api.jquery.com/jquery.noconflict/ .