Electron WebContentsView 位置偏高？你传的坐标系根本不对

给 Electron 应用加了浏览器风格的多标签页，每个 tab 是同域 <iframe>，改完之后嵌入的原生视图（WebContentsView）突然往上飘——精确地盖住了顶栏和标签条。宽高正常，只有 y 轴出了问题，偏移量恰好等于外层 chrome 的高度。这种"改了一件事、另一件事出问题"的场景，往往意味着有一个坐标系边界被悄悄越过了。

现象

重构前，整个应用是一张顶层文档，占满 BrowserWindow。代码这样定位原生视图：

const rect = viewportRef.current.getBoundingClientRect()
await window.electron.browser.setBounds({
  x: Math.round(rect.x),
  y: Math.round(rect.y),
  width: Math.round(rect.width),
  height: Math.round(rect.height),
})

加了多标签后，每个业务页面被装进同域 <iframe>，外层保留顶栏（64px）和标签条（40px）。原生视图应该从 y = 112 开始渲染，实际却从 y ≈ 8 开始，整整高出 104px，把顶栏和面包屑完全压在下面。

根因

getBoundingClientRect() 返回的坐标相对于调用文档的视口。当这段代码跑在 <iframe> 里，y = 0 指的是 iframe 文档的顶部，不是 BrowserWindow 内容区的顶部。

而 setBounds 接受的是 BrowserWindow 内容区坐标。WebContentsView 是挂在 BrowserWindow 的原生合成层上的，它对"我属于哪个 iframe"毫无感知——它只认窗口坐标系。

坑：iframe 内的 getBoundingClientRect 返回局部坐标，setBounds 却要窗口坐标

在 iframe 里量到 rect.y = 8，直接传给 setBounds 就是在说"从窗口顶部往下 8px"。外层 chrome 高 104px，原生视图就会精确地盖住整条顶栏——而且 width/height 看起来完全正常，让你误以为只是"偏移了一点"。

正解

在 setBounds 前，加上 iframe 本身在父文档里的位置偏移：

const rect = viewport.getBoundingClientRect()
 
let offsetX = 0
let offsetY = 0
try {
  if (window.parent !== window && window.frameElement) {
    const frameRect = window.frameElement.getBoundingClientRect()
    offsetX = frameRect.x
    offsetY = frameRect.y
  }
} catch {
  // 跨域父页面：frameElement 访问抛异常，需要 postMessage 方案
}
 
await browser.setBounds({
  x: Math.round(rect.x + offsetX),
  y: Math.round(rect.y + offsetY),
  width: Math.round(rect.width),
  height: Math.round(rect.height),
})

window.frameElement 是父文档视角下的 <iframe> 元素，调用它的 getBoundingClientRect() 拿到的是它在父文档视口里的位置——正好是 BrowserWindow 内容区坐标（当父文档是顶层文档时）。把这个偏移加进去，坐标系就对齐了。

正解：用 frameElement.getBoundingClientRect() 补上 iframe 的偏移量

frameElement 仅在同域 iframe 中可访问，跨域会抛异常（try/catch 必须加）。顶层文档里 window.parent === window，判断后跳过，不影响非 iframe 场景。宽高不需要修正——它们在任何坐标系里的值都一样。

还需要注意

动态 resize：外层 chrome 高度变化（字号缩放、主题切换导致顶栏高度变化）时，iframe 内部的 resize 事件同样会触发，只要 syncBounds 里重新读一次 frameElement.getBoundingClientRect() 就能自动跟随。不需要额外监听。

跨域 iframe：window.frameElement 跨域返回 null，无法直接读偏移。替代方案：让父页面通过 postMessage 把 iframe.getBoundingClientRect() 的结果定期发进来，或者把 setBounds 调用整体移到父文档执行。

验证方式：在 DevTools 切到 iframe 上下文，执行：

const r = document.querySelector('[data-native-viewport]').getBoundingClientRect()
const f = window.frameElement.getBoundingClientRect()
console.log({ iframeLocal: r.y, windowCoord: r.y + f.y })

windowCoord 应该和你肉眼看到的原生视图顶部位置吻合。

一句话外卖

getBoundingClientRect 的坐标系跟着调用者走，setBounds 的坐标系跟着 BrowserWindow 走——两者在 iframe 架构里天然不对齐，补上 frameElement 的偏移才能缝合。