ホームページ > 記事 > ウェブフロントエンド > JavaScript の onbeforeunload および onunload イベントについての簡単な説明_基礎知識
JavaScript の onbeforeunload および onunload イベントについての簡単な説明_基礎知識
- WBOYオリジナル
- 2016-05-16 15:26:221179ブラウズ
最近のプロジェクトでは、ユーザーがページを離れるときにページのコンテンツの一部をキャッシュする必要がありますが、ユーザーが更新するときにのみキャッシュする必要があります。ユーザーが退出する時間
この関数を実行します。 Baidu によると、イベントには onbeforeunload と onunload の 2 つがありますが、onbeforeunload はユーザーが更新したときにも実行されます。かなり時間がかかったので、ここで簡単にまとめたいと思います
onbeforeunload および onunload イベント
onbeforeunload の定義と使用法
onbeforeunload イベントは、現在のページが終了しようとしている (更新または閉じられる) ときにトリガーされます。
このイベントは、ページの閲覧を続けるか現在のページから離れるかをユーザーに尋ねるダイアログ ボックスをポップアップするために使用できます。
ダイアログ ボックスのデフォルトのプロンプト メッセージはブラウザによって異なります。標準のメッセージは「このページを閉じてもよろしいですか?」に似ています。この情報は削除できません。
ただし、一部のメッセージ プロンプトをカスタマイズして、標準情報とともにダイアログ ボックスに表示することができます。
注: 6c04bd5ca3fcae76e30b72ad730ca86d 要素で onbeforeunload イベントを指定しない場合は、window オブジェクトにイベントを追加し、returnValue 属性を使用してカスタム情報を作成する必要があります (次の構文例を参照)。
注: Firefox ブラウザでは、デフォルトのリマインダー情報のみが表示されます (カスタマイズされた情報は表示されません)。
使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body onbeforeunload="return test()">
</body>
<script type="text/javascript">
function test(){
return "你确定要离开吗";
}
</script>
</html>
または:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
return "你确定要离开吗";
}
</script>
</html>
イベントがトリガーされると、確認とキャンセルを示すダイアログ ボックスが表示されます。確認するとページを離れ、キャンセルするとこのページに留まり続けます。もちろん、プロンプトのテキストをカスタマイズすることもできます。
では、この関数を終了時にのみ実行する必要があり、更新時には実行する必要がない場合はどうすればよいでしょうか?
window.onbeforeunload = function() {
var n = window.event.screenX - window.screenLeft;
var b = n > document.documentElement.scrollWidth - 20;
if (!(b && window.event.clientY < 0 || window.event.altKey)) {
//window.event.returnValue = "真的要刷新页面么？";
//这里放置我想执行缓存的代码
cacheFunction();
}
}
この方法では、ページを離れるときにプロンプト ボックスを表示せずにキャッシュ コードを実行できます。更新してもプロンプト ボックスは表示されず、実行されません。現時点では、ajax を同期に設定する必要があることに注意してください。つまり、ajax の async を false に変更する必要があります。
ブラウザの互換性
IE、Chrome、Safari を完全にサポート
Firefox はテキスト リマインダー メッセージをサポートしていません
Opera は をサポートしていません
onbeforeunload の使用時に IE6 および IE7 で発生するバグ
2. Onunload の定義と使用法
onunload イベントは、ユーザーがページを終了すると発生します。使用法は onbeforeunload と同様です
window.onunload = function(){
return "你确定要离开吗"
}
ブラウザの互換性
IE6、IE7、IE8 では、ページを更新し、ブラウザを閉じ、ページにジャンプした後に実行されます。 IE9 はページの更新を実行しますが、ページのジャンプとブラウザの終了は実行されません。
firefox (firefox3.6 を含む) は、タグを閉じた後、ページジャンプ後、ページを更新した後に実行できますが、 を閉じた後は実行できません。
Safari はページの更新とページジャンプ後に実行されますが、ブラウザを閉じると実行されません。
Opera と Chrome はいかなる状況でも実行されません。
概要
onunload と onbeforeunload は、3f1c4e4b6b16bbbd69b2ee476dc4f83a スクリプトの window.onunload で指定するか、6c04bd5ca3fcae76e30b72ad730ca86d で指定することができます。違いは、onbeforeunload は onunload の前に実行され、onunload の実行を妨げることもできることです。Onbeforeunload は、ページが更新されるか閉じられるときにも呼び出されます。onbeforeunload は、サーバーにアクセスして新しいページを読み取るときに呼び出されますが、onunload がサーバーからロードする必要がある新しいページを読み取っている間はまだ読み取りが開始されていません。現在のページが削除されるときに呼び出されます。 onunload では、ページの更新と閉じを防ぐことはできません。そして onbeforeunload でそれが可能です。 Onload はページの読み込み時にのみ実行されます
ページが閉じられると、最初に onbeforeunload が実行され、最後に onunload が実行されます。
ページが更新されると、最初に onbeforeunload が実行され、次に onunload、最後に onload が実行されます。