WEB担当者のためのスキルアップノートjQuery Mobileで下層ページだけGoogleマップ等のJavaScriptが読み込まれない原因
最近jQuery Mobileを使っていくつかサイトを構成する機会があったのですが、
下層ページに追加したGoogleマップがうまく表示されず困っていました。
調べたところ、ようやく原因が分かったのでご紹介したいと思います。
まずjQuery Mobileでサイトを構成する時には、以下のような選択肢があります。
● pageタグを利用して、全ページを1ファイルで構成する。
● 普通のサイト同様、別ファイルで構成する。
原因
セーノの場合は2つ目の方法で構成をしていたのですが、どうやらこれがハマってしまった原因だったようです。
そもそもjQuery Mobileは、ページ遷移時のローディング時間を軽くするために、pageタグで全ページのコンテンツを1ファイルにおさめる事ができるようになっているんですね。headerのscript情報も最初のローディング時にまとめて全ページ分の情報を読みこむため、スマートフォンでのページ遷移がとても軽くなります。
しかし、別ファイルで構成されたサイトの場合、上記の理由で下層ページにのみ記載したJavaScript等が読み込まれない事態が発生してしまうようです。
その証拠に、下層ページでページをリロードしてみるときちんと機能しているはず。
解決方法
要は、最初の読み込み時に必要なscript情報を読み込ませてしまえば良い訳なので、
スマホサイトのindex.php(index.html)のheaderに、下層ページで使用したいscript情報を記載するだけで完了です。
たったコレだけなのに数時間もハマってしまい、時間がもったいなかった。。
フレームワークは便利ですが使うときは必ず使用を精査しなくてはいけませんね。反省。