Frame加载LAN内URL超时或失败时，如何加载备用URL？

这问题我之前帮不少开发者处理过，核心思路就是监听iframe的加载状态+超时兜底判断，双管齐下就能避免显示难看的错误页面。下面给你两个实用的实现方案：

方法1：监听error/load事件 + 超时定时器 #

这是最通用的方案，既能捕获加载失败的情况，又能处理超时无响应的场景。

首先给你的iframe加上统一标识和自定义属性，方便批量处理：

<iframe class="lan-iframe" data-main="http://lan-server-1:8080" data-fallback="http://your-backup/fallback.html"></iframe>
<iframe class="lan-iframe" data-main="http://lan-server-2:8080" data-fallback="http://your-backup/fallback.html"></iframe>
<!-- 剩余6个iframe依此类推 -->

然后编写JavaScript逻辑：

// 批量处理所有目标iframe
document.querySelectorAll('.lan-iframe').forEach(iframe => {
  const mainUrl = iframe.dataset.main;
  const fallbackUrl = iframe.dataset.fallback;
  let loadTimeout;

  // 初始化加载主URL
  iframe.src = mainUrl;

  // 加载成功：清除超时定时器，可选验证页面内容
  iframe.addEventListener('load', () => {
    clearTimeout(loadTimeout);
    // 可选：验证页面是否真的正常加载（非错误页）
    try {
      const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
      if (frameDoc.body.innerText.includes('404') || frameDoc.body.innerText.includes('Error')) {
        iframe.src = fallbackUrl;
      }
    } catch (e) {
      // 跨域时无法访问内部文档，忽略即可
    }
  });

  // 加载失败：直接切换备用URL
  iframe.addEventListener('error', () => {
    clearTimeout(loadTimeout);
    iframe.src = fallbackUrl;
  });

  // 设置超时（比如10秒），超时后切换备用URL
  loadTimeout = setTimeout(() => {
    iframe.src = fallbackUrl;
  }, 10000);
});

方法2：兼容旧浏览器的加载状态判断 #

部分旧浏览器对error事件支持不佳，你可以通过onload结合定时器，再检查iframe的加载状态来实现：

function setupIframe(iframeElement, mainUrl, fallbackUrl, timeout = 10000) {
  let timeoutTimer = setTimeout(() => {
    // 超时触发备用URL
    iframeElement.src = fallbackUrl;
  }, timeout);

  iframeElement.onload = function() {
    clearTimeout(timeoutTimer);
    // 检查页面是否为错误页（比如标题异常）
    try {
      const frameTitle = this.contentWindow.document.title;
      if (frameTitle.includes('Error') || frameTitle.trim() === '') {
        this.src = fallbackUrl;
      }
    } catch (e) {}
  };

  // 开始加载主URL
  iframeElement.src = mainUrl;
}

// 逐个初始化iframe
setupIframe(document.getElementById('frame1'), 'http://lan-server-1:8080', 'http://your-backup/fallback.html');
setupIframe(document.getElementById('frame2'), 'http://lan-server-2:8080', 'http://your-backup/fallback.html');
// 剩余iframe同理调用

关键注意事项 #

• 跨域限制：如果备用URL与主URL不同域，受浏览器同源策略影响，你无法读取iframe内部的文档内容，此时只能依赖error事件和超时定时器触发切换，没法做内容层面的错误验证。
• 超时时间调整：根据你的局域网网络状况设置合理值，内网服务建议设5-10秒，避免因短暂延迟误判为加载失败。
• 备用服务稳定性：务必保证备用URL所在的服务器稳定可靠，否则会出现主服务失败后备用服务也无法加载的尴尬情况。

内容的提问来源于stack exchange，提问作者Álex Tutusaus