web-dev-qa-db-ja.com

同じページで複数のバージョンのjQueryを使用できますか？

私が取り組んでいるプロジェクトでは、顧客のWebページでjQueryを使用する必要があります。顧客は、私たちが提供するコードの塊を挿入します。これには、ウィジェットを作成するいくつかの<script>要素が<script>作成済み<iframe>内に含まれます。最新バージョンのjQueryをまだ使用していない場合は、これには（おそらく）GoogleがホストするバージョンのjQueryの<script>も含まれます。

問題は、一部の顧客がすでに古いバージョンのjQueryをインストールしている可能性があることです。これは少なくともかなり新しいバージョンであれば機能するかもしれませんが、私たちのコードはjQueryライブラリで最近導入された機能に依存しているため、顧客のjQueryバージョンが古すぎる場合がある場合があります。最新バージョンのjQueryへのアップグレードを要求することはできません。

私たちのコードのコンテキスト内でのみ使用するためにjQueryの新しいバージョンをロードする方法はありますか。それは顧客のページ上のコードを妨げたり影響を与えたりしませんか？理想的には、jQueryの存在をチェックし、バージョンを検出し、それが古すぎる場合は、コードに使用するためだけに最新のバージョンをロードすることができます。

私たちの<iframe>を含む顧客のドメインの<script>にjQueryをロードするというアイデアがありました。追加の<iframe>sのペナルティ.

javascriptjqueryiframe
402
Bungle

はい、それは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();を実行します。

542
ceejayoz

これを見て試してみると、実際には一度に複数の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();
        });
    });
79
Weird Mike

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です。
33
Juan Vidal

ページには、必要に応じてさまざまな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>

デモ| 出典

22
martynas

JQueryの2番目のバージョンをロードして使用してから元のものに復元するか、以前にロードされたjQueryがなかった場合は2番目のバージョンを保持することができます。これが一例です。

<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

私はあなたが常に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)})

デモ

5
gdmanandamohon

もちろん、できます。このリンクには、それを実現する方法の詳細が含まれています。 https://api.jquery.com/jquery.noconflict/ 。

2
Jaime Montoya