javascript監聽頁面重新整理和頁面關閉事件方法詳解
阿新 • • 發佈：2018-11-06
在我們的日常生活中，時常遇到這麼一種情況，當我們在點選一個連結、關閉頁面、表單提交時等情況，會提示我們是否確認該操作等資訊。
這裡就給大家講講javascript的onbeforeunload()和onunload()兩個事件。
相同點:
兩者都是在對頁面的關閉或重新整理事件作個操作。
不同點：
- unbeforeunload（）事件執行的順序在onunload()事件之前發生。(因為，unbeforeunload()是在頁面重新整理之前觸發的事件，而onubload()是在頁面關閉之後才會觸發的)。
- unbeforeunload（）事件可以禁止onunload()事件的觸發。
- onunload()事件是無法阻止頁面關閉的。
- 瀏覽器的相容
-
onunload:
-
IE6，IE7，IE8 中 重新整理頁面、關閉瀏覽器之後、頁面跳轉之後都會執行；
-
IE9 重新整理頁面 會執行，頁面跳轉、關閉瀏覽器不能執行；
-
firefox(包括firefox3.6) 關閉標籤之後、頁面跳轉之後、重新整理頁面之後能執行，但關閉瀏覽器不能執行；
-
Safari 重新整理頁面、頁面跳轉之後會執行，但關閉瀏覽器不能執行；
-
Opera、Chrome 任何情況都不執行。
- onbeforeunload:
-
IE、Chrome、Safari 完美支援
-
Firefox 不支援文字提醒資訊
-
Opera 不支援
- IE6,IE7會出現bug
示例程式碼:
onbeforeunload()：
方式一:html元素中新增
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body onbeforeunload="return myFunction()"> 8 9 <p>該例項演示瞭如何向 body 元素新增 "onbeforeunload" 事件。</p> 10 <p>關閉當前視窗，按下 F5 或點選以下連結觸發 onbeforeunload 事件。</p> 11 <a href="http://www.qqtimezone.top">部落格地址</a> 12 <script> 13 function myFunction() { 14 return "自定義內容"; 15 } 16 </script> 17 18 </body> 19 </html>
方式二:javascript中新增
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鳥教程(runoob.com)</title>
6 </head>
7 <body>
8
9 <p>該例項演示瞭如何使用 HTML DOM 向 body 元素新增 "onbeforeunload" 事件。</p>
10 <p>關閉當前視窗，按下 F5 或點選以下連結觸發 onbeforeunload 事件。</p>
11 <a href="http://www.runoob.com">點選調整到菜鳥教程</a>
12 <script>
13 window.onbeforeunload = function(event) {
14 event.returnValue = "我在這寫點東西...";
15 };
16 </script>
17
18 </body>
19 </html>方式三:新增addEventListener()事件(不過此方法IE8以下不支援)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8
9 <p>該例項演示瞭如何使用 addEventListener() 方法向 body 元素新增 "onbeforeunload" 事件。</p>
10 <p>關閉當前視窗，按下 F5 或點選以下連結觸發 onbeforeunload 事件。</p>
11 <a href="http://www.qqtimezone.top">跳轉地址</a>
12 <script>
13 window.addEventListener("beforeunload", function(event) {
14 event.returnValue = "我在這寫點東西...";
15 });
16 </script>
17
18 </body>
19 </html>onunload():
方式一：html元素中新增
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript">
6 function fun() {
7 // dosomethings
8 }
9 </script>
10 </head>
11 <body onunload="fun()">
12
13 </body>
14 </html>方式二：javascript新增
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title></title>
6 <script type="text/javascript">
7 window.onunload = function() {
8 // dosomethings
9 };
10 </script>
11 </head>
12
13 <body>
14 </body>
15
16 </html>