微信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微信环境下捕捉页面关闭事件的可靠性。