项目场景：

需求：用户手动关闭浏览器需要提示，但是代码自动触发的关闭不提示

逻辑实现

mounted() {window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
},
destroyed() {window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e));
},
methods: {beforeunloadHandler(e) {if (this.$route.name == 'learn_plan_exam' && this.showCloseTip) {e = e || window.event;// 兼容IE8和Firefox 4之前的版本if (e) {e.returnValue = '关闭提示';}// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+return '关闭提示';} else {window.onbeforeunload = null;}},
}

showCloseTip: 是控制需不需要弹框的值

问题：

测试说：他关闭时没有任何提示

解决方案：

经过多次验证我发现代码逻辑并没有问题，出现这个问题的原因是：

1、在IE中这个事件只要去关闭窗口就触发。

2、谷歌、火狐等在F12调试模式中也会起效

3、谷歌、火狐、edge等浏览器中被优化了，需要用户在页面有过任何操作才会出现提示！

注意第三点一定要用户在自己的页面进行过操作，事件才会生效。。。

监听浏览器窗口关闭onbeforeunload不起作用的原因相关推荐

巨坑！监听浏览器窗口关闭onbeforeunload不起作用（脱坑了啊！！）
----------------重要通知-------------- Hello,本人的博客文章已更新至个人网站(www.jonexu.cn) 文章中有问题可以到网站联系博主,后续新的文章也将更新在个 ...
vue 全局监听浏览器窗口关闭以及无痕模式场景提示
需求场景一:用户退出时清空localStorage并告知后台用户退出,保持登录状态时关闭窗口或者浏览器达到相同目的实现: // 在mounted中触发beforeunload事件以及在destroy ...
监听浏览器窗口关闭事件onbeforeunload不起作用
先贴代码 <body><! ...
[轉]Flash/Flex监听浏览器的关闭事件
FROM : http://blog.ityao.com/archives/581 如果想用Flash/Flex监听浏览器的关闭事件, 可以通过JavaScript的window.onbeforeun ...
监听浏览器刷新/关闭页面
首先,使用onunload或onbeforeunload可以监听浏览器关闭事件,但是无法区分关闭与刷新.以下js代码可以部分监听关闭浏览器的事件! 可以在标签中添加方法: <!DOCTYPE h ...
【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...
用jQuery监听浏览器窗口的变化
1 $(window).resize(function () { //当浏览器大小变化时 2 alert($(window).height()); //浏览器时下窗口可视区域高度 3 alert($( ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...

监听浏览器窗口关闭onbeforeunload不起作用的原因

项目场景：

逻辑实现

问题：

解决方案：

监听浏览器窗口关闭onbeforeunload不起作用的原因相关推荐

最新文章

热门文章