ページを離れる前のJavaScript

233

ユーザーがページを離れる前に確認したい。彼がOKと言った場合、新しいページにリダイレクトするか、キャンセルして終了します。onunloadで作ってみました

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

しかし、それはページがすでに閉じられた後に確認しますか？それを正しく行う方法は？

誰かがjQueryでそれを行う方法を示したらもっといいでしょう？

javascript  jquery 
— kd7
ソース
1
ハハハハ…はい、それは全く正しいです。しかし幸いにもそれは私のサイトではありません...私のクライアントは彼の側でそれをするように頼みます
— kd7
25
そうですが、保存されていないGmailページを終了しようとすると、これらのアラートが表示されて本当にうれしいです。
— Etdashou
唯一のデフォルトのメッセージが代わりにカスタムメッセージを表示されているのFirefox 4+に注意、developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes
— baptx
4
— Wasim A.

回答:

352

onunload（またはonbeforeunload）ユーザーを別のページにリダイレクトできません。これはセキュリティ上の理由によるものです。

ユーザーがページを離れる前にプロンプ​​トを表示したい場合は、次を使用しますonbeforeunload。

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

またはjQueryで：

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

これは、ユーザーにページを離れるかどうかを尋ねるだけであり、ページに留まることを選択した場合はリダイレクトできません。彼らが去ることを選択した場合、ブラウザは彼らが行くように言ったところに行きます。

を使用onunloadして、ページがアンロードされる前に何かを行うことができますが、そこからリダイレクトすることはできません（Chrome 14以降は内部のアラートをブロックしますonunload）。

window.onunload = function() {
    alert('Bye.');
}

またはjQueryで：

$(window).unload(function(){
  alert('Bye.');
});
— ロケット防護
ソース
12
@ジョセフ：から文字列を返すonbeforeunloadと、ブラウザはその文字列を独自の確認ボックスに入れます。およびでconfirmはを使用しても意味がありません。ブラウザでは制御でき、ユーザーでは制御できません。このデモを確認してください：jsfiddle.net/3kvAConunloadonbeforeunload
— Rocket Hazmat
7
ただ、ノート、あなたは条件付きでメッセージを表示する場合はonbeforeunload、return falseダイアログでブラウザショー「false」になります。return undefinedユーザーに警告せずにウィンドウを閉じる場合は、これを行う必要があります。
— Dan Fitch
5
@Adam：Firefoxはそのメッセージのカスタマイズを許可しないことにしました。これはブラウザの一部なので、その動作をオーバーライドすることはできません。他のブラウザもメッセージをカスタマイズする機能を削除している可能性があります。参照：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/...
— ロケット危険物
8
@RocketHazmat Chromeにもあります。それは今言うだけです：このサイトを離れますか？行った変更は保存されない場合があります。
— programmer5000
6
@ programmer5000それの良いいくつかの悪意のあるウェブサイトは（「あなたはあなたの銀行情報を与えることなく残すことはできません」など）いくつかの役に立たない警告を表示することができますので、
— ナマン
34

このコードは、フォームの状態の変化も検出した場合。

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Google JQuery Form Serialize関数を使用すると、すべてのフォーム入力が収集され、配列に保存されます。これで十分だと思います:)

— Wasim A.
ソース
これが機能しない理由は何ですか？他のjs関数/ jqueryプラグインによって上書きされる可能性はありますか？私はwebrtcアプリを実行していますが、クライアントがウィンドウを閉じたときに何かを「閉じる」ので、ウィンドウを閉じる必要があります。
— ちょっと
1
これは、他のプラグインなどによって上書きされる可能性があります。ほとんどの場合、開発者がセレクターを誤って作成しました。上書きについて疑われる場合は、jbodyコードを</ body>タグの前に配置してください。
— Wasim A. 2014
はい...ページが読み込まれた後に入力フィールドを非表示または無効にするJSコードがある場合、チェックを実行して非表示/無効フィールドを比較すると、シリアル化されません。もちろんチェックは失敗します。;）この回避策があります：stackoverflow.com/a/4748748/114029
— Leniel Maccaferri 2014
ところで...ここにもっと良い方法があります：stackoverflow.com/q/16322042/114029
— Leniel Maccaferri 2014
1
これは、送信ボタンを押したときにも警告が表示されることに注意してください。これを防ぐために、送信ボタンをクリックしてフォームを再度シリアル化することができます。
— Adam
19

現在のページを離れると警告が表示されます

<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>
— アジット・シン
ソース
14

これは、データを保存していないときに確認メッセージを表示するために行ったことです

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

「未定義」を返すと確認が無効になります

注：「null」を返すとIEでは機能しません

また、「未定義」を使用して確認を無効にすることもできます

window.onbeforeunload = undefined;
— ミナ・マッタ
ソース
11

Chrome 14以降でpopopを使用するには、次の操作を行う必要があります。

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

ユーザーは、滞在するか去るかを尋ねられます。

— デビッド・ベランガー
ソース
なぜこれが機能しないのですか？私は一連のjqueryプラグインとともにchrome（最新バージョン）を使用していますが、ウィンドウを閉じてもアラートが表示されません。
— ちょっと
@ねえなぜ反対票？動作しています...がの外にあることを確認する必要がありjQuery(document)ます。すべてのプラグインがロードされた直後に配置することをお勧めします。また、このスニペットは何の警告もしません...それはのデモにすぎませんreturn。
— DavidBélanger2014
7

次のワンライナーを使用して、ページを離れる前に常にユーザーに尋ねることができます。

window.onbeforeunload = s => "";

ページ上の何かが変更されたときにユーザーに尋ねるには、この回答を参照してください。

— spencer.sm
ソース
これは、ページを更新したり、終了したりした場合にも発生しますか？
— Si8 2017年
はい、更新または終了時に起動します。
— spencer.sm 2017年
とにかく、それがいつ更新されるのか、初めてなのかを知る方法はありますか？
— Si8、2017年
ユーザーがページを更新するのではなく、ユーザーが初めてページにアクセスしたとき。
— Si8、2017年
大野。これは、ユーザーが初めてページにアクセスしたときに発生しません。ページを閉じる、変更する、または更新する場合のみ。
— spencer.sm 2017年
4

通常、ユーザーがフォームに変更を加えたが保存されていない場合に、このメッセージを表示します。

ユーザーが何かを変更した場合にのみ、このアプローチでメッセージを表示します

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}
— サイモン・フランゼン
ソース
1

もう少し役立つ、有効化と無効化

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');
— l2aelba
ソース
1

ここでのほとんどの解決策は私にとってはうまくいかなかったので、私はここで見つけたものを使用しました

確認ボックスを許可するかどうかを指定する変数も追加しました

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});
— ラージシャルマ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.