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

b站网页load事件的异常触发与可靠加载判断方法

本文分析了在B站网页中使用油猴脚本时遇到的load事件多次触发的问题。 一个简单的油猴脚本，旨在监听网页加载完成，却意外地多次触发了load事件。

问题现象：使用window.onload监听器时，事件只触发一次；而使用window.addEventListener("load", ...)监听器时，事件触发多次（文中案例为三次）。同时使用两种方法时，触发次数更多。这与预期不符，因为window.onload通常只绑定一个事件处理程序。

示例代码：

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

// window.onload = alert("onload is triggered"); // 只触发一次
// window.addEventListener("load", () => alert("load is triggered")); // 触发多次

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

分析原因： 问题可能与B站页面中存在的iframe以及异步加载内容有关。iframe的加载会再次触发load事件，而异步加载的内容（例如通过Ajax加载）不会触发load事件。因此，单纯依靠load事件无法可靠地判断页面完全加载完成。

解决方案： 文中提出的解决方案包括检查其他油猴脚本（特别是那些可能创建iframe的脚本）以及避免在iframe中运行脚本。然而，这些方法可能无法完全解决问题，因为异步加载依然存在。

更可靠的加载完成判断方法： 为了更可靠地判断页面完全加载状态，建议使用以下方法：

• DOMContentLoaded 事件: 该事件在HTML文档完全解析和DOM树构建完成后触发，比load事件更早触发，且不受iframe和异步加载的影响。

• 轮询法: 使用setInterval函数定期检查页面加载状态，例如检查所有图片是否加载完成，或所有资源是否加载完成。 这需要根据具体页面情况编写相应的判断逻辑。

• 使用资源加载库: 一些JavaScript库（例如jQuery）提供了更高级的页面加载完成判断方法，可以简化开发过程。

通过上述方法，可以更可靠地判断B站网页（或其他网页）的加载完成状态，从而避免油猴脚本因load事件多次触发而出现问题。 选择哪种方法取决于具体需求和项目复杂度。 对于简单的场景，DOMContentLoaded事件是一个不错的选择。 对于更复杂的场景，则可能需要使用轮询法或资源加载库。

以上就是B站网页load事件为何多次触发及如何可靠判断页面加载完成？的详细内容，更多请关注php中文网其它相关文章！