スマホブラウザでブラウザの閉じるイベント時に確認ダイアログを表示して画面遷移をキャンセルしたい。

Question

表題の「スマホブラウザでブラウザの閉じるイベント時に確認ダイアログを表示して画面遷移をキャンセルしたい。」ですが、
ページの離脱者に対してダイアログを出したいと考えておりますが、
mobile safariでbeforeunloadが使えない為に
pagehideにて実現しようと考えております。

###ソースコード

window.addEventListener("pagehide", function(){
	if( confirm("ページを移動しても良いですか？") == false ) return false;
});

上記のようなコードを発行したのですが、
キャンセル時も画面遷移が起こってしまいます。
これをキャンセルが押された時は何もしないという形にしたいのですが、
そもそものaddEventListenerを止めるものなのでしょうか？

お手数をお掛けいたしますが何卒よろしくお願い致します。

Answer 1

window.onpagehide に直接イベントハンドラ設定で動作するようですね。

http://d.hatena.ne.jp/nextliteracy/20120224/1386412788

http://www.greenspace.info/mt/2008/05/07/prototypejs_saf.html

Comments

[memo]

ご回答ありがとう御座います。
URLのページを拝見させて頂きましたが、
私の理解が足らないようで申し訳有りません。
hatenaのほうは古い記事との記載がありまして「iOS7もしくはそれ以前の情報です」との事でして、
prototype.jsのほうはもっと古いようなので手を出しておりません。。。

下記のスクリプトで「//キャンセルの場合」のところを完全に停止をしたいのですが、画面遷移が起きてしまう状況です。
```javascript
window.addEventListener("pagehide", function(){
ar = confirm("ページを移動しても良いですか？");
if(ar == true){
//OKの場合
return true;
}else{
//キャンセルの場合
return false;
}
}, false);
```
hatenaのほうで
>Safariのプロセスを一旦殺す必要あり。
との記載が有りましたがこのようなものを実行するという認識で間違いないでしょうか？
お手数をお掛けいたしますが何卒よろしくお願い致します。

[ipadcaron]

整理しますが、pagehide イベントハンドラ内で confirm を実行する例を示したhpを教えてください。
pagehide も、onbeforeunload も、どちらも文字列を返す仕様です。
ページ遷移するか、このページに留まるかを判断するダイアログボックスはブラウザが出すものだと思いますが、confirm でオリジナルメッセージで出したい気持ちはわかりますが、何よりまず先にやるべきことは、ページ遷移させないことであり、confirm による独自メッセージとok/cancelのぽっぷあっぷは二の次ですね。

addeventkistener のイベントハンドラは、引数を取ります。なぜ書かないのですか。
引数のイベントオブジェクトをダンプしてみましたか。
わたしが提示したurl にも addeventlistener の例がありますが、イベントハンドラを直接書いたらうまく動いたが、オリジナルのイベントを上書きするのは汚いから最後の手段だ、とか書いてあったはずです。
とりあえず、手段は問わずもくてきの動作に近い動きをする記述方法を見つけます。
addeventリスナーとか使うのは後回し。なので、れがしな書き方だと、
window.onpageshide でshぷかね。

[memo]

ご回答ありがとう御座います。

>整理しますが、pagehide イベントハンドラ内で confirm を実行する例を示したhpを教えてください。
こちらについてはHPはなくpagehideにてページをリロードした事などを受け取ることが出来るとの事でしたのでconfirmすれば解決出来ると考えたからです。

>何よりまず先にやるべきことは、ページ遷移させないことであり
仰るとおりまずはページ遷移させないことですね。
PageTransitionEventがキャンセル出来ないとなるとそもそもpagehideでは出来ない事だという認識で合ってますでしょうか？

>addeventkistener のイベントハンドラは、引数を取ります。なぜ書かないのですか。
function(e)のような形の事で認識は合ってますでしょうか？

>引数のイベントオブジェクトをダンプしてみましたか。
console.log(e);やらalert(e);ではやっておりますが、
結果がPageTransitionEvent {isTrusted: true}や「object　PageTransitionEvent」と出ます。

>わたしが提示したurl にも addeventlistener の例がありますが、イベントハンドラを直接書いたらうまく動いたが、オリジナルのイベントを上書きするのは汚いから最後の手段だ、とか書いてあったはずです。
とりあえず、手段は問わずもくてきの動作に近い動きをする記述方法を見つけます。
addeventリスナーとか使うのは後回し。なので、れがしな書き方だと、
window.onpageshide でshぷかね。
汚い書き方とはこういう形でしょうか？return部分表示はされませんでした。
```javascript
window.onpagehide = function(e) {
return e.returnValue = 'ほんとに閉じてよいですか？';
console.log(e);
};
```

お手数をお掛けいたしますが何卒よろしくお願いいたします。

[ipadcaron]

http://7cc.hatenadiary.jp/entry/onload
色々しらべてみました。1件だけurl 載せて色々は嘘だろ、と思うかもしれませんが。

addeventlistener でも window.onhidepage でもいいけど、閉じる画面が子画面、メイン画面から別起動されたタブの場合にのみ、閉じた時に親側で通知を検出できると。
なんじゃそりゃ?て感じです。
なので、pagehide は閉じるかどうかを聞けるタイミングではなくて既に閉じた後なので現状維持はムリぽのようです。
通常のウェブシステムとしては複数タブ構成で画面を構成することは極めて稀なので、仮に2タブ構成のシステムにしたところで、ポップアップブロックで起動失敗とか、ポップアップした本当の画面を閉じないで親を先に閉じられて結局子タブのpagehideが動作しない、とか、なんだか問題だらけです。

[memo]

ご回答ありがとう御座います。

>pagehide は閉じるかどうかを聞けるタイミングではなくて既に閉じた後なので現状維持はムリぽのようです。
なるほどです、言われてみれば既に一度閉じた後にイベント発火しているようですね。。。

同じことを考えている御方も居ましたがやはりキャンセル自体は難しいようですね。
http://kimizuka.hatenablog.com/entry/2015/09/29/130129

iPhopneでのアクセスが多いものでして、出来たらと考えましたが。。。
スパム認定されそうですが、あとは通常仕様とは異なるものを組み合わせて偶然の産物を探すしかなさそうですね。

ご回答ありがとう御座いました。

Answer 2

ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる
このそのままですが、下記のコードで実現できます。

window.onbeforeunload = function(){
  return "本当に離れますか？";
}

Comments

[memo]

ご返信遅くなってしまい大変申し訳御座いません。
ご連絡ありがとう御座います。
iOS Safariだとこれが利用できないのです。
出来ればiPhoneにも対応出来るコードで有りますと幸いです。

[jser]

無理です。
閉じる行為がキャンセル可能なのはbeforeunloadだけです。