web-dev-qa-db-ja.com

jQuery beforeunloadカスタムポップアップウィンドウでページを離れる

こんにちは、ページを残すためにポップアップをカスタマイズしたいのですが、それを行う簡単な方法はありますか？

シンプルなjQueryを使用しています

$(document).ready(function() {
    var myPopUp = $('#pop-up').css('display', 'block');
    $(window).bind('beforeunload', function(){
      return 'load my pop up here instead of the default browser message';
    });
});

ポップアップ用の私のHTMLはデフォルトで非表示になっています

<div id="pop-up">
  <h2>Are you sure wanna leave</h2>
  <a href="#">Leave</a>
  <a href="#" class="close">Stay</a>
</div>

ありがとう

javascriptjquerypopuponbeforeunload
32
dikei

短い答え：できません。

より長い回答：かなり明白な「セキュリティ」の理由から、ユーザーがページから移動したり、タブを閉じたり、その他の方法でサイトを離れようとしたときにできることは非常に限られています。

その理由は、ブラウザがユーザーがタブまたはウィンドウを閉じるのを防ぐことができないことを絶対に確認したいからですwantsを閉じます。

したがって、onbeforeunload javascriptイベント（および拡張によりbeforeunload jQueryイベント）は、実行できる機能が非常に制限されます。彼らが間違いなくcannotすることの1つは、ブラウザが（通常）許可する非常に標準化されたかなり退屈な方法を使用することを除いて、ページが閉じないようにすることです。

一部のブラウザではメッセージを指定できますが、他のブラウザ（firefoxを含む）ではメッセージを変更することさえできません（「お子さんを養子にできますか？」変更できない標準メッセージに、選択した文字列initionを指定します。一部のブラウザ（主要なデスクトップブラウザはありません）では、イベントが完全に欠けています。

あなたが達成したいのは、基本的にユーザーにあなたのページにとどまることを強制し、確認するよう求めるニースポップアップを表示することです...これは間違いなく多くの場合にユーザーエクスペリエンスを改善する可能性がありますが、ユーザーが退去することを単に許可しないように悪用される可能性があることを想像するのは非常に難しいと考えなければなりません。

戻るボタンを壊すサイトがどれほど迷惑かを考えて、タブを閉じる機能を削除できると想像してください！

私は this に少しつまらないものさえも防止しようとして膨大な時間を費やしたユーザーからのかなり面白いフォーラム質問につまずいたcanを追加-短い抜粋：

Onunloadとonbeforeunloadは好きではありません。私は、Firefoxのインストールでそれらが決して解雇されるべきではないと思います。これらのイベントの有用な応用はないと思います。慈善家でさえ「あなたは未保存の仕事をしました！」ポップアップ。 WebブラウザにWebページを閉じるように指示するとき、Webページがブラウザを閉じるのを防ぐ（または遅らせる）ことは望ましくありません。

そして、少し公式な情報を少し追加するだけです。

mozilla.org： WindowEventHandlers.onbeforeunload ：

2011年5月25日以降、HTML5仕様では、このイベント中はwindow.alert（）、window.confirm（）、およびwindow.Prompt（）メソッドの呼び出しを無視できると規定されています。詳細については、HTML5仕様を参照してください。

38
Mikk3lRo

この質問は、次のようないくつかのstackoverflowの投稿で質問され回答されました one

「ページ」を離れる状況について詳しく説明できれば、おそらくより適切な答えが得られるでしょう。ユーザーに保存する前に警告する場合は、リンクの一番上の投稿をチェックアウトしてください。ページを離れる前に警告したい場合は、このユーザーHunterの回答を残してください：

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>
5
lifejuggler

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility

カスタムポップアップに指定されたリンクを表示させることはできません

1
kishore kingmaker