複数のバージョンの jQuery を共存させる方法
古いアプリをメンテしてて、元々の jQuery のバージョンが 1.0 だの 1.1 だのだとすごく残念な気持ちになりますね。やっぱり、最新の jQuery でサクサク書きたいものです。
バージョンを上げてしまえればいいんですが、動作確認の手間まで考えると、そこまでやる時間もない。いま、ちょっとこの画面だけ手直し出来ればいいんだけど…という場合は、複数のバージョンの jQuery を共存させてしまいましょう。
jQuery には $ の競合を避けるための jQuery.noConflict という function が用意されていますが、これに引数で true を渡すと、window.jQuery オブジェクトの競合も避けるように動作します。
ですので以下のように書けば、複数のバージョンの jQuery が共存出来ます。
現実的にやる事はないと思いますが、onload を追加する事で、3つでも 4 つでも共存可能という事です。
<script>
$(function() {
var func = function() {
// 実際に動作させたい部分
var $16 = jQuery.noConflict(true);
alert($.fn.jquery); // old version
alert($16.fn.jquery); // ver 1.6
}
// 使いたいバージョンの jQuery を用意し、load イベントを設定
var s = $('<script>').attr('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js').load(func).get(0);
// IE の場合は script の onload が発生しないので onreadystatechange で検知
s.onreadystatechange = function() {
if (this.readyState == 'loaded' || this.readyState == 'complete') {
func();
}
}
// jQuery.append だと load イベントが発生しない(？)ようなので、生 DOM で head に script を追加
$('head').get(0).appendChild(s);
});
</script>
