如何在样式表加载完成后再显示iframe，避免无样式状态？

可以通过以下几种方式实现隐藏iframe直到目标CSS加载完成，监听请求状态的思路也可行，具体方案如下：

方法1：在iframe内部监听CSS加载完成后通知父页面显示 #

初始时在父页面将iframe设置为隐藏状态，然后在iframe内部监听CSS的加载事件，完成后触发父页面显示iframe：

1. 父页面的iframe初始设置：

<iframe id="report-iframe" src="your-iframe-url" style="display:none;"></iframe>

2. 修改iframe内的link标签，添加加载完成事件：

<link type="text/css" rel="stylesheet" href="/web/assets/report.min.css" onload="window.parent.document.getElementById('report-iframe').style.display='block';">

或者用JS动态监听（更灵活，还能处理加载失败）：

// 放在iframe的脚本中
const cssLink = document.querySelector('link[href="/web/assets/report.min.css"]');

// CSS加载成功时显示iframe
cssLink.onload = () => {
  window.parent.document.getElementById('report-iframe').style.display = 'block';
};

// 处理CSS加载失败的情况，避免iframe一直隐藏
cssLink.onerror = () => {
  window.parent.document.getElementById('report-iframe').style.display = 'block';
};

注意：如果iframe和父页面跨域，直接操作父DOM会报错，此时改用postMessage通信：

• iframe内的脚本：

cssLink.onload = () => {
  window.parent.postMessage('report-css-loaded', 'https://your-parent-domain.com'); // 替换为实际父域名，不要用*
};

• 父页面监听消息：

window.addEventListener('message', (event) => {
  // 验证消息来源，防止恶意通信
  if (event.origin === 'https://your-iframe-domain.com' && event.data === 'report-css-loaded') {
    document.getElementById('report-iframe').style.display = 'block';
  }
});

方法2：父页面预加载CSS后再显示iframe #

在父页面先加载目标CSS，等加载完成后再显示iframe，避免iframe先于CSS渲染：

// 父页面脚本
const preloadLink = document.createElement('link');
preloadLink.rel = 'stylesheet';
preloadLink.href = '/web/assets/report.min.css';

preloadLink.onload = () => {
  // CSS加载完成，显示iframe
  document.getElementById('report-iframe').style.display = 'block';
};

// 加载失败时也显示iframe，保障可用性
preloadLink.onerror = () => {
  document.getElementById('report-iframe').style.display = 'block';
};

document.head.appendChild(preloadLink);

这种方法无需考虑跨域问题，且浏览器会缓存CSS，iframe加载时会直接使用缓存资源，提升加载速度。

方法3：通过监听请求状态（XHR方式） #

你提到的监听CSS请求状态码的思路可以实现，通过XHR请求CSS文件，判断状态码为200后再显示iframe：

// 父页面脚本
const xhr = new XMLHttpRequest();
xhr.open('GET', '/web/assets/report.min.css');

xhr.onload = () => {
  if (xhr.status === 200) {
    // 请求成功，显示iframe
    document.getElementById('report-iframe').style.display = 'block';
    // 可选：将CSS插入父页面，让iframe复用缓存
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = '/web/assets/report.min.css';
    document.head.appendChild(styleLink);
  } else {
    // 状态码异常，仍显示iframe
    document.getElementById('report-iframe').style.display = 'block';
  }
};

xhr.onerror = () => {
  document.getElementById('report-iframe').style.display = 'block';
};

xhr.send();

这种方法本质和预加载类似，但能明确判断请求状态，不过浏览器会自动缓存请求结果，不会重复加载CSS。

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