2012年08月30日

jQuery スマートフォン ブラウザバック後の動作

ブラウザバック後の動作とは?


jQuery1.8.1を使用しスマフォのページを作成しており、
作成ページはオートページャライズが付いているのですが、
iPhone4だけ作成したページから、遷移してブラウザバック後オートページャライズが動作しませんでした。

試行錯誤


「javascript ブラウザバック」などで調べたら色々でてきました。
そのだいたいはonloadやらonunloadをすると良いとのことでしたが、
そもそも、iPhone4だとリロード時はonloadとonunloadが動作するが、
aタグにて遷移の時は、動作しなかった。

対策1


色々探していたところ、
参考
このサイトにてsetTimeoutを使用して無理やり動作するというのがあった、
まず、aタグをonloadでファンクションに飛ばす。

<a href="http://hoge.com" onclick="javascript:Search.movePage();">hoge</a>

JSファイルにて

movePage: function() {
setTimeout(function() {
// onload時に走らせるイベントを指定
location.reload();
}, 100);
}

これは、aタグを押下するとタイマーが作動、遷移するとタイマーが停止し、
ブラウザバックで戻ってくると再度タイマーが起動しリロードが走ります。
一応できましたが、これだと遷移に時間がかかると遷移する前にリロードがかかってしまいます。

対策2


対策1の弱点を考慮したものが、参考
「onpageshow」です。
ここにあるように、ページが表示されたときに呼び出されます。
これを使用すると、ページが表示された時なので、aタグを押下していくら時間が過ぎようとも今いるページがリロード等されているわけではないので作動しません。
しかしブラウザバックしたときに、起動だけしていたonpageshowが再度ページが表示されることにより動作しreloadが走ります。

movePage: function(val) {
window.onpageshow = function() {
location.reload();
}
}

これで問題なしです。
ただ、このonpageshowは、チェックしたandroidでは動作しないようなので、
iphone5などバージョンが変わると動作するかは不明です。
(androidは対策しなくても動くので丁度よいのですが)
posted by RicK at 16:19| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/57893714

この記事へのトラックバック