スポンサーリンク
スポンサーリンク

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。
data-url属性を使用したサンプルコードの実行結果はこちら

サンプルコードの実行結果を確認すると、初めに表示されるページにはページ2へのリンクが2つあり、リンク先はそれぞれ”page_2″,”#page2″です。どちらもページ2へ遷移しますが違いもあります。このHTML文書が以下のURLで表示されるとします。

jQueryMobile 移動しないヘッダ、フッタIDを利用する

このURLから前者のリンクでページ2へ遷移すると、アドレスバーのURLが、

404 Error - Not Found

と設定されます。ブラウザのステータスバーでは、リンク先もこのように表示され、同じHTML文書内のページあれば、data-url属性でdomain以下の部分を値として設定すると、前のページとの行き来ができます。

ですが、後者のリンクでページ2へ遷移すると、アドレスバーのURLが

jQueryMobile 移動しないヘッダ、フッタIDを利用する

設定されますこれだけではなくページ2(id=”page2″)のdata-url属性の値も”page2″に変更されるので、これ以降前者のリンクでページを遷移することができなくなります。この設定は、同一のHTML文書内のページだけではなくて、異なるHTML文書のページに対しても同じことができます。ただ、Ajaxによるページ遷移時だけです。

リンク先のコンテンツを前もって読み込む

表示中とは別のHTML文書のコンテンツ(ページやダイアログ)にリンクしているとき、通常はリンクがタップ・クリックされてからリンク先のコンテンツをAjax通信で読み込んで表示します。ですが、ネットの通信環境により読み込みに時間がかかることがあります、

そんなときに利用するのが、リンクを設定するaタグにdata-prefetch=”true”を追加しておくと、そのリンクを含むページが表示されるときに、リンク先のコンテンツも予め読み込む処理が行われます。読み込んだコンテンツが表示されるのは、それにリンクするaタグがクリック・タップされてからです。

こうすることで、画面の遷移時の待ち時間をユーザーに負担を感じさせずに済みますが、事前に読み込まれた時点のコンテンツが表示されるので、内容がリアルタイムのものではないことがあります。

DOMキャッシュの設定をする

表示中とは別のHTML文書からダイアログやページを読み込むときに、それらのタグにdata-dom-cache=”true”という設定をすると、一度通信して読み込まれたページの内容が表示中のHTML文書内に記憶されたままとなります。記憶されたページを表示するときは、ページを読む込むための通信が発生しないので、表示がすばやくなりますが、記憶された内容は最初に読み込んだ時点の物なので、情報はリアルタイムに反映できません。

この設定をしていないとき、a.htmlからb.htmlに遷移することを何度も繰り返すとページを遷移させるたびにサーバーと通信してページの内容を取得します。1回の通信ならかかる時間は少ないですが、サービスの規模が大きくなり、ユーザーがたくさん同時に通信を行うと、サーバーに大きな負担がかかるので、data-dom-cache=”true”はこういう時に効果を発揮します。

コメント

タイトルとURLをコピーしました