悬停iframe内部元素时外部div无法获取正确top/left坐标如何解决

问题原因 #

你通过getBoundingClientRect()从iframe内部拿到的元素坐标，是相对于iframe自身视口的，而外层#box的绝对定位是基于父页面视口计算，两者坐标系不统一，所以最终位置偏移。

效果示意图 #

修正方案 #

额外计算iframe元素本身在父页面的偏移量，叠加到iframe内部拿到的坐标上即可，修正后完整代码如下：

<html>
  <body>
    <div>
      <div id="box"></div>
      <p id="a">You clicked on:</p>
      <iframe
        id="zzz"
        srcdoc="<html><h1>hello</h1><button> click </button></html>"
        width="500"
        height="500"
      ></iframe>
    </div>

    <script>
      let elem = "";
      const iframeEle = document.getElementById("zzz");
      const myiframe = iframeEle.contentWindow;
      const div = document.getElementById("box");

      myiframe.addEventListener("mouseover", function (e) {
        elem = e.target;
        // 取iframe内部元素的相对坐标
        const innerRect = elem.getBoundingClientRect();
        // 取iframe自身在父页面的偏移坐标
        const iframeRect = iframeEle.getBoundingClientRect();
        // 坐标系统一为父页面视口
        const x = innerRect.left + iframeRect.left;
        const y = innerRect.top + iframeRect.top;
        const w = innerRect.width;
        const h = innerRect.height;

        document.getElementById("a").innerHTML =
          `${elem.tagName} width: ${w} height: ${h}`;

        div.style.display = "block";
        div.style.position = "absolute";
        div.style.width = `${w}px`;
        div.style.height = `${h}px`;
        div.style.left = `${x}px`;
        div.style.top = `${y}px`;
      });

    </script>
    <style>
      #box {
        border: blue 1px solid;
        display: none;
        /* 避免浮层遮挡iframe内部元素的hover事件 */
        pointer-events: none;
      }
    </style>
  </body>
</html>

优化说明 #

• 给#box添加pointer-events: none属性，让浮层不响应鼠标事件，不会遮挡iframe内部元素的hover触发
• 所有尺寸、坐标赋值统一添加px单位，兼容所有浏览器的解析规则
• 代码使用const声明不变量，避免变量污染

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