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事件。
建议：
禁用其他油猴脚本: 逐个禁用其他油猴脚本，观察load事件触发次数变化，以确定是否由其他脚本导致。
检查iframe: 在脚本中添加条件判断，避免在iframe环境中运行代码。例如，检查window.parent === window，只有在顶级窗口才执行代码。
使用更可靠的加载完成判断方法: load事件并非总是可靠的页面完全加载指标，特别是对于复杂的网页。考虑使用更可靠的方法，例如：
DOMContentLoaded事件: 该事件在HTML文档完全解析并构建DOM树后触发，比load事件更早发生，但资源（如图片、脚本）可能尚未完全加载。
MutationObserver: 监控DOM树的变化，当页面内容稳定后，可以认为页面加载完成。需要设置合适的观察条件和超时机制。
Performance.timing API: 获取页面加载性能数据，根据loadEventEnd属性判断页面加载完成时间。
通过以上方法，可以更准确地判断B站网页的加载完成状态，并解决load事件多次触发的困扰。
以上就是B站网页load事件多次触发：如何可靠地判断页面完全加载完成？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2794546.html
