Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

ページのロード/切り替え時に初期化/後処理を実行するには?

2014年9月18日

ページを表示/切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。

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

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前の通り、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 jQuery Mobileでは、ページを表示/切り替えするタイミングで、以下のようなイベントを発生します。ページの初期化処理/後処理を実装する際には、これらのページイベントを利用してください。

イベント概要
pagecontainerbeforechange ページの移動前
pagecontainerbeforeload ページのロード前
pagebeforecreate 初期化処理の直前
pagecreate 初期化処理の直後
pagecontainerload ページのロード後
pagecontainerbeforehide 前のページを非表示にする前
pagecontainerbeforeshow 新しいページを表示する前
pagecontainerremove 前のページがDOMツリーから削除された後
pagecontainerhide 前のページを非表示にした後
pagecontainershow 新しいページを表示した後
pagecontainerchange ページの切り替え完了後
pagecontainerloadfailed ページの取得に失敗したとき
pagecontainerchangefailed 切り替え先のページ取得に失敗したとき
jQuery Mobileの主なページイベント*1
  • *1 jQuery Mobile 1.3以前ではpagebeforechange(containerなし)などのイベントが用意されていましたが、1.4以降では非推奨となり、1.6では削除される予定です。新たな開発では利用しないようにしてください。

 ちなみに、jQueryでよく利用していたreadyイベントは、jQuery Mobileではあまり利用することはありません。別稿でも触れたように、jQuery Mobileではページ遷移をAjax経由で行います。このため、ページ遷移のタイミングではページの読み込み終了を表すreadyイベントは発生しないのです(=最初のページ読み込みでのみreadyイベントが発生します)。

 jQuery Mobileでページロード時の初期化を行うならば、pagecreateイベントを利用してください。

ページイベントの基本

 ページイベントは、以下のようにdocumentオブジェクトに対してバインドします。これによって、以降、新たなページに遷移しても、これを認識できるからです。

[構文]ページイベント

$(document).on('ページイベント', function(e, d) {
  ……ページイベントでの任意の処理……
})

 以下は、それぞれのページイベントが発生したタイミングで、ログを出力する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<script>
// ページイベントを登録
$(document).on('pagecontainerbeforechange', function(e, d){
  console.log('pagecontainerbeforechange');
});

$(document).on('pagecontainerbeforeload', function(e, d){
  console.log('pagecontainerbeforeload');
});
……中略……
</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>jQuery Mobile TIPS</h1>
  </div>
    <div role="main" class="ui-content">
      <a href="page1.html" class="ui-btn">別ページへ</a>
      <a href="page_nothing.html" class="ui-btn">存在しないページへ</a>
    </div>
    <div id="result"></div>
  <div data-role="footer">
    Copyright 1998-2014, YAMADA.Yoshihiro
  </div>
</div>
</body>
</html>
ページイベントのタイミングでログを表示(page_event.html)

 それぞれのイベントの発生順を以下にまとめます。

ページイベントの発生順序

データオブジェクトのプロパティ

 ページイベントに対応するイベントリスナーでは、第2引数としてデータオブジェクトを受け取ります(先ほどの構文ではdで表しています)。ページイベントでは、このデータオブジェクトを介して、新旧のページ情報、遷移に際して利用された(される)XMLHttpRequestオブジェクトなどにアクセスできます。以下に、データオブジェクトの主なプロパティをまとめます。

イベントプロパティ概要
pagecontainerbeforechange toPage 遷移先のURL、ページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
options changeメソッドに渡したオプション
pagecontainerbeforeload url 遷移先のURL
absUrl 遷移先の絶対URL
dataUrl 遷移先のURLのパス部分
toPage 遷移先のURL文字列
prevPage 遷移前のページのjQueryオブジェクト
deferred Defferedオブジェクト
options loadメソッドに渡したオプション
pagebeforecreate
pagecreate
pagecontainerload url 遷移先のURL
absUrl 遷移先の絶対URL
dataUrl 遷移先のURLのパス部分
options loadメソッドへ渡したオプション
xhr ページのロード時に使ったXMLHttpRequestオブジェクト
textStatus ステータス
toPage 遷移先のページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
pagecontainerbeforehide nextPage 遷移後のページのjQueryオブジェクト
toPage 遷移先のページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
pagecontainerbeforeshow prevPage 遷移前のページのjQueryオブジェクト
toPage 遷移先のページのjQueryオブジェクト
pagecontainerremove toPage 遷移先のページのjQueryオブジェクト
prevPage 削除されるページ
pagecontainerhide nextPage 遷移後のページのjQueryオブジェクト
toPage 遷移先のページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
pagecontainershow toPage 遷移先のページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
pagecontainerchange toPage 遷移先のページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
pagecontainerloadfailed url 遷移先のURL
absUrl 遷移先の絶対URL
dataUrl 遷移先のURLのパス部分
toPage 遷移先のページのjQueryオブジェクト
prevPage 遷移前のページのjQueryオブジェクト
deffered Defferedオブジェクト
options loadメソッドへ渡したオプション
xhr ページのロード時に使ったXMLHttpRequestオブジェクト
textStatus ステータス
errorThrown エラー情報
pagecontainerchangefailed toPage 遷移先のページのjQueryオブジェクト
option changeメソッドへ渡したオプション
prevPage 遷移前のページのjQueryオブジェクト
データオブジェクトの主なプロパティ

特定のページでイベントを捕捉する

 特定のページでのみページイベントを捕捉するならば、以下のような構文を利用します。onメソッドの第2引数にページ要素のid値を指定します。

[構文]ページイベント(特定のページ)

$(document).on('ページイベント', 'ページid', function(e, d) {
  ……ページイベントでの任意の処理……
})

 例えば以下は、page1.html(「id="page1"」のページ要素)を読み込んだタイミングでのみ、ダイアログを表示する例です。

JavaScript
$(document).on('pagecreate', '#page1', function() {
  window.alert('ページpage1がロードされました。');
});
特定のページでのみ初期化イベントを実行するコード(page_special.html)

 あるいは、以下のようにイベントオブジェクトのtargetプロパティでターゲット要素(=イベントの発生元)を取得して、そのid値でもって処理を分岐しても構いません。

JavaScript
$(document).on('pagecreate', function(e, d) {
  if (e.target.id === 'page1') {
    window.alert('ページpage1がロードされました。');
  }
});
特定のページでのみ初期化イベントを実行するコード(別解。page_special.html)

※以下では、本稿の前後を合わせて5回分(第33回~第37回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
33. JavaScriptからフォーム要素を操作するには?

フォーム関連を自前で記述する場合、jQueryの知識を生かせるが、jQuery Mobile固有の注意点もある。その注意点を解説する。

jQuery Mobile逆引きリファレンス
34. JavaScriptからjQuery Mobileページ間の移動を制御するには?

通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。

jQuery Mobile逆引きリファレンス
35. 【現在、表示中】≫ ページのロード/切り替え時に初期化/後処理を実行するには?

ページを表示/切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。

jQuery Mobile逆引きリファレンス
36. ページレイアウトが変更したときに処理を実行するには?

ウィジェットのレイアウト状態が変化したとき(例えば開閉パネルが開いた/閉じたときなどに)、処理を実行する方法を説明する。

jQuery Mobile逆引きリファレンス
37. data-defaults/data-enhanced属性でページの描画を高速化するには?

jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。

サイトからのお知らせ

Twitterでつぶやこう!