Web 開発を行う場合、このブログ エディターのように、ページを閉じるイベント onbeforeunload をよく使用します。これにより、ユーザーに閉じるのを諦めるかどうかを選択する機会を与えることができます。ユーザーが終了することを選択した場合、onunload イベントは自然にトリガーされますが、ユーザーがキャンセルを選択した場合、それを検出するにはどうすればよいでしょうか。
ページが onunloadcancel と呼ばれるキャンセル イベントを残すと仮定します。明らかに、このイベントは、ユーザーがダイアログの「キャンセル」ボタンを押した後に発生する必要があります。ただし、プロンプト ダイアログ ボックスを閉じるトリガー プロセスはそれほど単純ではありません。まずプロセスを確認してみましょう。
次のようにコードをコピーします。
window.onbeforeunload = function()
{
return "本当に出発しますか?";
}
ユーザーがページを離れる準備ができたとき (閉じるボタンを押す、ページを更新するなど)、onbeforeunload イベントがトリガーされます。このイベントでページが閉じられないようにするかどうかをスクリプトで決定することはできません。この文字列は、閉じる選択ダイアログ ボックスに説明テキストとして表示されるだけです。ユーザーは閉じるか閉じないかを選択できます。 。しかし、どれを選択すればよいのか、私たちには知る由もありません。
しかし、この問題を注意深く分析してみると、実際にはそうではありません。 ユーザーが実際にページを閉じることを選択した場合、実行中のコードはすべて消え、ユーザーがページに留まり続けると、onbeforeunload イベントを除いて何も起こらなかったかのように扱われます。したがって、onbeforeunload イベントでちょっとした工夫をして、数ミリ秒後に開始するタイマーをここに登録します。ページが実際に閉じられている場合、もちろんタイマーは無効になり、ページはまだ存在します。この本質的に非同期のインターフェイス対話イベントにはエラーはありません。
次のようにコードをコピーします。
<スクリプト言語="JavaScript">
window.onbeforeunload = function()
{
setTimeout(onunloadcancel, 10);
return "本当に出発しますか?";
}
window.onunloadcancel = function()
{
alert("退出をキャンセル");
}
</script>
setTimeout を使用し、10ms 遅延して onunloadcancel を実行します。ページが実際に閉じられた場合、タイマーは当然破棄されます。そうでない場合は続行されます。しかし、テスト中に、FireFox には 2 つのバグがあることが判明しました。
閉じるボタンを押すと、onunloadcancel も実行され、ダイアログ ボックスが点滅する場合があります。 while(1); に変更すると、ブラウザはスタックしたままになります。つまり、onunloadcancel は実際に実行されますが、インターフェイスが破棄されるだけで、スクリプトの実行は一時停止されません。
ページを更新して離れるとonbeforeunloadは1回だけ実行されますが、×ボタンをクリックしてページを閉じるとonbeforeunloadが2回実行されます。したがって、FFと互換性を持たせるためにはまだ改善する必要があります。
次のようにコードをコピーします。
<スクリプト言語="JavaScript">
var_t;
window.onbeforeunload = function()
{
setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
return "本当に出発しますか?";
}
window.onunloadcancel = function()
{
クリアタイムアウト(_t);
alert("退出をキャンセル");
}
</script>
ここでは理由を説明できない方法が使用されていますが、FF のバグを解決するためのハックと考えるべきです。