B站网页加载事件全解析：快速判断页面加载完成！

本文详解了B站网页`load`事件多次触发的现象及解决方法。作者使用油猴脚本测试发现，`window.onload`和`window.addEventListener('load', ...)`两种监听方式在B站视频页面分别触发一次和三次`load`事件，怀疑是iframe导致。文章分析了可能原因，并提出了三种更可靠的页面完全加载判断方法：`DOMContentLoaded`事件、`MutationObserver`和`Performance.timing API`，帮助开发者解决B站网页加载事件判断难题，从而编写更精准的油猴脚本或网页脚本。

B站网页load事件多次触发及可靠加载完成判断

本文分析了一个油猴脚本在B站视频页面遇到的问题：window.onload事件多次触发。作者使用油猴脚本测试window.onload和window.addEventListener('load', ...)两种监听方式，发现前者只触发一次，后者却触发三次，两者同时使用则触发次数更多。作者怀疑是iframe导致，但需要更可靠的页面完全加载判断方法，因为多次触发load事件无法准确反映页面最终加载状态。

作者提供的油猴脚本如下：

// ==UserScript==
// @name         Temp
// @namespace    no
// @match        https://www.bilibili.com/video/*
// @run-at document-start
// ==/UserScript==

// 单独使用只会触发一次onload事件
// window.onload = alert("onload is triggered");

// 单独使用会触发3次load事件
// window.addEventListener("load", () => {
//     alert("load is triggered");
// });

// 两种方式同时使用，会触发多次
// window.onload = alert("onload is triggered");
// window.addEventListener("load", () => {
//     alert("load is triggered");
// });

作者在火狐浏览器，@run-at document-start注入时机下测试，发现addEventListener方法多次触发load事件。这可能是因为页面中存在iframe，iframe加载完成后也会触发load事件。如果页面有多个iframe，就会出现多次触发的情况。

问题可能原因：页面中存在其他油猴脚本或B站自身代码创建的未被作者注意到的iframe，这些iframe的加载也触发了load事件。

建议：

1. 禁用其他油猴脚本: 逐个禁用其他油猴脚本，观察load事件触发次数变化，以确定是否由其他脚本导致。

2. 检查iframe: 在脚本中添加条件判断，避免在iframe环境中运行代码。例如，检查window.parent === window，只有在顶级窗口才执行代码。

3. 使用更可靠的加载完成判断方法: load事件并非总是可靠的页面完全加载指标，特别是对于复杂的网页。考虑使用更可靠的方法，例如：

   • DOMContentLoaded事件: 该事件在HTML文档完全解析并构建DOM树后触发，比load事件更早发生，但资源（如图片、脚本）可能尚未完全加载。

   • MutationObserver: 监控DOM树的变化，当页面内容稳定后，可以认为页面加载完成。需要设置合适的观察条件和超时机制。

   • Performance.timing API: 获取页面加载性能数据，根据loadEventEnd属性判断页面加载完成时间。

通过以上方法，可以更准确地判断B站网页的加载完成状态，并解决load事件多次触发的困扰。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。