greasemonkey - 加载 html 和 css 时的 运行 脚本

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')

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

在 start/end - 还没有加载任何外部资源，所以对于你想要的东西来说太早了

空闲时，所有外部资源都已加载，太晚了，你想要什么

好的，这些你都知道，但我要为其他未来的读者添加它

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

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
});