javascript監聽頁面刷新和頁面關閉事件方法詳解
- 高洛峰原創
- 2017-01-10 09:30:594364瀏覽
在我們的日常生活中，時常遇到這麼一種情況，當我們在點擊一個連結、關閉頁面、表單提交時等情況，會提示我們是否確認該操作等資訊。
這裡就跟大家講講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 不支援．
onbeforeunload() ：
方式一:html元素中加入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onbeforeunload="return myFunction()">
<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">博客地址</a>
<script>
function myFunction() {
return "自定义内容";
}
</script>
</body>
</html>
方式二:javascript新增
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.runoob.com">点击调整到菜鸟教程</a>
<script>
window.onbeforeunload = function(event) {
event.returnValue = "我在这写点东西...";
};
</script>
</body>
</html>
方式三:新增addEventListener()事件(不過此方法IE8以下不支援):
方式一：html元素中添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">跳转地址</a>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "我在这写点东西...";
});
</script>
</body>
</html>
方式二：javascript添加
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun() {
// dosomethings
}
</script>
</head>
<body onunload="fun()">
</body>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，幫助同時也希望多多支援PHP中文網！
更多javascript監聽頁面刷新和頁面關閉事件方法詳解相關文章請關注PHP中文網！