我可以监听什么事件，以确保我的样式已加载并应用？

Question

我有一个

parent

窗口，我可以从其中获取

stylesheet

内部的所有

head

链接。然后我

cloneNode

那些风格，最后，

appendChild

到

iframe

的头。

我什么时候可以在 iframe 中监听事件，让我知道所有这些样式都已加载并应用？

我控制这个应用程序内的一切，所以，一切都会发生。我已经尝试过

load

和

DOMContentLoaded

，但问题是 - iframe 已经加载。我正在寻找一种方法来

await appendChild

和

await loadStyle()

。

Answer 1

不要让父窗口的代码将克隆的节点附加到 iframe，而是让它在 iframe 窗口上调用全局函数并将它们传入，以便该函数可以执行此操作。在该函数中，在附加元素之前添加

load

和

error

处理程序。当所有

load

处理程序都已触发时，样式已被应用。 （或者当然，如果任何

error

处理程序被解雇，就会出现问题。:-) ）

这是一个草稿。在父级中（确保在 iframe 加载之前不要运行此代码）：

const styles = Array.from(document.querySelectorAll("link[rel=stylesheet]"), (s) => s.cloneNode());
document.getElementById("f").contentWindow.addStyles(styles);

在 iframe 中：

function addStyles(styles) {
    const loadPromises = styles.map((style) => new Promise((resolve, reject) => {
        style.addEventListener("load", resolve);
        style.addEventListener("error", reject);
        document.head.appendChild(style);
    }));
    Promise.all(loadPromises)
    .then(() => {
        // All loaded...
    })
    .catch(() => {
        // At least one failed...
    });
}

确保它位于非模块中

script

，或者通过执行

window.addStyles = addStyles;

将其添加到窗口对象，以便可以通过窗口对象访问它。

---

或者，您也可以使用

BroadcastChannel

并仅发送样式表的 URL，而不是实际的

link

节点。