网址与网站的区别,聚宝汇 网站建设,上海广告公司招聘信息,罗湖做网站公司排名vue实现浏览器关闭或刷新弹窗提示 一、推荐代码二、错误情况说明1.在beforeunload事件里面加alert2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗3.无法触发destroyed/beforedestroyed/deactivated4.能触发beforeRouteEnter#xff0c;但不能触发beforeR… vue实现浏览器关闭或刷新弹窗提示 一、推荐代码二、错误情况说明1.在beforeunload事件里面加alert2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗3.无法触发destroyed/beforedestroyed/deactivated4.能触发beforeRouteEnter但不能触发beforeRouteUpdate、beforeRouteLeave vue实现浏览器关闭或刷新弹窗提示 也可以在时候强制保存记录或执行其他操作。
一、推荐代码
export default {data () {return {}},mounted() {window.addEventListener(beforeunload, e this.beforeUnloadHandler(e))window.addEventListener(unload, e this.unloadHandler(e))},destroyed() {window.removeEventListener(beforeunload, e this.beforeUnloadHandler(e))window.removeEventListener(unload, e this.unloadHandler(e))},methods: {beforeUnloadHandler(e) {e.returnValue 确定离开页面吗;return ;},unloadHandler(e) {e.returnValue 确定离开页面吗;return ;}}
}代码说明 有些浏览器会限制在 beforeunload 事件中触发 alertconfirm 或 prompt 等弹出式的用户交互。这是为了防止滥用这些弹窗干扰用户的操作。 虽然在 beforeunload 事件中弹出这些窗口通常被浏览器禁止但你仍然可以在这个事件中修改 event.returnValue 的值来显示一个提示给用户。但这种方式无法自定义内容只能显示浏览器默认的文本。
beforeunload 事件在即将离开当前页面刷新或关闭时触发。 unload 事件在即将离开当前页面刷新或关闭时触发。
二、错误情况说明
1.在beforeunload事件里面加alert
代码
window.onbeforeonload function(){
window.alert(A);
}报错 Blocked alert() during beforeunload.
2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗
报错 Blocked attempt to show a beforeunload confirmation panel for a frame that never had... 说明 用户有操作了点击界面后再刷新/关闭窗口才会触发。
3.无法触发destroyed/beforedestroyed/deactivated
原因keepAlive设置为true时 不会触发beforedestroyeddestroyed等方法 而且deactivated 钩子在使用 keep-alive 组件缓存时触发而页面刷新会清除所有的缓存所以在这种情况下deactivated 钩子也不会执行。
4.能触发beforeRouteEnter但不能触发beforeRouteUpdate、beforeRouteLeave
原因
beforeRouteEnter在进入该路由前被调用通常用于在组件渲染前获取数据等操作。beforeRouteUpdate在当前路由改变但是该组件被复用时调用。beforeRouteLeave在离开当前路由时被调用。
如果 beforeRouteEnter 能够触发而其他两个却无法触发可能是因为路由的变化并不会触发组件的重新渲染而是进行了复用。beforeRouteUpdate 和 beforeRouteLeave 都是针对组件复用时触发的。
