Tło:

Drugi argument „kontekstowy” wywołania selektora jQuery (np .:jQuery(selector, context)) może być dostarczony, aby dać selektorowi silnik punkt startowy, z którego ma się zejść.

Jest to często przydatne, gdy trzeba kontrolować zawartość w IFRAME (w tej samej domenie). Po prostu mijasziframe.contentWindow.document jako argument „kontekstowy”.

Jeśli jakiś kod JavaScript jest załadowany do IFRAME, który korzysta z jQuery, i jestPOWOŁANY Z ZAKRESU OKNA ZEWNĘTRZNEGO, a następnie wszelkie odniesienia do$ lubjQuery w tym kodzie rzeczywiście będzie instancjąjQuery z okna zewnętrznego.

Problem pojawia się, gdy kod JavaScript w IFRAME (powiedzmy Bootstrap.js) robi coś takiego$(document) (lub wykonuje inny selektor bez argumentu „kontekstowego”). Gdy ten kod (zdefiniowany wewnątrz iframe) jest wywoływany z zewnętrznego okna,document odnosi się do elementu HTMLDocument z zewnętrznego okna - co zazwyczaj nie jest pożądanym wynikiem.

Pytanie:

Byłoby bardzo przydatne, aby móc utworzyć kopię / wrapper o leksykalnym zasięgu jQuery, który ma domyślny argument „kontekstowy”, dostarczany przez każdego, kto go tworzy.

Przykład:

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

Pytanie brzmi, czy można napisać coś takiegojQueryWithContext powyżej?

Czemu?

Czasami chcesz wyizolować komponenty HTML innych firm, które (choć ufasz im z perspektywy bezpieczeństwa) są niewłaściwie zachowywane z perspektywy zanieczyszczenia CSS / JavaScript.

Dobrym przykładem jest bootstrap.js. To dzwoni$(document) sprawiedliwy bit i wykonuje inne podobne wywołania selektora bez kontekstu. Gdyby jQuery mógł zostać zmieniony w sposób opisany przeze mnie, wówczas te „nieoptymalnie” biblioteki pisane mogłyby zostać dość łatwo wyizolowane.

Ponadto bardzo pomocne może być użycie tego samego$.data(el, ...) kolekcja z obu ramek i jest to dość trudne bez zarządzania kontekstem.