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

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

コードのコンテキスト内でのみ使用するためにjQueryの新しいバージョンをロードし、顧客のページのコードに干渉または影響を与えない方法はありますか？理想的には、jQueryの存在を確認し、バージョンを検出し、古すぎる場合は、コードに使用するためだけに最新バージョンを何らかの方法でロードすることが理想的です。

私はを<iframe>含む顧客のドメインにjQueryをロードするという考えを持っていましたが、<script>それは実現可能かもしれませんが、よりエレガントな方法があることを望んでいます（パフォーマンスと複雑さのペナルティがないことは言うまでもありません）余分な<iframe>s）。

はい、jQueryのnoconflictモードにより実行可能です。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();ます。

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

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

• オリジナルページが読み込ま彼の「jquery.versionX.js」 - $とjQueryversionXに属します。
• 今-あなたはあなたの「jquery.versionY.js」と呼ぶ$とjQueryversionYに属し、プラス_$と_jQueryversionXに属します。
• my_jQuery = jQuery.noConflict(true);-現在$、jQueryバージョンXに属して_$おり_jQuery、おそらくnullであり、my_jQueryバージョンYです。

ページには、好きなだけ多くの異なる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> 

デモ | ソース

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>

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>

$あなたが何かを使って書いたら、ここを見てください、そうすればあなたは最新バージョンを手に入れるでしょう。しかし、古いもので何かをする必要がある場合は、の$oldjQuery代わりに使用してください$。

ここに例があります

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

デモ

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