Estoy agregando dinámicamente un iframe al documento html usando javascript .
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); iframe.contentWindow.document.body.innerHTML = document.querySelector('#section-to-print').innerHTML; Cuando agrego css usando la etiqueta de link del same domain al encabezado del iframe , los estilos no se cargan.
let link = document.createElement("link"); link.href = "https://localhost:5001/css/invoice-receipt.css"; /**** your CSS file ****/ link.rel = "stylesheet"; link.type = "text/css"; iframe.contentWindow.document.head.appendChild(link); Pero cuando agrego el css usando la etiqueta de style , funciona.
var styles = document.createElement("style"); styles.innerHTML = `html, body { width: 2.7in; margin: 0 auto; height: max-content; }`; iframe.contentWindow.document.head.appendChild(styles);El problema es que quiero cargar una hoja de estilo diferente dinámicamente, pero la carga a través de un enlace no funciona. Por favor ayuda en lo que me estoy perdiendo.
Hice que esto funcionara usando el siguiente script .
var bodyScript = document.createElement("script"); bodyScript.innerHTML = `fetch('https://localhost:5001/css/invoice-receipt.css') .then(response => response.text()) .then(data => { var head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); head.appendChild(style); style.type = 'text/css'; style.appendChild(document.createTextNode(data)); });`; iframe.contentWindow.document.body.appendChild(bodyScript);