スマホで更新を検知する方法について

Question

JavaScriptを用いた更新検知について、お聞きしたいことがあります。
以下のブラウザの更新を検知し確認アラートを表示するの為の処理なのですが、スマホ(Chrome,safari)の場合、更新前に確認アラートを表示することが出来ませんでした。

 window.addEventListener('beforeunload', function(e){
        /** 更新される直前の処理 */
        var message = '本当に更新してよろしいですか？';
        e.returnValue = message;
        console.log('beforeunload')
        return message;
      });

調べてみた所、こちらの記事がヒットしたのですが、IOSはbeforeunloadイベントを呼び出せないとのことでした。
スマホ(IOS)で更新を検知し、アラートを表示する方法はないでしょうか。
ご助言頂けたら幸いです。

Answer 1

ご連携頂いている記事にあります通りpagehideで検知可能でございます。
ios判定を事前に行いまして下記処理を追加する形でいかがでしょうか？

window.addEventListener("pagehide", ファンクション内容);

Comments

[jjj001]

ご回答ありがとうございます。
「pagehide」こちら見落としておりました。
IOSの場合、リンクをタップした際にも、検知されてしまうみたいなのですが、仕様上問題がないか一度、実装して検証してみたいと存じます。

[jjj001]

以下のコードで検証してみたのですが、アラートを表示させる事は出来ませんでした。
window.addEventListener("pagehige",function(){
alert("hide!!");
},false);

[m2l]

ご確認ありがとうございます。
今イベントをconsole.logで追ってみたのですが、イベント自体は発火されてましてalertが効いていないようです。
beforeunloadで実装されている、下記の処理をイベントの中に入れても上手く動いていない様子でしょうか？

var message = '本当に更新してよろしいですか？';
e.returnValue = message;
console.log('beforeunload')
return message;

[jjj001]

ご助言ありがとうございます。
以下の形で試してみましたが、コンソールには何も表示されませんでした...
window.addEventListener("pagehide",function(e){
var message = '本当に更新してよろしいですか？'
e.returnValue = message
console.log('beforeunload')
return message
},false)

[jjj001]

すみません！
今、確認してみましたら、console.log('beforeunload')こちらの部分が出力されていました！

[jjj001]

あ、いえ...
PCブラウザのFireFoxでは出力出来ていたのですが、IPhoneのChromeでは、console.logの中身は表示されていませんでした...