jQuery MobileのAjaxLoadを完全に無効化する方法

スマホ向けデザインフレームワークのjQueryMobileには、すべてのページ遷移の操作をオーバーライドして、実際にページ遷移を行うことなくコンテンツの中身を遷移先のものに入れ替える”AjaxLoad”がデフォルトで有効になっています。

うまくやればページ遷移のエフェクトを含めたリッチなサイトも構築できるのですが、全ページで使用するアセットをランディングページ(サイトで一番最初に表示されるページ)になりうるすべてのページに読み込んでおかないといけないなどのデメリットがあり、こういったAjaxLoadの仕様に設計上対応できない(したくない)場合などに無効化したい場合があります。

ところが、jQueryMobileのバージョンで指定方法が異なったりなど、 確実に無効化する方法がわかりづらかったりするのが難点です。

今回はAjaxLoadを確実に無効化する方法をご紹介します。

結論から言ってしまうと、HTMLのheadタグ内に、下記のコードを埋め込むだけで無効化できました。

<script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false; 
        $.mobile.ajaxLinksEnabled = false; 
        $.mobile.ajaxFormsEnabled = false;
        $.mobile.loadingMessage = false;
        $.mobile.hashListeningEnabled = false;
    });
</script>

なお、

$.mobile.ajaxEnabled = false; 

は新バージョンの指定で、

$.mobile.ajaxLinksEnabled = false; 
$.mobile.ajaxFormsEnabled = false;

は旧バージョンの指定となっています。

両方入れておくことで、どのjQueryMobileバージョンであっても対応できそうです。

これらの指定を入れておくことで、この指定が入っているページについてはAjaxLoadが働かず、通常通りのページ遷移をさせることが可能です。

お困りの方は試してみてください。