如何用JavaScript追踪导致顶层窗口重定向的具体iframe？

这个问题确实挺棘手的——跨域限制加上不能用sandbox（会破坏你需要的可见性追踪功能），常规方法很难直接定位到罪魁祸首。不过我有几个实用的思路，你可以根据场景试试：

方法1：追踪用户交互关联的iframe（适合用户触发的重定向） #

如果重定向是用户点击iframe内的元素触发的，我们可以记录最后和用户交互的iframe，在窗口即将卸载时输出这个信息：

// 先给每个iframe分配唯一ID
document.querySelectorAll('iframe').forEach((iframe, idx) => {
  iframe.id = `target-iframe-${idx}`;
});

let lastActiveIframe = null;

// 监听顶层窗口的点击、鼠标移动事件，记录交互的iframe
['click', 'mousemove'].forEach(eventType => {
  window.addEventListener(eventType, (e) => {
    if (e.target.tagName === 'IFRAME') {
      lastActiveIframe = e.target.id;
    }
  });
});

// 在窗口即将卸载时输出结果
window.addEventListener('beforeunload', () => {
  console.log('疑似触发重定向的iframe:', lastActiveIframe);
  // 也可以把这个信息存在localStorage或者上报到服务端
});

这个方法的局限性是：如果重定向是iframe内部自动脚本触发的（比如定时跳转），就抓不到了。

方法2：通过性能日志关联资源加载（适合自动脚本触发的重定向） #

我们可以利用浏览器的Performance API，追踪iframe加载的资源，结合顶层窗口的卸载事件，找到时间上最接近的iframe资源加载记录，以此缩小范围：

// 监听所有资源加载，记录iframe发起的请求
const resourceObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.initiatorType === 'iframe') {
      console.log(`iframe资源加载: ${entry.name}，来自iframe: ${entry.initiator}`);
      // 可以把这些记录存到数组里，方便后续对比
    }
  });
});
resourceObserver.observe({ entryTypes: ['resource'] });

// 监听窗口卸载事件，输出最近的iframe资源记录
window.addEventListener('beforeunload', () => {
  const recentIframeResources = performance.getEntriesByType('resource')
    .filter(entry => entry.initiatorType === 'iframe')
    .slice(-5); // 取最近5条记录
  console.log('最近加载的iframe资源:', recentIframeResources);
});

这个方法是间接推测，但在很多自动跳转的场景下，能帮你锁定可疑的iframe——毕竟跳转前大概率会加载相关脚本或资源。

方法3：重写顶层location的setter（适合同域/部分跨域场景） #

如果是同域iframe，我们可以重写顶层窗口location的href和replace方法，直接捕获调用源：

const originalHrefSetter = Object.getOwnPropertyDescriptor(window.location, 'href').set;
Object.defineProperty(window.location, 'href', {
  set(value) {
    // 尝试获取调用栈
    const stack = new Error().stack;
    console.log('location.href被修改:', value, '\n调用栈:', stack);
    // 执行原方法
    return originalHrefSetter.call(this, value);
  }
});

// 同样处理replace方法
const originalReplace = window.location.replace;
window.location.replace = function(value) {
  const stack = new Error().stack;
  console.log('location.replace被调用:', value, '\n调用栈:', stack);
  return originalReplace.call(this, value);
};

不过要注意：跨域iframe调用top.location时，浏览器会隐藏调用栈（出于同源策略安全限制），所以这个方法对跨域iframe只能捕获到修改行为，但没法直接定位到具体iframe。

最后说一句 #

跨域场景下没有100%精准的方案，但结合上面的方法，基本能覆盖大部分常见情况了。如果是开发环境，还可以试试Chrome的调试工具API（需要扩展权限），能更深入地追踪导航触发源。

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