如何使用JavaScript在iframe加载状态码非200时隐藏外层div

你没法直接通过前端JS拿到跨域iframe的HTTP响应状态（包括403），这是浏览器同源策略的硬性限制，前端没有权限读取跨域资源的响应头、状态码这类原始信息。但这个需求不是完全做不了，根据你能控制的技术范围，有可靠性不同的实现方案。

方案1：后端预请求探活（可靠性100%，生产环境首选） #

这是唯一没有兼容问题、不会误判的方案，逻辑很直接：

• 不要一开始就把动态生成的外部URL填到iframe的src上
• 前端先请求你自己的后端接口，把当前物料编号传过去
• 由后端发起对目标外部URL的请求，拿到实际响应状态：
  • 如果返回200，且确认目标页面没有设置X-Frame-Options拦截iframe嵌入，就把目标URL返回给前端
  • 如果返回403、404、500这类错误状态，直接返回加载失败的标识
• 前端拿到接口返回结果再做处理：拿到有效URL就渲染iframe、显示外层容器；拿到失败标识直接把.iframe-container设为隐藏，甚至可以不渲染iframe节点，省得发无效请求。

方案2：纯前端事件兜底（有局限性，仅适合无法改后端的场景） #

要是你没条件加后端接口，只能纯前端处理，就靠iframe的加载事件加超时判断凑合用，提前说清楚：这个方案没法100%覆盖所有403场景，存在误判可能，只适合对准确率要求不高的场景。
核心逻辑：

• 给iframe绑error事件，只要触发就直接隐藏外层容器——这个事件只会在网络层面完全加载失败的时候触发，比如域名解析失败、网络断开，覆盖不了返回403状态码但有响应内容的情况
• 给iframe绑load事件，配合超时做判断：比如设置3-5秒的超时阈值，超时还没触发load就算加载失败；load触发之后，同源场景下可以直接读iframe里的页面内容，判断是不是403提示页，跨域场景下没法读内容，只能结合加载时长之类的特征做粗略判断

示例代码：

<div class="iframe-container">
  <iframe id="materialIframe" src="url-to-not-existing-page"></iframe>
</div>

<script>
const iframeEl = document.getElementById('materialIframe');
const containerEl = document.querySelector('.iframe-container');
let loadSuccess = false;

// 5秒加载超时兜底
const failTimer = setTimeout(() => {
  if (!loadSuccess) containerEl.style.display = 'none';
}, 5000);

// 明确触发加载错误直接隐藏
iframeEl.addEventListener('error', () => {
  clearTimeout(failTimer);
  containerEl.style.display = 'none';
});

iframeEl.addEventListener('load', () => {
  loadSuccess = true;
  clearTimeout(failTimer);
  // 同源场景下可以直接判断页面内容
  try {
    const doc = iframeEl.contentDocument || iframeEl.contentWindow.document;
    if (doc.title.includes('403') || doc.body.innerText.includes('403 Forbidden')) {
      containerEl.style.display = 'none';
    }
  } catch (err) {
    // 跨域场景下访问内容会抛安全错误，这里可以根据自身业务加判断逻辑
    // 比如如果加载耗时不到100ms就触发load，大概率是被拦截返回了空响应/错误页
  }
});
</script>

注意：纯前端方案有天生缺陷：如果目标站点返回403状态码的同时，返回了一个允许iframe嵌入的403提示页，加载时长也在你设置的超时范围内，前端根本没法区分这是正常业务页还是错误页，必然会误判。只要业务要求判断准确，就必须用后端探活的方案。

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