Question

正如标题所述，我想等到html解析完毕并加载所有样式表后，因为我需要使用currentsyle。但是，我不想要等待图像。因此，我无法使用load事件，因为它正在等待图像。而且我不能使用DOMContentLoaded事件，因为它不等待样式表。我也不能使用document.body.appendChild在文档末尾添加脚本标签，因为该脚本是在假定页面上的javascript被禁用的情况下运行的。

是否真的没有事件等待样式？

Answer 1

GM脚本可能有三个run-at值-括号中带有相应的document.readyState

文档开始（之前 document.readyState === 'loading'）
文档末尾（document.readyState === 'ineractive'）
文档空闲（document.readyState === 'complete'）

这些是脚本唯一可用的注入点

在开始/结束时-尚未加载任何外部资源，因此对于您想要的内容来说太早了

在空闲状态下，所有外部资源都已加载，因此对于您想要的内容而言为时已晚

好的，您知道所有这些，但是我将其添加给其他未来的读者

如果您在文档末尾加载脚本，则可以将load侦听器添加到所有<link rel="stylesheet"中，例如

Promise.all(Array.from(document.querySelectorAll('link[rel="stylesheet"]'), ss => new Promise(resolve => {
    const href = ss.href;
    const fulfill = status => resolve({href, status});
    setTimeout(fulfill, 5000, 'timeout');
    ss.addEventListener('load', () => resolve('load'));
    ss.addEventListener('error', () => resolve('error')); // yes, resolve, because we just want to wait until all stylesheets are done with, errors shouldn't stop us
}))).then((results) => {
    // results is an array of {href:'some url', status: 'load|error|timeout'}
    // at this point stylesheets have finished loading
});

oilsmonkey-加载html和css时运行脚本

1 个答案: