Hintergrund:

Das zweite "Kontext" -Argument für den Aufruf des jQuery-Selektors (z. B .:jQuery(selector, context)) kann vorgesehen werden, um dem Wählmotor einen Startpunkt zu geben, von dem aus er absteigen kann.

Dies ist häufig nützlich, wenn Sie Inhalte in einem IFRAME (in derselben Domäne) steuern müssen. Du gehst einfach vorbeiiframe.contentWindow.document als "Kontext" -Argument.

Wenn ein JavaScript-Code in den IFRAME geladen ist, der jQuery verwendet, und istABGELAUFEN VOM UMFANG DES AUSSENFENSTERS, dann einen Verweis auf$ oderjQuery in diesem Code wird tatsächlich die Instanz von seinjQuery vom äußeren Fenster.

Das Problem tritt auf, wenn der JavaScript-Code im IFRAME (z. B. Bootstrap.js) so etwas wie tut$(document) (oder macht einen anderen Selektor ohne "Kontext" -Argument). Wenn dieser Code (im iframe definiert) aus dem äußeren Fenster aufgerufen wird,document verweist auf das HTMLDocument-Element aus dem äußeren Fenster - was normalerweise nicht das gewünschte Ergebnis ist.

Frage:

Es wäre sehr nützlich, eine Kopie / einen Wrapper mit lexikalischem Gültigkeitsbereich von jQuery zu erstellen, die / der ein Standardargument "context" hat, das von demjenigen bereitgestellt wird, der es erstellt.

Beispiel:

// 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';

Die Frage ist, ist es möglich, so etwas zu schreibenjQueryWithContext über?

Warum?

Manchmal möchten Sie HTML-Komponenten von Drittanbietern isolieren, die sich aus Sicht der CSS / JavaScript-Verschmutzung (obwohl Sie ihnen aus Sicherheitssicht vertrauen) schlecht verhalten.

Bootstrap.js ist ein gutes Beispiel. Es ruft$(document) ein gutes Stück, und macht andere ähnliche kontextlose Selektoraufrufe. Wenn jQuery in der von mir beschriebenen Weise neu definiert werden könnte, könnten diese nicht optimal geschriebenen Bibliotheken recht einfach isoliert werden.

Außerdem kann es sehr hilfreich sein, dasselbe zu verwenden$.data(el, ...) Sammlung von beiden Frames, und dies ist ohne eine gewisse Kontextverwaltung ziemlich schwierig.