javascript - 获取 DOM 元素的屏幕坐标

Question

我能否以某种方式获得 DOM 对象的精确屏幕坐标(相对于屏幕的左上角)。通过 NPAPI\FireBreath 或 JavaScript。 (需要这个插件，我正在写 与 FireBreath)

Answer 1

P.S.:我知道我很久以前就提出过这个问题，但我想总结一下我最后得到的结果。

element.offsetLeft\Top 并没有真正按照问题的方式工作。
从 HTML 中，您可以获得相对于页面空间左上角的坐标，而不是用户屏幕本身。

并且从插件中，通过 GetWindowRect() winAPI 函数，您可以获得浏览器窗口左上角相对于用户屏幕的坐标，并通过 GetClientRect() 你可以得到客户端矩形左上角的坐标。

但是，它与页面左上角不是同一个点，页面空间的 Angular 与客户端矩形或窗口矩形之间总是有一些东西。它包括顶级浏览器栏和其他内容。

你能做什么？似乎没有简单的 100% 可控方式:

您可以尝试考虑那些浏览器栏并计算 Client rect 和页面矩形之间的空间，但是这些浏览器栏在用户之间不是恒定的，一个可以有更多，另一个，你会搞砸你所有的坐标系。然后，您可以以某种方式向浏览器注册已安装的栏和添加项的数量，并根据该计算空间量，它们将被消耗，但是栏和添加项不一样，而且您要考虑的变量太多了.

有一个更简单的方法，你可以不是从顶部，而是从底部 - 获取 rect 的底部点的坐标，并通过 HTML 的 element.offset 进行一些计算 - 绑定(bind)你的坐标系统到窗口的左下角。
你在底部没有用户浏览器栏，因此可以对页面和窗口 Angular 落之间的空间更有信心，但有些浏览器在那里有弹出栏，其中包含下载信息等，在这里我们又把一切搞砸了。

另一种选择是使用模态窗口——即通过 window.open() 从你的 JavaScript 在模态窗口中打开页面，你可以控制这些窗口中浏览器控件和栏的数量，你可以摆脱所有这些用户栏，只用地址栏和页面创建一个清晰的窗口。现在您有了更多的控制权，并且几乎可以肯定， Angular 落之间的空间对于您的所有用户来说都是相同的……几乎。
有两点需要说明:

1) 一些浏览器(例如谷歌浏览器，我记得)让那些自定义浏览器添加(例如 Firebug)在地址栏附近显示为小图标，并且它们仍然出现在模态窗口的地址栏附近。
你可以问有什么区别 - 区别在于，由于某种原因，浏览器窗口的顶部会变得大约 5 个像素，如果这些图标中有一个的话。(你可以再次尝试注册，有没有那些是否安装在用户浏览器上)
如果无论如何，这 5px 对您来说并不重要 - 它可以是一个可行的方法.. 如果您对接下来的事情没问题的话。

2) 显而易见的一点 - 模态窗口的乐趣可能会让最终用户感到不舒服，因为它削减了浏览器用户习惯的一些浏览器控件和机制。