Bulblub

jQueryとjQuery UIがロードされているかを確認するBookmarklet

February 09, 2011

ブックマークレットをjQueryで作る際にチェックが必要なので。 目的はjQuery及びjQuery UIを二重に読み込みを防ぐこと。jQueryとjQuery UIが読み込まれてるか確認するブックマークレット [Sample1](javascript:(function(){alert(“jQuery is “+typeof jQuery);alert(“jQuery UI is “+typeof jQuery.ui)})();) 内容はこんな感じ

javascript:(function() { alert(‘jQuery is ’ + typeof jQuery); alert(‘jQuery UI is ’ + typeof jQuery.ui); })();

単純ですね。ロードされてなければ “undefind” を返してくるはずです。 これにjQuery及びjQuery UIをロードするスクリプトを加えて [Sample2](javascript:(function(){alert(“1:jQuery is “+typeof jQuery);var b=document.createElement(“script”);b.type=“text/javascript”;b.src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”;document.body.appendChild(b);b.onload=function(){alert(“1:jQuery UI is “+typeof jQuery.ui);var a=document.createElement(“script”);a.type=“text/javascript”;a.src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js”;document.body.appendChild(a);a.onload=function(){alert(“2:jQuery is “+typeof jQuery);alert(“2:jQuery UI is “+typeof jQuery.ui)}}})();) こんな感じでロードされてるか、ロードされたかを確認できるのではないでしょうか。

javascript:(function() { alert(‘1:jQuery is ’ + typeof jQuery); var a = document.createElement(‘script’); a.type = “text/javascript”; a.src = ’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’; document.body.appendChild(a); a.onload = function() { alert(‘1:jQuery UI is ’ + typeof jQuery.ui) var b = document.createElement(‘script’); b.type = “text/javascript”; b.src = ’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js’; document.body.appendChild(b); b.onload = function() { alert(‘2:jQuery is ’ + typeof jQuery); alert(‘2:jQuery UI is ’ + typeof jQuery.ui); } } })();

実験 http://jqueryui.com/demos/draggable/ 両方ロードされている筈です。 http://www.google.com/ 最初は1:でロードされていないものの、2:ではロードされています。 今回使ったjsを圧縮してくれるツール Online JavaScript/CSS Compression Using YUI Compressor 最後に バージョン違いには別途確認が必要ですね。

Tags:

Tomotsugu Kaneko

Written by Tomotsugu Kaneko who lives and works in Japan. Follow me on Twitter