js如何實現在監測頁面關閉和重新整理事件
阿新 • • 發佈:2019-02-14
有一個需求,當用戶在頁面中進行重新整理和關閉頁面的時候顯示一個彈框提示使用者功能。
於是自己就想到onbeforeunload、onunload、onload這幾個事件,但是在使用的過程中有種心累的感覺。。。
onbeforeunload:在頁面重新整理和關閉的時候觸發事件,表示正要去伺服器讀 取新的頁面時呼叫,此時還沒開始讀取,
onunload:則已經從伺服器上讀到了需要載入的新的頁面,在即將替換掉當前頁面時呼叫。
onload就不用說了
onbrforeunload和onunload都會在重新整理和關閉頁面是觸發,但是onbeforeunload在onunload之前執行,並且它還可以阻止onunload的執行。那麼在頁面重新整理時執行順序就是onbeforeunload、onunload、onload
但是在使用的過程中,自己深深的踩了一個坑
首先是是相容性的問題:
正如你看到的菜鳥教程和w3c上的介紹是多麼的賞心悅目
但是現實總是殘酷的,onbeforeunload事件在ie和谷歌中都沒有問題,但是在火狐中卻沒有任何反應,程式碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="cookie.js"></script>
<script>
//這個在火狐下不起作用
window.onbeforeunload=function (e){
return "我在這寫點東西";
}
window.onunload=function(){
alert("離開")
}
window.onload=function(){
alert("載入完成");
}
</script>
</head>
<body>
</body>
</html>
onbeforeunload中的return是自定義提示資訊,並且如果沒有return在谷歌中是不會有反應,ie則不會出現這個情況。
onunload事件也只有在ie中才起作用,在其他瀏覽器中也沒有反應。
不知道哪位大神可以解答一下,怎麼解決這些問題(百度找了好多,都是一些沒有用的方法...)