javascript - Kan jag använda flera versioner av jQuery på samma sida?

Ett projekt jag arbetar med kräver användning av jQuery på kunders webbsidor. Kunderna kommer att infoga en kodbit som vi tillhandahåller, vilket inkluderar några <script>-element som bygger en widget i ett <iframe> skapat av <script>. Om de inte redan använder den senaste versionen av jQuery, kommer detta också troligen att inkludera ett <script> för Googles hostade version av jQuery.

Problemet är att vissa kunder kanske redan har en äldre version av jQuery installerad. Även om detta kan fungera om det är åtminstone en ganska ny version, beror vår kod på viss nyligen introducerad funktionalitet i jQuery-biblioteket, så det kommer säkerligen finnas tillfällen då en kunds jQuery-version helt enkelt är för gammal. Vi kan inte kräva att de uppgraderar till den senaste versionen av jQuery.

Finns det något sätt att ladda en nyare version av jQuery att använda endast inom ramen för vår kod, som inte kommer att störa eller påverka någon kod på kundens sida? Helst kanske vi kan kontrollera om jQuery finns, upptäcka versionen, och om den är för gammal, då på något sätt ladda den senaste versionen bara för att använda i vår kod.

Jag hade idén att ladda jQuery i ett <iframe> på kundens domän som också inkluderar vårt <script>, vilket verkar som om det kan vara genomförbart, men jag hoppas att det finns ett mer elegant sätt att göra det (för att inte tala om utan prestanda- och komplexitetspåfrestningarna från extra <iframe>).

Svar #1

Ja, det är möjligt tack vare jQuerys noconflict-läge. 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>

Sedan, istället för $ ('#selector').function();, skulle du göra jQuery_1_3_2('#selector').function(); eller jQuery_1_1_3('#selector').function();.

Svar #2

Efter att ha tittat på detta och provat det upptäckte jag att det faktiskt inte tillät mer än en instans av jQuery att köras åt gången. Efter att ha sökt runt hittade jag att detta gjorde precis tricket och var betydligt mindre kod.

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

Så att lägga till "j" efter "$" var allt jag behövde göra.

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

Svar #3

Taget från http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:

  • Originalsida laddar hans "jquery.versionX.js" -- $ och jQuery tillhör versionX.
  • Du kallar din "jquery.versionY.js" -- nu tillhör $ och jQuery versionY, plus _$ och _jQuery tillhör versionX.
  • my_jQuery=jQuery.noConflict(true); -- nu tillhör $ och jQuery versionX, _$ och _jQuery är förmodligen null, och my_jQuery är versionY.

Svar #4

Det är möjligt att ladda den andra versionen av jQuery, använda den och sedan återställa till den ursprungliga eller behålla den andra versionen om ingen jQuery hade laddats tidigare. Här är ett exempel:

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

Svar #5

Du kan ha så många olika jQuery-versioner på din sida som du vill.

Använd 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 | Källa

Relaterade artiklar