4

次の設定を想像してみてください: 古いバージョンの jQuery (1.5.2 など) を持つページ (私には制御できない) が、サーバーから Javascript ファイルをロードします。このファイルには、jQuery も必要ですが、より新しいバージョンが必要です。(たとえば、1.8.3) 今、私のスクリプトは次のことを試みます:

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
script.onreadystatechange = function() { // IE
  if (script.readyState === "complete" || script.readyState === "loaded") {
    ready();
  }
};
script.onload = function() { // other browsers
  ready();
};
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);

このready関数は次に$、正しいバージョンの jQuery があるかどうかをチェックし、正しいバージョンがある場合は、その jQuery インスタンスを別の変数にバインドし$、 を介して元の jQuery バージョンに戻りますnewjQuery = window.jQuery.noConflict(true);。

現在、これはすべてうまく機能し、「私の」jQueryバージョンをロードしてから$を「彼らの」jQueryバージョンに復元するまでの間に（外部の）コード実行はありません-少なくともChrome、Firefoxなどでは。このアプローチが失敗するのはInternet Explorerです、何らかの理由で、並行して実行されている可能性のある Javascript コードの少なくとも 1 つの「ティック」を処理します。これは、「私の」jQuery バージョンと互換性のないコードを台無しにする傾向があり、IE がまだ準備完了イベントを実行していない 5 ミリ秒で実行されることがあります。

フィドルの例を次に示します: http://jsfiddle.net/w5pPp/3/

フィドルでは、現在バインドされている jQuery のバージョンを 10 ミリ秒ごとにテストします。$IE9 でのみ、「THIS SHOULD NOT HAPPEN」ログで示されるように、「my」jQuery を参照する短い期間が時々あります。

ここで私の質問は次 のとおりです。noConflict を呼び出す前に「自分の」jQuery を上書きする短時間でページ コードの実行に問題を引き起こすことなく、「自分の」jQuery バージョンを独自の変数にロードするための最良の解決策は何でしょうか?

4

1 に答える 1

1

お使いのバージョンの jQuery をロードするときは、次のことを試してください。

<!-- load your jQuery version -->
<script type="text/javascript" src="http://example.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    var $_mine = $.noConflict(true);
</script>

<!-- initialize their scripts -->
<script type="text/javascript" src="http://example.com/their-jquery.js"></script>
<script type="text/javascript" src="http://example.com/their-script.js"></script>

これにより、古いバージョンを参照する$_mine他のスクリプトと競合することなく、jQuery のバージョンを利用できるようになります。$

上記の解説で述べたように、同じページで複数のバージョンの jQuery を使用できますか? を参照してください。詳細/情報/例については。

編集：

上記のコメントに基づいて、これで問題が解決しないようです。この場合、CDN 間でダウンロード速度が非同期であるという問題が実際に発生していると思われます。あなたのバージョンと jQuery のバージョンの両方を、同じ方法で順番にロードしてみてください。

言い換えると：

function loadScript(variable_name, script_url) {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", script_url);
    script.onload = function() {
        if (variable_name != undefined) {
            window[variable_name] = jQuery.noConflict(true);
            console.log("after attach: " + window[variable_name].fn.jquery);
        }
    };
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
};

loadScript('newjQuery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
loadScript('$', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
//loadScript(undefined, 'http://example.com/some/dependent/script/requiring-1.5.2.js');

このメソッドの動作を示す動作中の jsFiddle は次のとおりです: http://jsfiddle.net/w5pPp/5/

コツは、2 つの項目を順番にロードし、jQuery バージョンが配置された後に依存関係をロードすることです。

于 2013-03-28T18:27:14.980 に答える