我可以提供默认的“上下文”吗?到jQuery? [英] Can I provide default "context" to jQuery?

查看:95
本文介绍了我可以提供默认的“上下文”吗?到jQuery?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

背景:

jQuery选择器调用的第二个context参数(例如: jQuery(selector) ,context))可以提供选择器引擎作为下降的起点。

The second "context" argument to the jQuery selector call (e.g: jQuery(selector, context)) can be provided to give the selector engine a starting point from which to descend.

如果你需要,这通常很有用控制IFRAME中的内容(在同一域中)。您只需将 iframe.contentWindow.document 作为context参数传递。

This is often useful if you need to control content in an IFRAME (in the same domain). You simply pass iframe.contentWindow.document as the "context" argument.

如果加载了任何JavaScript代码使用jQuery的IFRAME,从外部窗口的范围内调用,然后对 $ jQuery 在该代码中实际上是外部窗口中 jQuery 的实例。

If any JavaScript code is loaded in the IFRAME which makes use of jQuery, and is CALLED FROM THE SCOPE OF THE OUTER WINDOW, then any reference to $ or jQuery in that code will actually be the instance of jQuery from the outer window.

当IFRAME中的JavaScript代码(比如Bootstrap.js)执行类似 $(document)之类的操作时(或者没有context参数的其他选择器) )。当从外部窗口调用该代码(在iframe中定义)时, document 引用外部窗口中的HTMLDocument元素 - 这通常不是期望的结果。

The problem comes when that JavaScript code in the IFRAME (say Bootstrap.js) does something like $(document) (or does some other selector without a "context" argument). When that code (defined inside the iframe) is called from the outer window, document refers to the HTMLDocument element from the outer window - which is usually not the desired outcome.

问题:

能够创建一个词汇表 - 这将是非常有用的 - jQuery的scoped copy / wrapper,它有一个默认的context参数,由任何人创建它。

It would be super useful to be able to create a lexically-scoped copy/wrapper of jQuery that has a default "context" argument, provided by whomever creates it.

示例:

// 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 以上?

The question is, is it possible to write something like jQueryWithContext above?

为什么?

有时你想要孤立从CSS / JavaScript污染的角度来看,第三方HTML组件(虽然从安全角度来看它们是相信的)是错误的。

Sometimes you want to isolate 3rd party HTML components which (while you trust them from a security perspective) are misbehaved from a CSS / JavaScript pollution perspective.

Bootstrap.js就是一个很好的例子。它调用 $(document)一个合理的位,并执行其他类似的无上下文选择器调用。如果jQuery可以按照我描述的方式重新定义,那么这个非最佳编写的库可以很容易地被隔离。

Bootstrap.js is a good example. It calls $(document) a fair bit, and does other similar context-less selector calls. If jQuery could be re-scoped in the way I describe, then this 'not optimally' written libraries could be isolated quite easily.

此外,它可能非常有用从两个框架中使用相同的 $。data(el,...)集合,如果没有一些上下文管理,这非常棘手。

Additionally, it can be very helpful to use the same $.data(el, ...) collection from both frames, and this is quite tricky without some context management.

推荐答案

实际上,它会很简单:

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();

但要强制插件,你可能需要这样:

But to force it to plugins, you'd probably need to go like this:

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 = $;

这种工作,但可能会破坏 $()<的使用/ code>(也许不是现在,但在将来的jQuery版本中,或者只要存在 context 参数就会破坏正常行为)。

This kinda work, but it could break some usage of $() (Maybe not now, but it's possible in future jQuery version, or anytime the presence of a context parameter break the normal behavior).

这篇关于我可以提供默认的“上下文”吗?到jQuery?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆