複数のバージョンの jQuery を共存させる方法2011-10-04

古いアプリをメンテしてて、元々の 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>