Блог

В частности, я хочу определить локальный jQuery (var jQuery), где
должен храниться jQuery (а также local $ ).

Проблема в том, что jQuery работает непосредственно с объектом window:

 // Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
})(window);
  

это цитата из jQuery 1.6.4
Как я могу обойти это?

PS: моя конкретная проблема заключается в написании некоторого фрагмента для использования сторонним веб
-сайтом, и если я включу jQuery, могут возникнуть некоторые несовместимости с этим сторонним js-кодом. В настоящее время я делаю следующее:

 // here some license notes about jQuery included
(function() {
    if (typeof jQuery === "undefined") {
        // jQuery code as it is goes here
    }
    // my code
})(); 
  

Вы можете перейти true к $.noconflict(), чтобы jQuery удалил все свои переменные из глобальной области видимости:

 (function($) {
    var jQuery = $.noconflict(true);
    // From there on, window.jQuery and window.$ are undefined.
    var $ = jQuery;
    // Do something with the local jQuery and $...
})(jQuery);
  

 var jQuery, $;
jQuery = $ = window.jQuery;
delete window.jQuery;
delete window.$;
  

Вы можете удалить его с помощью .noConflict :

 var localjQuery = jQuery.noConflict(true);
  

Но он будет находиться в глобальной области видимости до этого вызова…

Нашел этот пост, пытаясь выяснить, как внедрить полностью независимый экземпляр jQuery с пользовательскими методами расширения на веб-страницу через GreaseMonkey / Tampermonkey и обойти изолированную среду Chrome. Излишне говорить, что мне нужно было немного больше, чем предусмотрено, вот что у меня получилось.

Ниже приведен вводимый текст кода и некоторые другие методы, которые, я уверен, помогут другим начать работу. Я добавляю это на каждую веб-страницу, чтобы я мог получить доступ к этому экземпляру через консоль разработчика или через другие скрипты tampermonkey. Я дал ему псевдоним «z». Он лениво загружается, чтобы не замедлять работу страниц, которые его не используют.

Для загрузки необходимо вызвать z(), z.ProcessWaitList() или добавить функции в ZWaitList до загрузки z-скрипта.

Обратите внимание на теги //BEGIN_INJECTION// и //END_INJECTION//, а также условные теги включения /… и …/. Код внутри условных тегов включения будет включен только в фактический код, который вводится на страницу. Это предотвращает повторяющиеся автоматические выполнения, когда скрипт запускается один раз в GreaseMonkey, а затем снова после ввода.

 (function ZInjectionContainer() {
    if(!document.querySelector('script[id="ZInjectionContainer"]')){
        //BEGIN_INJECTION//
        /*... z = (function (_jQuery, _$) { ...*/    

        function SubstrBetween(s, start,end){ return s.substring(s.indexOf(start)   start.length, s.lastIndexOf(end));}

        function AppendScript(id, src, callback){
            var js = document.querySelector('script[id="'  id  '"]');
            if(!js){ 
                js = document.createElement('script'); js.id = id; js.type = 'text/javascript';
                document.getElementsByTagName('body')[0].appendChild(js); 
            } 
            if(callback)  js.onload = callback;     
            if(src amp;amp; String(src).endsWith('.js')) js.src = src; 
            else if(src)js.text  = "n"   String(src); 
            return js;
        }  

        function ProcessWaitList(){
            function process(){ console.log('  Processing WaitList.');  while(ZWaitList.length > 0){   ZWaitList.shift().call(); } }
            if(typeof ZWaitList == 'undefined') ZWaitList = [];            
            if(Array.isArray(ZWaitList) amp;amp; ZWaitList.length > 0){      
                if(!IsInitialized()) {
                    console.log('ZWaitList sizeof '   ZWaitList.length   ' detected.  Auto Initializing');  
                    ZInitialize(process);                        
                }
                else{ process(); } 
            }      
        }

        function ZInitialize(callback) {  
            var _version = 'jquery-2.2.0.min';
            AppendScript(_version, 'https://code.jquery.com/'  _version  '.js',function(){
                z = jQuery.noConflict(true);  
                jQuery = _jQuery; $ = _$;  
                z.extend(createLocalInstance());               
                console.log(' Loaded jQuery-'   z().jquery   ' as z. Page Version is jQuery-'   (_jQuery ? _jQuery().jquery : 'undefined'));                                                         
                z(document).ready(function(){ 
                    console.log('    document loaded'); 
                    if(callback) z(callback); 
                    if(callback != ProcessWaitList){ ProcessWaitList();}
                });
            });                 
        }; 

        function IsInitialized(){
            return (typeof z !== 'undefined' amp;amp; typeof z=== 'function' amp;amp; !String(z).startsWith(ZInitialize.toString()));
        }

        function createLocalInstance(){
            var local = ZInitialize;
            local.IsInitialized = IsInitialized;
            local.SubstrBetween = SubstrBetween;
            local.AppendScript = AppendScript;
            local.ProcessWaitList = ProcessWaitList;
            return local;
        }

    /*... 
        if(typeof z == 'undefined')  {z = createLocalInstance();}  
        else if (typeof z !== 'function' || !String(z).startsWith(ZInitialize.toString())) {
            console.log('Error.  z is already defined as: '    z  'n Overwriting anyway');
            z = createLocalInstance();
        }

        ProcessWaitList();
        return z;   
    })(typeof jQuery !== 'undefined' ?  jQuery : null, typeof $ !== 'undefined' ?  $ : null); 
     ...*/  
    //END_INJECTION//   

        var inject = SubstrBetween(ZInjectionContainer.toString(),"//BEGIN_INJECTION//", "/" "/END_INJECTION//");
        inject = inject.split('/*...').join('').split('...*/').join('');
        AppendScript("ZInjectionContainer", inject);
    }
})();   
  

Другие сценарии, использующие эту функциональность, называют это так:

 function RemoveStupidStuff(){    
    //Example code
    z('td.logo1').parents('table').remove();
    z('#bodyarea').prev().remove();
    z('#bodyarea').css('padding','0')
    z('#bodyarea #mcol').prev().remove();
}

function FixIndexPage(){
     //Example code - Remove show image on hover and instead just make it the thumbnail
    console.log('making the index page less crappy');
    z('#bodyarea #mcol table[width="75%"] tr td table.lista').attr('id','thegoods').css('width','100%');;
    z('#thegoods tr:not(:first-child)').addClass('listing');

    var listings = z('.listing')
    for(var i=0; i < listings.length; i  ){       
        var row = listings[i];
        var thumb = z(row.children[0]).find('a')[0];
        var hoverimg = z(row.children[1]).find('a')[0];
        var link = z.SubstrBetween(hoverimg.onmouseover.toString(), "<img src=", " width=");
        thumb.href = hoverimg.href;               
        z(thumb).find('img').attr('src', link).attr('width','350px'); 
    }    
}

var operations = [RemoveStupidStuff];
if(location.search.indexOf('page=index')>=0){
    operations.push(FixIndexPage);
}

console.log('pushin site fixes to waitlist');
if(typeof ZWaitList === 'undefined') 
    ZWaitList = operations;
else {
    ZWaitList = ZWaitList.concat(operations);
    z.ProcessWaitList();
}
  

Вот что выведет консоль разработчика Chrome, используя приведенный выше код. Обратите внимание, что он работает на разных виртуальных машинах и все такое.

 VM300:59 pushin site fixes to waitlist
VM298:24 ZWaitList sizeof 2 detected.  Auto Initializing
VM298:35  Loaded jQuery-2.2.0 as z. Page Version is jQuery-1.6.4
VM298:37     document loaded
VM298:20   Processing WaitList.
VM300:30 making the index page less crappy
VM298:20   Processing WaitList.