如何处理iFrame渲染错误？针对onError不被部分浏览器支持的场景

由于iframe的error事件本身不会触发，且onError方法在部分浏览器中不再受支持，你可以通过以下几种可靠的方式来检测和处理iframe加载失败的情况：

1. 加载超时检测 #

这是最通用的方案，适用于所有同域和跨域场景。核心逻辑是：如果iframe在指定时间内没有触发load事件，则判定为加载失败。

const iframe = document.createElement('iframe');
let loadTimeoutId;

// 绑定加载成功回调
iframe.addEventListener('load', () => {
  clearTimeout(loadTimeoutId);
  console.log('iframe加载完成');
  // 执行加载成功后的逻辑
});

// 设置超时判定
loadTimeoutId = setTimeout(() => {
  console.error('iframe加载超时或失败');
  // 这里可以执行错误处理：比如移除iframe、显示错误提示、替换备用内容等
  iframe.remove();
  document.body.innerHTML += '<p>内容加载失败，请稍后重试</p>';
}, 10000); // 10秒超时阈值，可根据需求调整

iframe.src = '目标地址';
document.body.appendChild(iframe);

2. 同域场景下检查文档状态 #

如果iframe和父页面属于同域，可以在超时后尝试访问iframe的contentDocument或contentWindow，通过文档的状态判断是否加载成功：

setTimeout(() => {
  try {
    const doc = iframe.contentDocument || iframe.contentWindow.document;
    // 检查文档是否存在且有内容
    if (!doc || doc.body?.innerHTML.trim() === '') {
      console.error('iframe内容加载失败');
      // 处理错误逻辑
    }
  } catch (err) {
    // 捕获到异常通常是跨域限制，但同域下出现则大概率是加载失败
    console.error('iframe加载异常');
  }
}, 12000);

3. 可控跨域场景下用postMessage同步状态 #

如果iframe指向的页面是你自己可控的，可以让子页面在加载完成后主动给父页面发送消息，父页面未收到消息则判定为失败：

父页面代码 #

const iframe = document.createElement('iframe');
let isLoaded = false;

// 监听子页面的消息
window.addEventListener('message', (e) => {
  if (e.source === iframe.contentWindow && e.data === 'iframe_loaded_success') {
    isLoaded = true;
    console.log('iframe加载成功');
  }
});

// 超时检测
setTimeout(() => {
  if (!isLoaded) {
    console.error('iframe加载失败');
    // 错误处理逻辑
  }
}, 10000);

iframe.src = '你的可控域名页面地址';
document.body.appendChild(iframe);

子页面（iframe内）代码 #

window.addEventListener('load', () => {
  // 最好指定父页面的域名，避免安全风险
  window.parent.postMessage('iframe_loaded_success', 'https://父页面域名.com');
});

4. 预请求资源状态（提前排查HTTP错误） #

可以先通过fetch或XMLHttpRequest请求iframe的目标资源，提前检测HTTP状态码，再决定是否插入iframe：

fetch('iframe目标地址', { method: 'HEAD' })
  .then(res => {
    if (res.ok) {
      // 资源HTTP状态正常，插入iframe
      const iframe = document.createElement('iframe');
      iframe.src = 'iframe目标地址';
      document.body.appendChild(iframe);
    } else {
      console.error(`资源返回错误状态码：${res.status}`);
      // 处理错误逻辑
    }
  })
  .catch(err => {
    console.error('资源请求失败：', err);
    // 处理网络错误等情况
  });

注意：这种方法只能检测HTTP层面的错误，无法覆盖资源加载成功但内容渲染异常的情况。

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