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

wufei123 2025-03-01 阅读:4 评论:0

b站油猴脚本：load事件多次触发及可靠页面加载完成检测在开发B站油猴脚本监控视频页面加载状态时，load事件多次触发的问题常常困扰开发者。本文将分析此问题，并提供可靠的页面加载完成判断方法。问题描述：一个简单的油猴脚本用于检测B站...

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多次触发的现象。

解决方法：

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