微信H5视频播放页面关闭事件监听：如何可靠地捕捉iOS设备上的页面关闭？-js教程-PHP中文网

微信H5视频播放页面关闭事件监听：如何可靠地捕捉iOS设备上的页面关闭？

碧海醫心

发布： 2025-03-09 10:30:15

原创

788人浏览过

微信h5视频播放页面关闭事件监听：如何可靠地捕捉ios设备上的页面关闭？

微信H5视频播放页面关闭事件监听：iOS设备可靠性解决方案

在微信小程序内嵌H5页面播放视频时，开发者通常需要在用户关闭页面时执行特定操作，例如保存播放进度或上传播放记录。然而，iOS设备上常用的visibilitychange和pagehide事件在某些情况下并不可靠。本文提供一种更稳健的方案。

问题： iOS微信浏览器中，H5页面播放视频后，用户关闭页面时，visibilitychange和pagehide事件监听器可能无法正常工作。例如：

window.addEventListener("pagehide", handler);
const handler = (e) => {
    localStorage.setItem("videoplay", true);
};

登录后复制

这段代码在iOS微信环境下，pagehide事件可能失效。

解决方案： 为了提高可靠性，我们采用多事件监听器结合sendBeacon API 的方法：

window.addEventListener('beforeunload', sendData);
window.addEventListener("unload", sendData);
window.addEventListener("pagehide", sendData);
window.addEventListener("visibilitychange", sendData);

function sendData() {
    clearInterval(timer); // 清除定时器，防止内存泄漏
    let blob = new Blob([JSON.stringify(params)], { type: 'application/json' });
    navigator.sendBeacon(window.location.origin + '请求路径', blob);
}

登录后复制

这段代码监听了beforeunload、unload、pagehide和visibilitychange四个事件。sendBeacon API 允许在页面卸载时异步发送数据，即使页面已关闭，也能最大程度保证数据发送成功。 clearInterval(timer) 用于防止潜在的内存泄漏（假设timer是一个在页面中使用的定时器）。我们使用单个sendData函数来避免代码冗余。

由于不同设备和浏览器对事件的支持程度不同，建议同时监听多个事件以确保覆盖所有情况。通过这种方法，可以显著提升在iOS微信环境下捕捉页面关闭事件的可靠性。

以上就是微信H5视频播放页面关闭事件监听：如何可靠地捕捉iOS设备上的页面关闭？的详细内容，更多请关注php中文网其它相关文章！