B站油猴脚本load事件为何多次触发及如何可靠判断页面加载完成？

b站油猴脚本：load事件多次触发及可靠页面加载完成检测

在开发B站油猴脚本监控视频页面加载状态时，load事件多次触发的问题常常困扰开发者。本文将分析此问题，并提供可靠的页面加载完成判断方法。

问题描述：

一个简单的油猴脚本用于检测B站视频页面的加载完成。使用window.onload和window.addEventListener("load", ...)监听load事件，结果显示：window.onload仅触发一次，而addEventListener触发三次（或更多次，当两者同时使用时）。浏览器为Firefox，脚本注入时机为document-start。虽然iframe可能导致多次触发，但我们需要更可靠的方法判断页面完全加载完成，而不依赖于易受干扰的load事件，尤其考虑到ajax加载内容不会触发load事件。

问题分析与解决方案：

问题的关键在于：其他油猴脚本或浏览器扩展程序。window.addEventListener允许添加多个事件监听器，因此其他脚本或页面中动态创建的iframe都会触发load事件。每个iframe都会触发一次，这解释了addEventListener多次触发的现象。

解决方法：

1. 排查干扰脚本： 暂时禁用其他油猴脚本，只保留测试脚本，观察load事件触发次数。如果问题依然存在，则继续步骤2。

2. 检查页面结构： 检查B站视频页面是否存在隐藏的iframe或其他可能导致多次触发load事件的元素。

3. 更可靠的加载完成判断： load事件并非总是可靠，因为它可能在所有资源（图片、视频等）加载完成后才触发，也可能在iframe加载完成后才触发。 建议使用以下方法：

   • MutationObserver： 监听DOM变化。当页面内容稳定后，可以认为页面加载完成。

   • setInterval定时轮询： 设置合适的检测间隔和超时时间，定期检查页面加载状态。

4. 避免在iframe中运行： 通过检查window.parent，避免脚本在iframe中运行，从而减少不必要的load事件触发。

通过以上方法，您可以更可靠地判断B站视频页面加载完成，并编写更稳定的油猴脚本。

以上就是B站油猴脚本load事件为何多次触发及如何可靠判断页面加载完成？的详细内容，更多请关注php中文网其它相关文章！