Estoy tratando de inyectar algo de CSS en un iFrame y funciona bien, excepto que hay un retraso antes de que entre en vigor el nuevo CSS, por lo que obtienes una página que carga un tema y luego cambia de color. Solo es visible por un segundo, pero es molesto. ¿Hay alguna forma de retrasar el procesamiento de iFrame hasta que se aplique ese CSS? Agrego una secuencia de comandos después del CSS, pero parece que, dado que lo estoy inyectando en el DOM, se procesa y luego se vuelve a procesar. Intenté usar readyState interactive y complete para obtenerlo antes de la carga, pero no tuve suerte y no estoy seguro de cómo retrasarlo. También probé 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) } }