如何阻止iframe跳转并捕获404错误及错误目标URL？

嘿，这个问题我之前碰到过类似的场景，咱们分情况来解决，毕竟同域和跨域的处理方式差别不小：

场景1：主页面与iframe同域 #

这种情况下你可以直接操作iframe内部的DOM和事件，轻松拦截跳转并捕获目标URL：

方法1：直接拦截点击事件 #

找到你的iframe元素，等它加载完成后给内容窗口添加点击监听，定位到触发跳转的元素（比如a标签），阻止默认跳转同时记录URL：

const myIframe = document.getElementById('target-iframe');
// 确保iframe加载完成后再绑定事件
myIframe.onload = () => {
  myIframe.contentWindow.addEventListener('click', (e) => {
    // 找到触发跳转的链接元素（如果是其他可点击元素，调整选择器即可）
    const link = e.target.closest('a');
    if (link && link.href === 'http://12.12.12.12/Web/1') {
      e.preventDefault(); // 阻止跳转，iframe不会因404崩溃
      console.log('捕获到目标URL:', link.href);
      // 这里可以添加你的业务逻辑，比如上报、存储等
    }
  });
};

方法2：监听页面跳转前事件 #

通过beforeunload事件拦截即将发生的页面跳转，判断目标URL并阻止：

const myIframe = document.getElementById('target-iframe');
myIframe.onload = () => {
  myIframe.contentWindow.addEventListener('beforeunload', (e) => {
    const nextUrl = myIframe.contentWindow.location.href;
    if (nextUrl === 'http://12.12.12.12/Web/1') {
      e.preventDefault(); // 阻止页面跳转
      console.log('捕获到即将跳转的URL:', nextUrl);
    }
  });
};

场景2：主页面与iframe跨域 #

跨域情况下浏览器的同源策略会限制你直接操作iframe内部，这时候分两种子情况处理：

子情况1：你能控制iframe的源码 #

在iframe的页面中添加监听逻辑，通过postMessage把捕获到的URL发送给主页面：

1. 在iframe页面的脚本中：

document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (link && link.href.includes('http://12.12.12.12/Web/1')) {
    e.preventDefault(); // 阻止iframe内部跳转
    // 发送消息给主页面，建议替换*为你的主页面域名，提升安全性
    window.parent.postMessage(
      { type: 'captured-url', url: link.href },
      'https://your-main-domain.com'
    );
  }
});

2. 在主页面中监听消息：

window.addEventListener('message', (e) => {
  // 验证消息来源，防止恶意消息
  if (e.origin !== 'https://your-iframe-domain.com') return;
  if (e.data.type === 'captured-url') {
    console.log('从iframe捕获到目标URL:', e.data.url);
    // 处理逻辑
  }
});

子情况2：无法控制iframe的源码 #

这种情况下可以用Service Worker拦截所有请求，包括iframe发起的请求，同时阻止404跳转并捕获URL：

1. 编写Service Worker文件（比如sw.js）：

self.addEventListener('fetch', (e) => {
  const requestUrl = new URL(e.request.url);
  // 判断是否是目标URL
  if (requestUrl.href === 'http://12.12.12.12/Web/1') {
    // 返回一个空的成功响应，阻止404错误
    e.respondWith(new Response(null, { status: 200, statusText: 'Intercepted' }));
    // 把捕获到的URL发送给主页面
    self.clients.matchAll().then(clients => {
      clients.forEach(client => {
        client.postMessage({ type: 'captured-url', url: requestUrl.href });
      });
    });
  }
});

2. 在主页面中注册Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker注册成功，开始拦截请求');
    } catch (err) {
      console.error('Service Worker注册失败:', err);
    }
  });
}
// 监听Service Worker发来的消息
window.addEventListener('message', (e) => {
  if (e.data.type === 'captured-url') {
    console.log('捕获到目标URL:', e.data.url);
  }
});

注意：Service Worker需要在HTTPS环境（或localhost）下才能正常运行。

另外，你也可以给iframe添加sandbox属性快速限制跳转（默认会阻止导航行为），但这种方式无法直接捕获URL，只能防止iframe崩溃：

<iframe src="your-iframe-src" sandbox="allow-scripts allow-same-origin"></iframe>

不要添加allow-top-navigation或allow-navigation属性，否则会允许跳转。

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