取决于您对“已加载”的定义。
load
事件将触发...
...]网页完全加载了所有内容(包括图像,脚本文件,CSS文件等)。 (Source)
这里就是这种情况。 在原始HTML文档中的所有图像和脚本文件以及CSS文件均已加载!但是,在Twitter的情况下,“已加载”状态是脚本稍后将启动new元素的加载的状态。这超出了原始页面加载的范围。
如果您想等待您所说的“已加载”,则必须从技术上问自己这是什么意思。我猜答案应该是“元素X可见时”。在这种情况下,可以通过在浏览器控制台中检查DOM来确定要等待的元素,然后安装MutationObserver
以侦听要添加/修改的元素。 (最糟糕的解决方案是检查该元素是否存在的时间间隔。)
例如,对于Twitter,这对我有用(监视要加载的第一个故事):
MutationObserver
将const observer = new MutationObserver(mutations => {
if (mutations.some(mutation => {
return Array.from(mutation.addedNodes).some(node => node.querySelector('article'))
})) {
setTimeout(() => { // Wait for all the updates of this frame to go through
console.log('Page fully loaded!')
}, 0)
observer.disconnect()
}
})
observer.observe(document, {
attributes: false,
childList: true,
characterData: false,
subtree: true
})
函数的语法更改为以下任意一项,然后尝试
onload
带有window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
onload