你如何获得浏览器的document.body相对于屏幕的坐标？

Question

必须有办法找到这个。 我需要找出document.body相对于屏幕

的坐标

我需要弄清楚图像中问号的坐标。这将是文档正文相对于屏幕的位置。该图像给出了我可以使用的属性的描述。 可能吗？

Answer 1

bobbel on WebDeveloper.com建议通过比较内部窗口宽度和外部窗口宽度来获取边框的宽度，然后从内部 - 外部高度差中减去该宽度，以获得可添加到screenX的值的窗口标题的大小和screenY：

// compute width of borders
var borderWidth = (window.outerWidth - window.innerWidth) / 2;

// compute absolute page position
var innerScreenX = window.screenX + borderWidth;
var innerScreenY = (window.outerHeight - window.innerHeight - borderWidth) + window.screenY;

当然，这不能保证是正确的 - 用户完全有可能在底部有一个带有条形的浏览器，或者在侧面/底部有不同宽度的窗口装饰 - 但它＆对于我能想到的每个默认浏览器/窗口配置中的顶级浏览器窗口，这是一个准确，实用的解决方法。 （当然，这对iframe中的页面不起作用。）

---

正确的解决方案是在whatwg邮件列表上提出一个规范，使innerScreenX和innerScreenY成为标准，如the discussion on Chromium issue 151983中关于实现mozInnerScreenX /的类似值所述Y代表Chrome。但是，似乎没有人花时间这样做（虽然有this疯狂的提议来实现异步API函数来计算＆＃34;它。）

Answer 2

正如你在那里画的那样，

x = window.screenLeft
y = window.screenTop + (window.outerHeight - window.innerHeight)

但是，我不相信这会在所有浏览器中保持一致。

编辑：

在firefox中你可以使用：

x = window.mozInnerScreenX
y = window.mozInnerScreenY

Chrome中可能存在等效内容。如果您只需要支持这两个浏览器，则可以为每个浏览器使用自定义代码。