onbeforeunload 離開或重新整理頁面的提示
阿新 • • 發佈：2018-11-09
onbeforeunload 離開或重新整理頁面的提示
例項
在即將離開當前頁面(重新整理或關閉)時執行 JavaScript :
<body onbeforeunload="return myFunction()">
定義和用法
onbeforeunload 事件在即將離開當前頁面（重新整理或關閉）時觸發。
該事件可用於彈出對話方塊，提示使用者是繼續瀏覽頁面還是離開當前頁面。
對話方塊預設的提示資訊根據不同的瀏覽器有所不同
但你可以自定義一些訊息提示與標準資訊一起顯示在對話方塊。
注意 ： 在 Firefox 瀏覽器中，只顯示預設提醒資訊（不顯示自定義資訊）
注意 ： 如果你沒有在 元素上指定 onbeforeunload 事件，則需要在 window 物件上新增事件，並使用 returnValue 屬性建立自定義資訊(檢視以下語法例項)。
使用
JS方法
<html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <p>測試離開頁面提示</p> </body> <script type="text/javascript"> window.onbeforeunload=function(){ return "浩哥你確定要離開嗎"; } </script> </html>
根據瀏覽器的不同浩哥可能不會出現。
React中
一般在專案中直接使用window或者body會導致整個專案的頁面的重新整理關閉事件都被攔截。
想在某個頁面中使用這個攔截的大體思路是在進入這個頁面的時候掛載該事件，跳轉頁面的時候將掛載的事件取消。
componentDidMount() { window.onbeforeunload = function(e){ e = e || window.event; if(e){ e.returnValue = '浩哥的關閉提示' } return '浩哥的關閉提示' } } componentWillUnmount() { window.onbeforeunload = undefined // 元件解除安裝時一般清理一些狀態 }
浩哥也不一定提示