浏览器的刷新、关闭事件监听

2023-03-14 02:18| 来源: 网络整理| 查看: 265

监听浏览器关闭事件，实现在刷新时或者浏览器关闭前我们可以写一些业务逻辑

需求一：当浏览器出现二者其一状态时，主动关闭websocket链接

实现方式：

主要是利用两个API: document.onvisibilitychange 和 window.onbeforeunload

visibilitychange Events

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。在google浏览器中测试，关闭浏览器也可以触发这个事件

Example: 在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐。 document.addEventListener("visibilitychange", function() { if (document.visibilityState === 'visible') { backgroundMusic.play(); } else { //visibilityState === 'hidden' backgroundMusic.pause(); } }); 复制代码

浏览器兼容性

Window: beforeunload event

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。若想在关闭刷新状态前执行弹窗，根据规范，要显示确认对话框，事件处理程序需要在事件上调用preventDefault()。但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：将字符串分配给事件的returnValue属性从事件处理程序返回一个字符串。 Example: window.addEventListener('beforeunload', (event) => { // Cancel the event as stated by the standard. // 添加上会出现弹窗，不添加则会静默执行回调函数内的任务，下面同这条类似作用，只是处理兼容问题 event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = ''; }); 复制代码

浏览器兼容性

页面加载完成调用 mounted() { if (typeof document.addEventListener === "undefined") { console.error("浏览器不支持addEventListener,请升级"); } else { // 监听刷新 socket状态初始化handshake successful -> close -> handshake successful window.addEventListener("visibilitychange", () => { if (document.visibilityState == "hidden") { this.websocket.close() } }); // 监听关闭 socket状态初始化handshake successful -> close window.addEventListener("beforeunload", () => { this.websocket.close() }); } }, 复制代码延伸 widow & document

捕获阶段 window优先于document 冒泡阶段 document优先于window

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章