同じHTMLページ内の2つの異なるバージョンのJQuery

Question

thickboxのヘッダーにjQueryバージョン1.2.2を参照したHTMLドキュメントがあります。後で、</body>タグの直前にjQuery 1.7.1を参照しています。写真のスライドショー。

問題は、jQuery 1.7.1のリファレンスが削除されてからスライドショーが機能しなくなるまで、thickboxが機能しないことです。

約$の矛盾が見つかりましたが、推奨される解決策はありませんでした。

私が見てきたとみました最も一般的なものは次のとおりです。var $j = jQuery.noConflict();

どのように私はこの問題を解決することができますか？

Answer 1

はプラグインは行儀されている場合、これは動作するはずです：

<script src="jquery-1.2.2.js"></script> 
<script src="thickbox.js"></script> 
<script src="jquery-1.7.1.js"></script> 
<script src="slideshow.js"></script> 

（もちろん、これらのスクリプト名が作られています。） Here's an example（ source）は、（私はjQueryの1.4を使用していました。 2とjQuery 1.7.1はGoogleが1.2.2をホストしていないためです）。

行儀のプラグインと上記の作品行儀のプラグインでは、すべてのグローバル$に依存していないので、むしろ、それはロードされたときのようjQueryグローバルの値を使用しています

// Example plug-in setup 
(function($) { 
    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
})(jQuery); 

又は

(function() { 
    var $ = jQuery; 

    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
})(); 

それらの両方がグローバルをつかむ：これは次のように、プラグインのコードを通してそのローカル参照を使用し、その後、閉鎖中のそれへの参照をつかみます値の時点で、プラグインがロードされた時点でが使用され、その後、ローカル別名が使用されます。準備ハンドラーに渡さjQueryの機能を使用しています

jQuery(function($) { 
    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
}); 

...：

プラグインがreadyイベントを待つしたい場合、それはまた、これを行うことができます。

上記のスクリプトの読み込み順序で、これらの3つのいずれも正しく動作します（thickboxではjQuery 1.2.2、スライドショーではjQuery 1.7.1と表示されます）。

しかし、私の最初の文の "if"はで、大きい場合は ""です。多くのプラグインは、このように弾丸にならないように書かれていません。 2をロードすることを避けるため

---

上記にもかかわらず、私はが機能するためにのjQuery 1.2.2が必要であることをすべてのプラグインから離れて移動するだろう、と可能な限り（そして、それは常に可能ほとんどです） jQueryを含む任意のライブラリの異なるバージョンを同じページに表示します。

Answer 2

jQueryの2つの異なるバージョンの使用はお勧めしません。最新のjQueryで完全に動作するthickboxの代替手段がいくつかあります。

Answer 3

<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script> 
<script type="text/javascript"> 
    var jQ122 = jQuery.noConflict(); 
</script> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
    var jQ171 = jQuery.noConflict(); 


    (function($) { 
    $(function() { 
     // here $ is jQuery 1.2.2 
    }); 
    })(jQ122); 


    (function($) { 
    $(function() { 
     // here $ is jQuery 1.7.1 
    }); 
    })(jQ171); 
</script> 

Answer 4

やりたいこと

あなたがに変更を加える必要があるだろう...非常に悪い習慣（あなたが実際に同じバージョンのすべてのコードを移行する必要があります）ですが、それは理論的に行うことができますそれぞれのプラグインはとにかくカントー... は、このコードを考えてみます。

<script src="jquery-1.4.js"></script> 
var jQuery14 = jQuery; 
<script src="jquery-1.7.js"></script> 
var jQuery17 = jQuery; 

あなたは、このようになりますこれ、jQueryのプラグインに渡された時点で、あなたのプラグインのコードを変更します

(function($){ 
    // all your plugins code would be here 
})(jQuery);  // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables 

これは非常に難しいことではありません。 クリーンコードを書くか、後でお支払いください！ :)

Answer 5

jQuery.noConflict();を使用して、別のバージョンのjQueryを同時に宣言することもできますが、

私はしばしばIE8でいくつかの問題を抱えていました。

代わりに、iframeを使用して現在のページ内のページを読み込む方法もあります。

あるページではjQueryのバージョンを使用し、2番目のページでは別のバージョンのjQueryを使用します。

例えば

：私は最新バージョンにすべてを移行することをお勧め

<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>