jQuery Mobileで下層ページだけGoogleマップなどのJavaScriptが読み込まれなくて困っている人へ

2013年3月17日 14:01 

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • Yahoo!ブックマークに登録
最近jQuery Mobileを使っていくつかサイトを構成する機会があったのですが、 
下層ページに追加したGoogleマップがうまく表示されず困っていました。

もともとプログラム関係には強くないので必死で調べたところ、ようやく原因が分かったのでご紹介したいと思います。

まずjQuery Mobileでサイトを構成する時には、以下のような選択肢があります。
● pageタグを利用して、全ページを1ファイルで構成する。
● 普通のサイト同様、別ファイルで構成する。


原因
僕の場合は2つ目の方法で構成をしていたのですが、どうやらこれがハマってしまった原因だったようです。
そもそもjQuery Mobileは、ページ遷移時のローディング時間を軽くするために、pageタグで全ページのコンテンツを1ファイルにおさめる事ができるようになっているんですね。headerのscript情報も最初のローディング時にまとめて全ページ分の情報を読みこむため、スマートフォンでのページ遷移がとても軽くなります。

しかし、別ファイルで構成されたサイトの場合、上記の理由で下層ページにのみ記載したJavaScript等が読み込まれない事態が発生してしまうようです。
その証拠に、下層ページでページをリロードしてみるときちんと機能しているはず。



解決方法
要は、最初の読み込み時に必要なscript情報を読み込ませてしまえば良い訳なので、
スマホサイトのindex.php(index.html)のheaderに、下層ページで使用したいscript情報を記載するだけで完了です。
たったコレだけなのに数時間もハマってしまい、時間がもったいなかった。。
フレームワークは便利ですが使うときは必ず使用を精査しなくてはいけませんね。反省。

シェアする

  • このエントリーをはてなブックマークに追加
comments powered by Disqus

Twitter

Facebookページ


Clip to Evernote このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録

月別アーカイブ

  • セーノのtwitter
  • セーノのfacebookページ
  • セーノのmixiページ
  • セーノのwordpressブログ
  • セーノのgoogle plusページ