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