iframe CSS注入加载优先级

Question

我试图将一些CSS注入一个iframe，而且效果很好，除了在新的CSS生效之前有一个延迟，因此您将获得一个加载一个主题然后更改颜色的页面。它只能看到一秒钟，但很烦人。有什么方法可以将iFrame渲染延迟到应用CSS？我在CSS之后添加了一个脚本，但似乎由于我将其注入DOM，因此会渲染然后重新租赁。我已经尝试使用ReadyState Interactive和完成在加载前将其获取，但没有运气，也不确定如何延迟它。还尝试了addeventListener（“ load”），但在加载射击之前似乎会发生变化。

const frame_doc = document.getElementById("iframe").contentDocument;
function setFrameClass(light) {
    if (light) {
        frame_doc.body.classList.remove("dark")
    } else {
        frame_doc.body.classList.add("dark")
    }
}
themeSwitch.addEventListener('change', function () {
    setFrameClass(this.checked, frame_doc.body)
});
frame_doc.onreadystatechange = function () {
    if (frame_doc.readyState === 'interactive') {
        let link = frame_doc.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = new URL('rootstatic/css/dark.css', window.location.origin).href;
        link.media = 'all';
        frame_doc.head.appendChild(link);
        let s = frame_doc.createElement("script");
        s.type = "text/javascript";
        s.src = new URL('rootstatic/js/dark-mode.js', window.location.origin).href;
        frame_doc.head.appendChild(s);
        setFrameClass(themeSwitch.checked)
    }
}