javascriptでjQueryが読み込まれていない場合にbodyの最後に読み込む

「jQueryが読み込まれているかどうか」それだけで色々と動作しない場合があります。Wordpressテーマ、Simplicityで言えば、javascript.js内に書いてあるスクリプト自体は間違いないのに、jQueryが読み込めなかっただけでfadein fadeoutがしなかったり、snsのカウンターがずっと回りっぱなしだったり、思いがけぬ不具合が出たりします。

以前、以下のブログカードにあるように、

fopen,file_get_content等がそのままでは利用できないサーバーでWordpressのjQueryをCDNにする方法
※ fopen,file_get_contentが利用できるサーバーでも下記で動作します。←これ重要 ※ 内容的にはwordpressのj...

今の所、以下が最新

Simplicityを少し改造してみた 番外編 part17 jQueryをGoogleCDNで読み込む 2016-3月バージョン
以前、jQueryをGoogleのCDNから読み込む方法を書きました。このサイトはSimplicity1.5を魔改造しているため、現在のwo...

wordpressで管理画面以外はGoogleのCDNからjQueryを読み込むというような内容の記事を書きました。Worspressの場合は、自前でjQueryを持っているので、CDNの読み込みが失敗した場合、そちらに切り替えと言うようなことができたりします。
Wordpress以外の場合は、ヘッダで記載しているので通常であればそれを読み込むはずなのですが、読み込めない場合もあったりします。

例えば、CDNのホストに繋がらなかったりとか、ajaxをしてそのページではjQueryを読み込めなかったりとか。
そういう時に、何かしらのチェックができると便利です。

このブログでは、例えば「トップへ戻るボタン」で判断しています。というのは、cssで最初から非表示にすることは可能です。しかしあえてそれをjQueryですることで、もし読み込めなかった場合はずっと表示されっぱなしになりますから、あれ?なんかあったか?とチェックできるわけです。まぁ狙ってそうしてたわけではなくて、たまたまそうしてたら「あ、使えるじゃん」と思っただけなんですけれども(笑)

しかし本当は、最初から隠しておく方が良いと思います。そして見てる人に気づかれずに、サクッと読み込めれば尚よしです。
そこでこういうスクリプトを考えてみました。書きだすのはアレなのでfiddleのものを貼り付けます。

できればPCからアクセスしてもらって、画面左上javascript欄にあるFrameworks & ExtensionsのドロップダウンメニューからjQueryのあるなしを選択してもらえると動作がわかってもらえると思います(上記fiddleのページ)。
※ 上記のfiddleはデフォルトでjQueryを読み込んでいません。別ページをこの記事内に埋め込んであるため、埋め込み画面内・下記を参考にjQueryの読み込みの有無を切り替えて確認して下さい。

追記 2016/06/04 スクリプトを変更しました。
jQueryが読み込まれているかどうかは、typeof jQuery === “undefined” で調べることができます。
undefinedを返してきた場合は読み込まれていないので、jQueryを読み込むスクリプトを書きます。

if (window.jQuery) でjQueryが動作しているかどうかを調べて、動作していたらその内容を読み込む、動作していない場合はbodyの最後にスクリプトを挿入して、100ミリ秒後にその内容を読み込むと言うふうにしました。

即時関数のようにして、

とすれば動作します。あくまで緊急の場合に、一時的な処置として。

document.body.appendChild(a)の部分で、bodyの最後に読み込み用のjQueryを配置することができます。この部分の記述を変えれば任意の箇所に読み込ませることは可能です。appendChild()は、「bodyの最後に」と言うような意味合いです。

PCからfiddleにアクセスしてもらって、ドロップダウンメニューからjQueryのあるなしを選択して画面上部の「run」から実行します。すると、もしjQueryが読み込まれている場合は、その読み込んだjQueryのバージョンを表示します。
何かしらjQueryが先に読み込まれていればそれが優先されます。それらが読み込まれていない場合に、上記jsFiddleのスクリプトが読み込まれるという寸法です。

$().jqueryは、$.fn.jqueryとも書けます。

.jqueryはエイリアスである$.fnから共有参照されるjQueryのprototypeに割り当てられています。これには、”1.5.0″ や “1.4.4”のようなjQueryのバージョンナンバーの文字列が格納されています。

参考リンク: .jquery | jsStudio

これを利用して読み込まれているバージョンナンバーを調べています。もし該当のjQueryのバージョンが読みたいバージョンと違っていた場合(推奨されていませんが自動で最新のバージョンを取得するような書き方をしている場合など)、これらのバージョンを比較することで正しくバージョンを読み込めるようになるかも知れません。

このような手段を利用して、正しくjQueryを読み込めるように設定すると色々な場合に役立つかも知れません。
どんな場合かはアレですけども(笑)

ちなみにfiddleではjQuery edgeを読み込むと3.0.0を読み込むことができます。

スポンサーリンク

シェアする

フォローする