b站网页加载事件的多次触发及更可靠的加载时机判断详解
许多油猴脚本开发者在操作B站网页时，常遇到网页加载事件多次触发的困扰。本文将深入探讨此问题，并提供更可靠的网页加载完成判断方法。
问题： 一个油猴脚本使用window.onload和window.addEventListener('load', ...)监听B站视频页面的加载事件，却发现load事件被触发多次，而非预期的单次触发。单独使用任一方法则只会触发一次。触发次数与代码顺序相关，最多达五次。此外，单纯依靠load事件无法准确判断页面完全加载，因为部分内容可能通过Ajax异步加载。
分析： 问题根源在于B站网页结构和加载方式。B站页面可能包含多个iframe，每个iframe都会独立触发load事件。脚本监听的load事件是页面主文档及所有iframe文档load事件的叠加。run-at document-start的注入时机使得脚本在页面早期注册了事件监听器，因此捕获了所有iframe的load事件。 单纯依赖load事件判断网页完全加载并不可靠，容易受iframe和异步加载内容的影响。
建议先屏蔽其他油猴脚本进行测试，排除干扰。若问题依旧，则需考虑iframe的影响，或在脚本中添加条件，避免在iframe环境中运行。
更可靠的加载时机判断： 目前没有一种完美方法适用于所有情况。 MutationObserver可以监听DOM树的变化，但实现较为复杂；setInterval需要谨慎设置间隔时间，避免性能问题。 选择何种方法取决于具体需求和性能考量。 其他方法，例如监听特定元素的加载状态，也可能是一种解决方案，但需要根据具体页面结构进行调整。
总而言之，解决B站网页加载事件多次触发的问题，需要仔细分析页面结构和加载过程，并选择合适的加载时机判断方法，以确保脚本在页面完全加载后执行。
