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多次触发的现象。
解决方法：
-
排查干扰脚本： 暂时禁用其他油猴脚本，只保留测试脚本，观察
load事件触发次数。如果问题依然存在，则继续步骤2。 -
检查页面结构： 检查B站视频页面是否存在隐藏的
iframe或其他可能导致多次触发load事件的元素。 -
更可靠的加载完成判断：
load事件并非总是可靠，因为它可能在所有资源（图片、视频等）加载完成后才触发，也可能在iframe加载完成后才触发。 建议使用以下方法：-
MutationObserver： 监听DOM变化。当页面内容稳定后，可以认为页面加载完成。 -
setInterval定时轮询： 设置合适的检测间隔和超时时间，定期检查页面加载状态。
-
-
避免在iframe中运行： 通过检查
window.parent，避免脚本在iframe中运行，从而减少不必要的load事件触发。
通过以上方法，您可以更可靠地判断B站视频页面加载完成，并编写更稳定的油猴脚本。
