我可以在同一頁面上使用多個版本的 jQuery 嗎？

Question

我正在進行的一個項目需要在客戶的網頁上使用 jQuery。 客戶將插入一段我們將提供的代碼，其中包括一些在 <script> 創建的<iframe>中構建小部件的<script> <script> 。 如果他們還沒有使用最新版本的 jQuery，這也將包括（很可能）用於 Google 托管版本的 jQuery 的<script> 。

問題是一些客戶可能已經安裝了舊版本的 jQuery。 雖然如果它至少是一個相當新的版本，這可能會起作用，但我們的代碼確實依賴於 jQuery 庫中最近引入的一些功能，所以當客戶的 jQuery 版本太舊時，肯定會出現這種情況。 我們不能要求他們升級到最新版本的 jQuery。

有沒有辦法加載更新版本的 jQuery 以僅在我們的代碼上下文中使用，而不會干擾或影響客戶頁面上的任何代碼？ 理想情況下，也許我們可以檢查 jQuery 的存在，檢測版本，如果它太舊，然后以某種方式加載最新版本，僅用於我們的代碼。

我有在客戶域中的<iframe>中加載 jQuery 的想法，其中還包括我們的<script> ，這似乎是可行的，但我希望有一種更優雅的方式來做到這一點（更不用說沒有了額外<iframe>的性能和復雜性損失）。

Answer 1

是的，由於 jQuery 的無沖突模式，它是可行的。 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>

然后，而不是$('#selector').function(); ，你會做jQuery_1_3_2('#selector').function(); 或jQuery_1_1_3('#selector').function(); .

Answer 2

在查看並嘗試之后，我發現它實際上一次不允許運行多個 jquery 實例。 在四處搜索后，我發現這只是把戲，而且代碼少了很多。

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

所以然后在“$”之后添加“j”就是我需要做的。

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

Answer 3

取自http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page ：

• 原始頁面加載他的“jquery.versionX.js”—— $和jQuery屬於versionX。
• 你調用你的“jquery.versionY.js”——現在$和jQuery屬於 versionY，加上_$和_jQuery屬於 versionX。
• my_jQuery = jQuery.noConflict(true); -- 現在$和jQuery屬於versionX， _$和_jQuery可能為null， my_jQuery是versionY。

Answer 4

可以加載第二個版本的 jQuery 使用它，然后恢復到原始版本，或者如果之前沒有加載過 jQuery，則保留第二個版本。 這是一個例子：

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

Answer 5

您可以在頁面上擁有任意數量的不同 jQuery 版本。

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

演示| 資源

Answer 6

我想說的是，您必須始終使用 jQuery 最新或最近的穩定版本。 但是，如果您需要對其他版本進行一些工作，則可以添加該版本並將$重命名為其他名稱。 例如

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

看看這里，如果你用$寫東西，那么你會得到最新版本。 但是，如果您需要對 old 做任何事情，那么只需使用$oldjQuery而不是$ 。

這是一個例子：

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

演示

Answer 7

絕對，是的，你可以。 此鏈接包含有關如何實現該目標的詳細信息： https : //api.jquery.com/jquery.noconflict/ 。

Answer 8

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>var $j = $.noConflict(true);</script>

它對我不起作用，然后我將其更改為

<script>var jQuery = $.noConflict(true);</script>

它對我有用。

Answer 9

為了進一步改進 Juan Vidal 的答案，值得注意的是，如果您使用多個 jquery 插件與一個版本（例如 3.3.1）和多個 jquery 插件與另一個版本（例如 1.10.2），舊版本工作（它的插件) 您必須深入研究插件的縮小/未縮小 .js 文件並更改如下所示的行：

Example 1: module.exports=a:a(jQuery) to module.exports=a:a(my_jQuery)
Example 2: b(a,require("jquery")):b(a,a.jQuery)} to this: or b(a,require("jquery")):b(a,a.my_jQuery)}