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

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《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事件为何多次触发及如何可靠判断页面加载完成？ 》的详细内容，更多关于的资料请关注golang学习网公众号！