Chrome中是否存在等效于mozInnerScreenX/Y且可在iframe中使用的属性？

Firefox的非标准属性mozInnerScreenX/mozInnerScreenY用于获取视口（或iframe可见区域）左上角的屏幕坐标，在Chrome中可以通过以下方式实现相同效果：

1. iframe上下文场景 #

在Chrome的iframe环境中，直接使用标准属性window.screenX（横向坐标）和window.screenY（纵向坐标）即可，它们会返回当前iframe可见区域左上角的屏幕坐标，和Firefox中mozInnerScreenX/mozInnerScreenY的表现完全一致。

2. 主窗口场景 #

对于主窗口，需要结合窗口属性计算视口左上角的屏幕坐标：

• 横向坐标：window.screenX + (window.outerWidth - window.innerWidth) / 2
• 纵向坐标：window.screenY + (window.outerHeight - window.innerHeight)

说明 #

• window.screenX/window.screenY：返回浏览器窗口左上角的屏幕坐标
• window.outerWidth/window.outerHeight：返回整个浏览器窗口的宽高（包含边框、工具栏等）
• window.innerWidth/window.innerHeight：返回浏览器视口的宽高（仅内容显示区域）

如果需要适配主窗口和iframe的通用方案，可以封装工具函数：

function getViewportScreenCoords() {
  if (window.self !== window.top) {
    // iframe环境
    return { x: window.screenX, y: window.screenY };
  }
  // 主窗口环境
  const horizontalOffset = (window.outerWidth - window.innerWidth) / 2;
  const verticalOffset = window.outerHeight - window.innerHeight;
  return {
    x: window.screenX + horizontalOffset,
    y: window.screenY + verticalOffset
  };
}

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