WebView中处理iFrame错误：离线时移除加载失败的iFrame

这个需求完全可以实现，给你几个靠谱的方案，你可以根据自己的页面架构选最合适的：

方案一：监听iFrame的error事件直接移除 #

这是最直接的方式——不管是什么原因导致iFrame加载失败（包括离线的ER_INTERNET_DISCONNECTED），只要触发错误事件就把它从页面中移除。

静态iFrame的处理 #

如果你的iFrame是提前写在HTML里的，可以在页面加载后给所有iFrame绑定错误监听：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const allIframes = document.querySelectorAll('iframe');
  allIframes.forEach(iframe => {
    iframe.addEventListener('error', function() {
      // 移除当前出错的iFrame
      this.remove();
    });
  });
});

动态创建的iFrame的处理 #

如果你的iFrame是通过JS动态生成的，在创建的时候就绑定错误监听：

function createNewsIframe(src) {
  const iframe = document.createElement('iframe');
  iframe.src = src;
  // 提前绑定错误事件
  iframe.addEventListener('error', function() {
    this.remove();
  });
  // 把iFrame添加到页面指定位置
  document.getElementById('news-container').appendChild(iframe);
}

方案二：结合在线状态检测提前优化 #

可以配合浏览器的在线状态API，在检测到用户离线时直接移除或不渲染iFrame，同时监听状态变化做对应处理。不过要注意navigator.onLine并非100%精准，但作为补充手段很实用：

// 初始化时检查状态
function handleOnlineStatus() {
  const allIframes = document.querySelectorAll('iframe');
  if (!navigator.onLine) {
    allIframes.forEach(iframe => iframe.remove());
  } else {
    // 在线时可以重新加载需要的iFrame（如果需要）
    // createNewsIframe('your-src-here');
  }
}

// 页面加载时执行一次
handleOnlineStatus();

// 监听在线状态变化
window.addEventListener('online', handleOnlineStatus);
window.addEventListener('offline', handleOnlineStatus);

注意事项 #

• 跨域iFrame的错误事件：由于同源策略限制，你可能无法获取具体的错误信息，但只要错误事件触发，就可以执行移除操作，完全不影响需求实现。
• 框架适配：如果你的页面用React、Vue等框架，逻辑类似——在组件挂载时给iFrame绑定错误监听，或者在模板中通过指令/事件处理移除逻辑。

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