iOSのMobile Safariでのブラウザバック問題
→iPhoneでのMobile Safariのloadイベントについて、iPhoneではブラウザバックによって戻って来たページではloadイベントを行ってくれません!
Aページ→Bページで、Bページから戻ったAページでloadしてくれない!
window.addEventListener('load', function(){ var element = document.getElementById("hoge"); element.addEventListener('click', function(event){ } }
■その1:setIntervalを使用する
→ブラウザバックしても生きているsetIntervalを使用する方法が考えられる
×しかし、複数のオブジェクトが作成されてしまう。
window.addEventListener('load', function(){ var element = document.getElementById("hoge"); setInterval(function() { element.addEventListener('click', function(event){ } , false) }, 1000); }
→ちなみにAddEventlistenerのことについてここに書いてます。
Document Object Model Events
If multiple identical EventListeners are registered on the same EventTarget with the same parameters the duplicate instances are discarded. They do not cause the EventListener to be called twice and since they are discarded they do not need to be removed with the removeEventListener method.
「they are discarded 」というのがメモリに蓄積せずに廃棄するのか、単に実行されないことをdiscardといってるのがわかりません。
iPhoneのsafari自体が正しく実装してるかもわかりません。
しかも、Mobile SafariではsetTimeoutやsetIntervalで回すループは一定の時間が経過すると止まる仕様らしい?
バージョンを負うごとに緩和されてるが、再帰的にイベントをaddする方法は使えないかも?
■その2:pageshowというイベント
→Mobile Safariで使えるイベントである
×しかし、ブラウザバックでは実行されたりされなかったり・・
window.addEventListener('pageshow', function(){ var element = document.getElementById("hoge"); element.addEventListener('click', function(event){ } }
↓Mobile Safariで使えるイベントのリファレンス
Safari Web Content Guide
■その3:HTMLに直書き!
→HMTLならかっこわるいけどいけるかも?function(event){}をhogeFunc()にしてみて以下のようにやる
×しかし、loadと同じ効果なのか、ブラウザバックには無駄だった。
<div id="hoge" onclick="hogeFunc(); return false;">
■その4:Functionを使わない
→その1で試した方法のFunctionオブジェクトを別の関数にしてやる
window.addEventListener('load', function(){ var onClick(event) { } var element = document.getElementById("hoge"); setInterval(function() { element.addEventListener('click', onClick, false) }, 1000); }
これならFunctionオブジェクトを生成され続けていかないので、OKっぽい。
Safariのデバッガでも特に追加され続けていたりはなかった。
■おまけ
load : サーバーから読み込みが完了した直後
pageshow : ページがレンダリング完了した直後(load直後はもちろん、ブラウザバックによっても)