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事件为何多次触发及如何可靠判断页面加载完成？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561789.html
微信扫一扫 
支付宝扫一扫 
