콘텐츠로 건너뛰기
Home » jQuery를 활성화하는 북마클릿

jQuery를 활성화하는 북마클릿

웹페이에서 요것 조것 뜯어보고 바꿔보려고 할 때 자바스크립트 콘솔에서 좀 편리하게 작업하기 위해 만든 스크립트. 북마클릿으로 만들어 아내의 맥북 사파리 북마크에 “오빠의 마법”에 넣고자 하던 것이다.
원래 코드는 다음과 같다.

/*Lastest Version*/(function(){
    var latestVersion = '1.8.2';
    var jQueryEnabled = false;
    var jQueryUIEnabled = false;
    console.log('Lastet Version :'+latestVersion);
    if(window.jQuery === undefined || window.jQuery.fn.jquery < latestVersion){
        console.log('No jQuery. Load jQuery Library');
        var script = document.createElement('script');
        script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'+latestVersion+'/jquery.min.js';
        script.onload = script.onreadystatechagne = initMyjQuery;
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    } else if(jQuery.ui === undefined || jQuery.ui.version < latestVersion){
        /*if run again, load jquery ui*/
        var script = document.createElement('script');
        script.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/'+latestVersion+'/jquery-ui.min.js';
        script.onload = script.onreadystatechagne = initMyjQueryUI;
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    } else {
        initMyBookmarklet();
    }
    function initMyjQuery(){
        if($ === undefined){
            console.log('$ is not defined');
            $ = jQuery;
        }
            jQueryEnabled = true;
            console.log('jQuery Loading : DONE');
            initMyBookmarklet();
    }
    function initMyjQueryUI(){
        jQueryUIEnabled = true;
        console.log('jQuery UI Loading : DONE');
        initMyBookmarklet();
    }
    function initMyBookmarklet(){
        /*begin custom code here*/
        console.log('init Bookmarklet : DONE');
        /*end of custom code*/
    }
})();

북마클릿용은 위 코드를 한줄로 합치고 앞에 javascript:만 붙이면 된다.

javascript:/*Lastest Version*/(function(){ var latestVersion = '1.8.2'; var jQueryEnabled = false; var jQueryUIEnabled = false; console.log('Lastet Version :'+latestVersion); if(window.jQuery === undefined || window.jQuery.fn.jquery < latestVersion){ console.log('No jQuery. Load jQuery Library'); var script = document.createElement('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'+latestVersion+'/jquery.min.js'; script.onload = script.onreadystatechagne = initMyjQuery; document.getElementsByTagName('HEAD')[0].appendChild(script); } else if(jQuery.ui === undefined || jQuery.ui.version < latestVersion){ /*if run again, load jquery ui*/ var script = document.createElement('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/'+latestVersion+'/jquery-ui.min.js'; script.onload = script.onreadystatechagne = initMyjQueryUI; document.getElementsByTagName('HEAD')[0].appendChild(script); } else { initMyBookmarklet(); } function initMyjQuery(){ if($ === undefined){ console.log('$ is not defined'); $ = jQuery;    } jQueryEnabled = true; console.log('jQuery Loading : DONE'); initMyBookmarklet(); } function initMyjQueryUI(){ jQueryUIEnabled = true; console.log('jQuery UI Loading : DONE'); initMyBookmarklet(); } function initMyBookmarklet(){ /*begin custom code here*/ console.log('init Bookmarklet : DONE'); /*end of custom code*/ } })();

향후, jQuery의 새 버전이 나오는 경우, latestVersion의 값을 새 버전에 맞게 수정해주면 된다. 또한 한 번 실행해서 지정한 버전의 jQuery를 로딩한 후, 다시 한 번 북마클릿을 실행하면 jQuery UI까지 로딩해준다.