点击iframe内部元素时，如何获取父窗口的坐标？

问题原因 #

你拿到的event.clientX/Y是相对于iframe自身视口的坐标，并非父窗口的坐标。要得到父窗口维度的坐标，必须结合iframe元素在父页面中的实时位置信息进行转换计算。

解决方案（同域场景） #

如果iframe和父页面同域，直接在父页面中通过getBoundingClientRect()获取iframe的位置，再与点击坐标相加即可：

修改你的React代码如下：

useEffect(() => {
    const iframe = document.getElementById('titanpad') as HTMLIFrameElement;
    const iframeDocument = iframe?.contentDocument || iframe?.contentWindow?.document;

    const handleClick = (event: MouseEvent) => {
      if (!iframe) return;
      // 获取iframe在父窗口视口的实时位置信息
      const iframeRect = iframe.getBoundingClientRect();
      
      // 计算相对于父窗口视口的坐标
      const viewportX = event.clientX + iframeRect.left;
      const viewportY = event.clientY + iframeRect.top;
      
      // 计算相对于父窗口文档的坐标（包含父窗口滚动偏移）
      const parentDocX = viewportX + window.scrollX;
      const parentDocY = viewportY + window.scrollY;
      
      setClickCoordinates({ x: parentDocX, y: parentDocY });
    };

    if (iframeDocument) {
      iframeDocument.addEventListener('click', handleClick);
    }

    return () => {
      if (iframeDocument) {
        iframeDocument.removeEventListener('click', handleClick);
      }
    };
  }, []);

解决方案（跨域场景） #

如果iframe和父页面跨域，需要通过postMessage传递点击坐标，再在父页面中完成计算：

1. iframe内部代码（需控制iframe内容时）：

document.addEventListener('click', (e) => {
  // 向父窗口发送点击事件的核心坐标数据
  window.parent.postMessage(
    {
      type: 'IFRAME_CLICK',
      clientX: e.clientX,
      clientY: e.clientY
    },
    'https://你的父窗口域名.com' // 避免用*，指定具体origin更安全
  );
});

2. 父页面React代码：

useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // 验证消息来源和类型，拦截恶意消息
      if (event.origin !== 'https://你的iframe域名.com' || event.data.type !== 'IFRAME_CLICK') {
        return;
      }
      
      const iframe = document.getElementById('titanpad') as HTMLIFrameElement;
      if (!iframe) return;
      
      const iframeRect = iframe.getBoundingClientRect();
      // 计算父窗口文档坐标
      const parentDocX = event.data.clientX + iframeRect.left + window.scrollX;
      const parentDocY = event.data.clientY + iframeRect.top + window.scrollY;
      
      setClickCoordinates({ x: parentDocX, y: parentDocY });
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
}, []);

关键说明 #

• getBoundingClientRect()会实时获取iframe在父窗口的位置（包含边框、页面布局变化等影响因素），必须在每次点击时计算，不能提前缓存。
• 如果只需要父窗口视口坐标（不包含父窗口滚动偏移），直接使用viewportX/Y即可，无需添加window.scrollX/Y。

内容的提问来源于stack exchange，提问作者Juancho Plass Cedillo