jQueryMobileでハッシュ付きURLだと真っ白になったり遷移しない

この前のチェックボックスの件とかもそうだし、
jQueryMobileは便利なのは分かるのだけれど、いらんことをしてくれる。

今回ドはまりしたのは、EC-CUBEにスマホ版で

example.com/index#link
のような、ハッシュ付きURLにアクセスすると画面が真っ白になる件。

と、

<div id="sample">ほげ！</div>
<a href="#sample">ほげにとぶ</a>
というようなアンカーリンクをクリックしても遷移しない件。


分かってみれば「またお前か」という感じ。

ハッシュ付きURLをたたいても真っ白になる件の解決方法は、
/data/html/user_data/packages/sphone/js/config.js
この中の、jQueryMobile用のイニシャライズをしているところに

$.mobile.hashListeningEnabled = false;

これを追加してあげるだけ。

リファレンスには・・・

jQuery Mobileは自動的に location.hash の変更を見張り、制御します。この値を false にすると、jQuery Mobileはハッシュ変更時の制御を止めます。それにより、制御を自分自身で行ったり、あるいはディープリンクをそのままにして指定したIDへ自動スクロールさせるようなことが出来ます。

とある。
(参考サイト　jQueryMobileの日本語リファレンス＞グローバル設定)

つまり、jQeuryMobileが動いている環境で特に設定がされてない場合、ハッシュがついていてもそれをなかったことにしちゃう系のことみたい。ちゃんと設定をバインドしてあげたらハッシュ付きURLでアクセスしても真っ白にはならなくなった。

アンカーリンクで遷移しない件は・・・
<a href="xxxx.html" data-ajax="false">リンク先</a>
とaタグに追加してあげるとちゃんと遷移した。

rel="external"でもいいみたいなことが書いてあったのだけれど、自分の場合はうまくいかず。
このdata-ajaxを逐一書くのが面倒なら、さっきのconfig.jsに

$.mobile.pushStateEnabled = false;

って書いてあげればOK。


jQueryMobile面白いかも。