Chrome扩展中如何获取iframe内点击相对于根窗口的精确坐标？

要实现无论点击发生在主文档还是嵌套iframe中，都能获取相对于浏览器窗口视口的坐标，可以结合同域iframe的DOM遍历和跨域iframe的屏幕坐标计算两种方式，避免CORS问题的同时保证准确性。

方法思路 #

1. 对于同域的嵌套iframe：递归向上遍历父窗口，通过frameElement.getBoundingClientRect()累加每个iframe在父视口中的偏移量。
2. 对于跨域的iframe：当无法访问父窗口的DOM时，利用窗口的屏幕坐标属性（screenLeft、screenTop）计算当前iframe视口相对于顶层窗口视口的偏移。
3. 最终将点击事件的clientX/Y（相对于当前iframe视口）加上累计的偏移量，得到相对于浏览器窗口视口的坐标。

代码实现 #

在你的内容脚本中添加以下代码：

// 计算当前窗口视口相对于顶层窗口视口的偏移量
function getViewportOffset() {
  let offsetX = 0;
  let offsetY = 0;
  let currentWin = window;

  // 遍历同域父窗口，累加iframe偏移
  while (currentWin !== window.top) {
    try {
      const frameEl = currentWin.frameElement;
      if (!frameEl) break;
      const rect = frameEl.getBoundingClientRect();
      offsetX += rect.left;
      offsetY += rect.top;
      currentWin = currentWin.parent;
    } catch (e) {
      // 跨域无法访问frameElement，跳出循环
      break;
    }
  }

  // 处理跨域父窗口的偏移计算
  if (currentWin !== window.top) {
    // 当前窗口视口的屏幕坐标
    const currentScreenLeft = currentWin.screenLeft;
    const currentScreenTop = currentWin.screenTop + (currentWin.outerHeight - currentWin.innerHeight);
    // 顶层窗口视口的屏幕坐标
    const topScreenLeft = window.top.screenLeft;
    const topScreenTop = window.top.screenTop + (window.top.outerHeight - window.top.innerHeight);
    // 补充跨域部分的偏移
    offsetX += currentScreenLeft - topScreenLeft;
    offsetY += currentScreenTop - topScreenTop;
  }

  return { x: offsetX, y: offsetY };
}

// 监听点击事件并转换坐标
document.addEventListener('click', (event) => {
  const { x: viewportOffsetX, y: viewportOffsetY } = getViewportOffset();
  // 相对于浏览器窗口视口的坐标
  const browserX = event.clientX + viewportOffsetX;
  const browserY = event.clientY + viewportOffsetY;

  // 这里可以处理坐标逻辑，比如发送给后台脚本
  console.log(`相对于浏览器窗口的坐标：X=${browserX}, Y=${browserY}`);
});

关键说明 #

• 同域iframe处理：通过currentWin.frameElement获取当前窗口对应的iframe元素，调用getBoundingClientRect()得到该iframe在父视口中的位置，累加偏移量。
• 跨域iframe处理：利用窗口的screenLeft（窗口左上角相对于屏幕的X坐标）和screenTop（窗口左上角相对于屏幕的Y坐标），结合outerHeight与innerHeight的差值（非视口区域高度，如标题栏），计算当前视口与顶层视口的屏幕偏移差，补充到总偏移中。
• 兼容性：该方法兼容Chrome浏览器的所有版本，且无需额外权限，仅依赖内容脚本的基础能力。

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