能否使用JavaScript捕获iframe内部的资源加载错误？

问题原因 #

你之前用window.addEventListener('error')无法捕获错误的原因是，跨域iframe内部的资源加载错误属于iframe的独立上下文，不会冒泡到父页面的window对象，所以父页面监听不到这类错误。 #

可行解决方法 #

方法1：超时检测+iframe内容校验组合判断

拦截后iframe要么加载超时，要么内部内容高度远低于正常加载的Instagram帖子高度，也无法访问内部元素，可以通过组合规则判断是否被拦截：
首先编写HTML结构：

<div class="instagram-widget-container">
  <iframe id="instagram-iframe" src="你的lightwidget嵌入地址" loading="lazy" frameborder="0"></iframe>
  <div class="instagram-fallback" style="display: none;">
    内容无法加载，请访问我的Instagram主页查看动态
  </div>
</div>

对应JS逻辑：

const iframe = document.getElementById('instagram-iframe');
const fallback = document.querySelector('.instagram-fallback');
const maxLoadTime = 8000; // 正常加载最长等待时间，可根据实际情况调整

// 超时兜底检测
const loadTimer = setTimeout(() => {
  showFallback();
}, maxLoadTime);

// iframe加载完成后校验内容状态
iframe.addEventListener('load', () => {
  clearTimeout(loadTimer);
  try {
    // 尝试访问iframe内部内容，跨域被拦截时会抛出错误
    const iframeBody = iframe.contentDocument?.body;
    if (iframeBody) {
      // 正常Instagram帖子加载后高度至少300px，可根据你的嵌入尺寸调整阈值
      if (iframeBody.offsetHeight < 200 || iframeBody.querySelector('img') === null) {
        showFallback();
      }
    } else {
      // 无法访问内部内容，判定为被拦截
      showFallback();
    }
  } catch (e) {
    // 跨域报错说明被拦截，触发降级
    showFallback();
  }
});

function showFallback() {
  iframe.style.display = 'none';
  fallback.style.display = 'block';
}

方法2：预检测Instagram CDN连通性

在加载iframe之前先尝试加载一张Instagram CDN的极小测试资源，失败就直接显示降级内容，无需加载iframe：

const testImgUrl = 'https://scontent-frx5-1.cdninstagram.com/emoji/android/128x128/2764.png';
const testImg = new Image();
testImg.crossOrigin = 'anonymous';
const widgetContainer = document.querySelector('.instagram-widget-container');

testImg.onload = () => {
  // 连通正常，插入iframe
  widgetContainer.innerHTML = `
    <iframe src="你的lightwidget嵌入地址" frameborder="0"></iframe>
  `;
};

testImg.onerror = () => {
  // 连通失败，直接显示降级内容
  widgetContainer.innerHTML = `
    <div>内容无法加载，请访问我的Instagram主页查看动态</div>
  `;
};

testImg.src = testImgUrl;

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