# 如何讓頁面刷新前執行一段js動作? ###### tags: `前端` `前端資源` ### 簡介 `onunload，onbeforeunload`都是在刷新或關閉時調用，可以在`<script>`腳本中通過`window.onunload`來調用。區別在於`onbeforeunload在onunload`之前執行，它還可以阻止`onunload`的執行。 `onbeforeunload` 是正要去服務器讀取新的頁面時調用，此時還沒開始讀取；而`onunload`則已經從服務器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調用。 使用body的[unload](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/unload_event)事件，例如： ``` <body onload="f1()" onunload="f()"> ``` ### 瀏覽器兼容情況 * IE瀏覽器頁面跳轉、刷新頁面能執行，但關閉瀏覽器不能執行； * firefox 頁面跳轉能執行，但刷新頁面、關閉瀏覽器不能執行； * Safari 刷新頁面、頁面跳轉，關閉瀏覽器都會執行； * Opera、Chrome任何情況都不執行。 #### 如圖所示： ![](https://i.imgur.com/eSeesfC.png) 大體一句話描述：IE, Firefox, 和Safari 支持onunload 事件, 但是Chrome 或者Opera 不支持該事件。 ### [HostListener](https://v6.angular.cn/api/core/HostListener) 把一个事件绑定到一个宿主监听器，并提供配置元数据。 当宿主元素发出特定的事件时，Angular 就会执行所提供的处理器方法，并使用其结果更新所绑定到的元素。 如果该事件处理器返回 false，则在所绑定的元素上执行 preventDefault。 #### 使用说明 下面的例子声明了一个指令，它会为按钮附加一个 click 监听器，并统计点击次数 ``` @Directive({selector: 'button[counting]'}) class CountClicks { numberOfClicks = 0; @HostListener('click', ['$event.target']) onClick(btn) { console.log('button', btn, 'number of clicks:', this.numberOfClicks++); } } @Component({ selector: 'app', template: '<button counting>Increment</button>', }) class App {} ``` ![](https://i.imgur.com/AGhKzVe.jpg) 收錄一下查到的資料 * [js刷新页面之前弹出提示](https://blog.csdn.net/xm_w_xm/article/details/88530494) * [如何让页面刷新前执行一段js代码](https://blog.csdn.net/qq_26625037/article/details/52095425?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.pc_relevant_paycolumn_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.pc_relevant_paycolumn_v2&utm_relevant_index=13) * [window-onbeforeunload的使用](https://blog.csdn.net/weixin_41697143/article/details/104820998) * [onbeforeunload 事件](https://www.runoob.com/jsref/event-onbeforeunload.html) * [监听浏览器刷新及关闭](https://segmentfault.com/a/1190000019305127) * [window.onbeforeunload](https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload) * [JS基礎篇--JS之onunload、onbeforeunload事件詳解](https://segmentfault.com/a/1190000011851736) * [javascript事件基礎--頁面事件(loade、DOMContentLoaded 、unload)](https://www.twblogs.net/a/5c9c0d11bd9eee7523882b19) * [Angular刷新當前頁面的幾種方法](https://www.itread01.com/content/1545737099.html) * [How to reload a page/component in Angular?](https://www.cloudhadoop.com/angular-reload-component/) * [如何防止以角度 4 刷新頁面](https://stackoverflow.com/questions/47331260/how-to-prevent-page-refresh-in-angular-4/55470623#55470623) * [刷新範例](https://stackblitz.com/edit/angular-page-reload)