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