以前『CDNを使ってjavascriptライブラリを呼び出す方法』にて、便利と紹介したCDNではあるが、サーバの状況次第では、たまに使えないときがある。
そういったとき、判定含めてJavaScriptで呼び出し対応したいと思うも、単純には上手くいかなかった。
どう解決したか、方法のメモ。
WordPressのテーマによっては、既にjQuery読み込み済みで、判定して別のを使いたいとかの場合は『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準拠の書き方を考えてみた
コメント