jQueryMobileでサイトを作っていたら、何故かページが勝手に
遷移してとても困まりました
・ページAから別ページに遷移(URL変化あり)
・端末の戻るボタンでページAに戻る
・再度ページAから別ページに遷移
・「loading」の表示がされ別ページに飛ばされる・・・
といった感じ
そもそもjQueryMobileがどうやって動いているのか理解して
いなかったのでお勉強
ページ間リンク | jQuery Mobile 1.0.1 日本語リファレンス
jQueryMobileでは標準でAjaxのページ遷移がONになっていて、
rel=”external”やdata-ajax=”false”を指定していないと
同一ドメイン内ではAjaxでのページ遷移が行われるらしい
※rel=”external”もdata-ajax=”false”も動作的には同じだが
セマンティックとしても意味(外部リンク or 内部リンク)が違う
すべてのAタグにdata-ajax=”false”を指定したが、症状が
収まらなかったのでjQueryMobileにおける自動初期化処理(mobileinit)
で以下の2行を設定したところ勝手な遷移は発生しなくなりました
$.mobile.ajaxEnabled = false; $.mobile.pushStateEnabled = false;
mobileinitイベントの設定方法
グローバル設定 | jQuery Mobile 1.0.1 日本語リファレンス
具体的には、適当なjsファイルを作り下記を記述して
$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = "false"; $.mobile.pushStateEnabled = "false"; });
作成したjsファイルをjQueryとjQueryMobileの間で読み込む
<SCRIPT src="jquery.js"></SCRIPT> <SCRIPT src="mobileinit_noajax.js"></SCRIPT> //←jQueryとjQueryMobileの間で読み込むことを推奨 <SCRIPT src="jquery.mobile-1.0.1.js"></SCRIPT>
これでAjaxによる遷移は行われなくなるようです