監聽瀏覽器關閉事件，並且相容ie,ff,chrome
阿新 • • 發佈：2019-01-22
剛剛換了工作小組，小組哥們說有個煩人的功能，就是執行過程必須在瀏覽器這邊進行，但是使用者可能在執行過程中按F5或者關閉了瀏覽器，導致執行失敗！說到這個，我想起了在csdn的時候關閉瀏覽器有彈出詢問框的功能，於是百度和google監聽瀏覽器關閉監聽的方法，廢話不多說，直接上程式碼。
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>阻止關閉和重新整理</title> </head> <body> <script type="text/javascript"> window.addEventListener("beforeunload", listenClose, false); function unListen() { window.removeEventListener('beforeunload',listenClose, false); } function listenClose(e) { var confirmationMessage = '業務未執行完成，離開本頁面會導致執行失敗，是否現在離開？'; (e || window.event).returnValue = confirmationMessage; return confirmationMessage; } </script> <button id="" onclick="unListen()">解除關閉監聽</button> </body> </html>
原理很簡單，就是初始化頁面的時候增加一個關閉和重新整理的監聽彈窗，關閉或者重新整理時瀏覽器會執行 beforeunload 事件，具體原理百度很多，也可以參考這裡，這裡做下記錄，以便以後使用。