Chrome浏览器下同域link标签CSS在动态iframe内无法加载问题

问题原因 #

你遇到的问题核心是两个常见的逻辑遗漏：

1. 动态创建的空iframe默认加载about:blank，浏览器对其文档的初始化是异步的，你直接操作contentWindow.document时，可能文档还没完成初始化，插入的link标签会被后续的初始化逻辑覆盖，或者无法触发资源加载。
2. link标签加载外部CSS是异步行为，如果你插入标签后立刻执行打印、渲染等操作，CSS还没完成加载，自然不会生效。

解决方法 #

方法1：补全iframe文档初始化逻辑+监听link加载完成

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
// 显式初始化iframe文档，避免异步初始化问题
const iframeDoc = iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write('<!DOCTYPE html><html><head></head><body></body></html>');
iframeDoc.close();

// 插入需要打印的内容
iframeDoc.body.innerHTML = document.querySelector('#section-to-print').innerHTML;

// 插入link样式
let link = document.createElement("link");
link.href = "https://localhost:5001/css/invoice-receipt.css";
link.rel = "stylesheet";
link.type = "text/css";
// 监听样式加载完成再执行后续操作（比如打印）
link.onload = () => {
  // 这里放样式加载完成后的逻辑，比如调用iframe.contentWindow.print()
  console.log('样式加载完成，可执行后续操作');
};
iframeDoc.head.appendChild(link);

方法2：拉取CSS内容插入style标签（兼容性最好）

如果不想处理异步加载逻辑，可以直接请求CSS文件内容，再插入到style标签中，既支持动态切换不同样式表，又和你之前写的style标签方案一样同步生效：

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const iframeDoc = iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write('<!DOCTYPE html><html><head></head><body></body></html>');
iframeDoc.close();
iframeDoc.body.innerHTML = document.querySelector('#section-to-print').innerHTML;

// 动态请求对应CSS文件
fetch('/css/invoice-receipt.css') // 同域请求直接用相对路径即可
  .then(res => res.text())
  .then(cssText => {
    const styles = document.createElement('style');
    styles.textContent = cssText;
    iframeDoc.head.appendChild(styles);
    // 这里可以直接执行后续操作
  });

内容的提问来源于stack exchange，提问作者fingers10