4

バックグラウンド：

jQueryセレクター呼び出しの2番目の「context」引数（例：）を指定してjQuery(selector, context)、セレクターエンジンに下降の開始点を与えることができます。

これは、（同じドメイン内の）IFRAMEのコンテンツを制御する必要がある場合に役立つことがよくあります。iframe.contentWindow.document単に「コンテキスト」引数として渡します。

jQueryを使用するIFRAMEにJavaScriptコードがロードされ、外部ウィンドウのスコープから呼び出された場合、そのコードへの参照$またはjQueryそのコード内の参照は、実際にjQueryは外部ウィンドウからのインスタンスになります。

問題は、IFRAME（Bootstrap.jsなど）のJavaScriptコードが次のようなことを$(document)行う場合（または「コンテキスト」引数なしで他のセレクターを行う場合）に発生します。そのコード（iframe内で定義されている）が外部ウィンドウから呼び出されると、外部ウィンドウdocumentからHTMLDocument要素を参照します。これは通常、望ましい結果ではありません。

質問：

作成者が提供するデフォルトの「コンテキスト」引数を持つjQueryの字句スコープのコピー/ラッパーを作成できると非常に便利です。

例：

// jQuery already exists out here
var iframe = document.createElement('IFRAME');
iframe.addEventListener('DOMContentLoaded', function(){

    // code in here can already refer to $ for 'outer' jQuery

    // code in here can refer to $local for 'inner' jQuery by virtue of...
    var $local = jQueryWithContext($, iframe.contentWindow.document);

    // code loaded with IFRAME will use $local by virtue of ...
    iframe.contentWindow.jQuery = iframe.contentWindow.$ = $local;

});
iframe.src = '/path/to/iframe/content.html';

問題は、jQueryWithContext上記のようなものを書くことは可能ですか？

なんで？

サードパーティのHTMLコンポーネントを分離したい場合があります。これらのコンポーネントは（セキュリティの観点からは信頼できますが）CSS/JavaScriptの汚染の観点からは誤動作します。

Bootstrap.jsは良い例です。かなりのビットを呼び出し$(document)、他の同様のコンテキストレスセレクター呼び出しを行います。私が説明した方法でjQueryのスコープを変更できれば、この「最適ではない」作成されたライブラリを非常に簡単に分離できます。

さらに、両方のフレームから同じコレクションを使用すると非常に役立つ場合があります。$.data(el, ...)これは、コンテキスト管理がないと非常に注意が必要です。

4

1 に答える 1

7

実際には、かなり単純です。

function jQueryWithContext( selector, context ) {
  // I added the possibility to overwrite the context here, but you could delete
  return $( selector, context || iframe.contentWindow.document );
}
jQueryWithContext( '#main' ).show();

しかし、それをプラグインに強制するには、おそらく次のようにする必要があります。

jQuery.noConflict(); // keep the real jQuery for now
$ = function( selector, context ){
  return new jQuery.fn.init( selector, context || iframe.contentWindow.document );
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend( $, jQuery ); // copy static method
// Then override default jQuery
jQuery = $;

これはちょっとうまくいきますが、いくつかの使用法を壊す可能性があります$()（おそらく今はそうではありませんが、将来のjQueryバージョンでは可能です。または、contextパラメータの存在が通常の動作を壊すときはいつでも可能です）。

于 2012-12-20T03:29:30.083 に答える