画面遷移イベントその2
script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">pageglobal
これほ、画面読み込みが完了したイベントとして呼び出される
使い方は
$(document).on("pageglobal","#main",function(e,data){
//イベント処理
});
dataに入る値は、pagebeforeloadイベントとおなじで
遷移元画面のDOM
遷移先画面のDOM
絶対URL
ホスト内のURLなどになる
キャッシュされた画面を読み込むときには実行されないので注意
pagebeforechange
pagebeforechange
pagebeforehide
pagebeforeshow
は、画面遷移前に呼び出される
違いは、呼び出し場所が
グローバルイベントか
遷移前画面か
遷移後の画面かということ
使い方は
$(document).on("pagebeforechange","#main",function(e,data){
//イベント処理
});
dataには
遷移先の画面のDOMになる
toPage
画面遷移のオプションになる
options
が設定される
optionsには
画面遷移が呼ばれたときのパラメーターが入ってくる
pagebeforehide
画面遷移により、遷移元の画面が非表示になる前に呼び出される
setInterval()によるタイマー処理の停止
画面の中で行われているアニメーション停止
位置情報やモーションセンサーの値の取得などの停止もここで行う
使い方は
$(document).on("pagebeforehide","#main",function(e,data){
//イベント処理
});
data.nextPageに遷移先の画面のDOMが設定される
画面遷移元のイベントとして
pageremove
pagehide
があり、そこで画面遷移時のイベント処理もできるけど
これだとDOMがキャッシュされない場合、
pageremove
pagehide
の実行時にはDOMが削除されてしまい
遷移前の画面のDOMにアクセスできないので画面の終了処理はここで実行する
pagebeforeshow
遷移先画面が表示する前に呼ばれる
このイベントは、画面のDOMのキャッシュの有無に関わらず呼び出されるので
画面表示の際に毎回変わるような情報を表示するときに使う
用途としたて考えられるのはニュースとか
pagebeforeshowの使い方は
$(document).on("pagebeforeshow","#main",function(e,data){
//イベント処理
});
data.prevPageに遷移元画面のDOMが設定される
script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">pageremove
画面のDOMが削除されたときに呼ばれるイベント
画面がDOMにキャッシュされる場合
これは、トップページや明示的にキャッシュ設定されているときには呼び出されない
このイベントが呼ばれたときの状態では
遷移元画面のDOMにはアクセスできない
pageremoveの使い方は
$(document).on(“pageremove”,”#main”,function(e){
//イベント処理
});
[/javascript]
pagehide
画面遷移が完了し、遷移元画面スクリーンが消えると発生するイベント
これも画面がキャッシュされず
DOMが削除されているなら
前の画面のDOMにアクセスすることはできない
さすがにないものには戻れない
pagehideの使い方は
$(document).on("pagehide","#main",function(e,data){
//イベント処理
});
data.nextPageに遷移元画面のDOMが設定される
script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">pageshow
画面遷移が完了し、遷移先画面がスクリーンに表示された後に発生するイベント
setInterval()によるタイマー処理の開始
画面表示直後のアニメーション開始
位置情報、モーションセンサーなどの値の取得開始などをここで実行する
jqPlotでチャート表示するときには
チャート描写はここで行う
為替とか株のチャートを作るならここのイベントを使う事になりそう
photoSwipeの初期化もここで行うため
結構多用するイベントになる
pageshowの使い方は
$(document).on("pageshow","#main",function(e,data){
//イベント処理
});
data.prevPageに、遷移前画面のDOMが設定される
pagechange
pagehide
pageshow
とほぼ同じだけど、グローバルイベントとして実行される
pagechangeの使い方は
$(document).on("pagechange","#main",function(e,data){
//イベント処理
});
data.optionsには、画面遷移が呼ばれたときのパラメーターが設定される
data.toPageには遷移元画面のDOMが設定される
pagechangefailed
pagechangefailedは、画面遷移が失敗したときに実行されるイベント
使い方は
$(document).on("pagechangefailed","#main",function(toPage, options){
});
となる
toPageでURLやDOMを取得する
optionsには、画面遷移が呼ばれたときのパラメーターが設定される