jQueryをjavascriptで呼び出す

便利と紹介したCDN(CDN経由でjQuery等)ではあるが、サーバの状況次第では、たまに使えないときがある。
そういったとき、普通にjavascriptで呼び出したいと、皆思うだろうけど単純装備では上手くいかないので、解決方法のメモ。

wordpressのテーマによっては既にjQuery読み込み済みの場合もあるので、覚えておくと便利。

よく下記のように書きがちなのだが『$ is not defined』になる。

<script type="text/javascript">
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"><\/script>');
$(window).on("load", function(){
	window.alert($.fn.jquery);
});
</script>

何故か、単純にいうとscriptタグ毎に処理される
つまりdocument.writeを命令だされただけで実行する前にjQueryの命令を出されている状態。

例えば下記のようなコードの場合、document.write直後(1st)と次のscriptタグ内(2nd)とでは表示されるバージョンが違う。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"><\/script>');
window.alert('1st:'+$.fn.jquery);
</script>
<script type="text/javascript">
window.alert('2nd:'+$.fn.jquery);
</script>

処理をstriptタグ毎に分けるのです!
分けるのです!

2重に読み込んでいても困らない(むしろバージョン上書に有効活用)のだけど、
『jQuery読み込めなかった場合のみ出す』条件を足すと

<script type="text/javascript">
if(!window.jQuery){document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"><\/script>');}
</script>
<script type="text/javascript">
$(window).on("load", function(){
	window.alert($.fn.jquery);
});
</script>

完結に書くなら

<script>window.jQuery || document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><\/script>')</script>

※WordPressで設定するなら、こちらの記事(WordPressに読み込み済みjQueryを使う)も見てほしい。

ただしあくまで動けばいい状態
warningぐらいは出るし、パフォーマンスはよろしくない。

つまるところ「javascriptで呼び出すのは止めておけ」ってことなのだけど、でもいいの、だって予備だから。
参照:【翻訳】document.writeでSCRIPTを書き出すなやで! - MOL

もし全てを解決したいのであれば下記を参照したら、なんとかなるかもしれない。
参照:jQueryのロードのフォールバックでHTML4やXHTML1.0準拠の書き方を考えてみた

コメント

タイトルとURLをコピーしました