微信H5视频播放时，如何可靠监听页面关闭事件？-js教程-PHP中文网

微信h5视频播放时，如何可靠监听页面关闭事件？

微信环境下H5页面视频播放与可靠的页面关闭事件监听

在微信小程序内嵌H5页面中，准确监听页面关闭事件对于保存视频播放进度或记录用户行为至关重要。然而，iOS微信浏览器中visibilitychange和pagehide事件在视频播放期间常常失效。本文提供一种更可靠的解决方案，解决iOS设备上微信H5页面视频播放时页面关闭事件监听失效的问题。

问题：

在iOS微信内置浏览器中，使用visibilitychange和pagehide事件监听H5页面关闭，在视频播放过程中，这些事件可能无法被触发。

解决方案：

Shakespeare

一款人工智能文案软件，能够创建几乎任何类型的文案。

下载

由于iOS微信环境下visibilitychange和pagehide事件的不可靠性，我们采用多事件监听策略，并结合localStorage和navigator.sendBeacon，提高事件捕获的可靠性。

改进后的代码：

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

function sendDataToServer() {
    clearInterval(timer); // 清除可能存在的定时器，避免内存泄漏
    let params = { /* your data here */ };
    let blob = new Blob([JSON.stringify(params)], { type: 'application/json' });
    navigator.sendBeacon(window.location.origin + '/your-api-endpoint', blob); // 替换'/your-api-endpoint' 为你的服务器端点

    // 可选：localStorage 用于调试和验证哪个事件成功触发
    localStorage.setItem('pageClosed', 'true'); 
}

// ... your existing code ...

这段代码注册了beforeunload、unload、pagehide和visibilitychange四个事件监听器，调用sendDataToServer函数。navigator.sendBeacon确保数据可靠地发送到服务器，即使页面关闭也能够保证数据发送。localStorage用于调试，方便验证哪个事件成功触发。请将/your-api-endpoint替换成你的服务器API地址，并确保params对象包含你需要发送的数据。

通过这种方法，即使在iOS微信环境下播放视频，也能显著提高页面关闭事件监听的成功率，确保关键数据的保存。建议同时使用多个事件监听器以最大限度地提高可靠性。