I'm dynamically adding a iframe to html document using javascript.
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.document.body.innerHTML = document.querySelector('#section-to-print').innerHTML;
When I add css using link tag from same domain to iframe head, the styles are not loading.
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);
But when I add the css using style tag it works.
var styles = document.createElement("style");
styles.innerHTML = `html, body {
width: 2.7in;
margin: 0 auto;
height: max-content;
}`;
iframe.contentWindow.document.head.appendChild(styles);
The problem is that I want to load different stylesheet dynamically but loading via link is not working. Please assist on what I'm missing.
I made this to work using the below 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);