获取DOM元素的屏幕坐标 [英] Get screen coordinates of DOM element

问题描述

我可以以某种方式获得DOM对象的精确屏幕坐标（相对于屏幕的左上角）。通过NPAPI\FireBreath或JavaScript。 （需要这个插件，我用FireBreath写
）

Can I somehow get precise screen coordinates (relative to top left corner of the screen) of a DOM object. Through NPAPI\FireBreath or JavaScript. (Need this for plugin, that I'm writing with FireBreath)

推荐答案

PS：我知道我做了问题很久以前，但我想总结一下我到底是什么。

P.S.: I know I made this question long ago, but I want to summarize what I got at the end.

element.offsetLeft\Top 无法真正解决问题。 >
从HTML中，您可以获取坐标，相对于页面空间的左上角，而不是用户屏幕本身。

element.offsetLeft\Top doesn't work truly the way it meant to be in question.
From the HTML you can get coords, relative to top-left corner of page's space, not the user screen itself.

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

And from plugin, by GetWindowRect() winAPI function you can get coordinates of top-left corner of the browser window, relative to user screen, and by GetClientRect() you can get coords of the top left corner of Client rectangle.

但是，它不是与页面左上角相同的点，在页面空间的角落和客户端rect或窗口rect之间总是有一些东西。它包括顶部浏览器栏和其他东西。

BUT, it isn't the same point as top-left of page, there is always something between corner of page's space, and client rect, or window rect. It includes top browser bars and other stuff.

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

What you can do? It seems that there is no easy 100% controllable way:

你可以尝试考虑那些浏览器栏，并计算 Client rect 和页面的矩形，但是这些浏览器栏不是从用户到用户的不变，一个可以有更多的，另一个，你会得到你的所有坐标系统搞砸了。然后，你可以以某种方式注册到浏览器的安装条和添加量，根据计算的空间量，将被他们使用，但酒吧和添加不一样，再次，你有太多的变量要考虑。

You can try to consider those browser bars and calculate the space between Client rect and page's rectangle, but those browser bars not constant from user to user, one can have more of them, that another, and you will get all your coordinate system screwed up. Then, you can somehow register the amount of installed bars and additions to browser, and according to that calculate amount of space, that will be consumed by them, but bars and additions not the same, and again you got way too much variables to consider.

有一个更简单的方法，你可以不从顶部，但从底部 - 得到的底部点的rect的坐标和通过一些计算与HTML的 element.offset - 将坐标系统绑定到窗口的左下角。

底部没有用户浏览器栏，因此可以在页面和窗口角之间的空间有点更自信，但一些浏览器有弹出式栏有下载信息等，在这里我们得到了一切烂了。

There is a bit easier way, you can go not from top, but from the bottom - get the coord's of bottom point of rect and throught some calculations with HTML's element.offset - bind your coordinate system to bottom-left point of the window.
You got no user browser bars at the bottom, and therefore can be a little more confident in space between page and window corner, but some browsers got pop-up bars there with download information e.t.c, and here we got everything screwed up again.

另一个选择是使用模态窗口 - 即通过 window.open（）从模式窗口打开页面，您可以控制浏览器控件和栏中的数量，你可以摆脱所有这些用户栏，并使一个清晰的窗口只有地址栏和页面。现在你有更多的控制，几乎可以肯定，角落之间的这个空间将是相同的所有用户...几乎。

有两件事需要提及：

Another option is to use modal window's - i.e. open the page in modal window through window.open() from your JavaScript, you can control amount of browser controls and bars in those windows, you can get rid of all those userbars and make a clear window only with adress bar and the page. Now you got much more controll, and can almost be sure, that this space between corners will be the same for all your users... almost.
There is two things need to be mentioned:

1）有些浏览器（例如我记得的google chrome）让那些自定义浏览器添加（例如Firebug）在adress bar附近显示为小图标，靠近模态窗口的地址栏。

你可以问的区别是什么 - 区别是，由于某种原因，浏览器窗口的顶部将变成大约5像素，如果甚至有一个这些图标（再次，你可以尝试注册，是否有任何安装在用户浏览器上，或不安装）

如果，反正，这些5px对你不重要 - 它可以是一种方式去

1)Some browsers (for example google chrome, as I remember) got those custom browser additions (Firebug for example) to appear as small icons near adress bar, and they are still appearing near the adress bar of the modal window.
What the difference you can ask - the difference is, that, for some reason, top of the browser window will became around 5 pixels fatter, if there's even one of those icons.(again you can try to register, are there any of those installed on user browser, or not)
And if, anyway, those 5px not crucial for you - it can be a way to go.. if you're ok with the next thing.

2）明显的一个 - 使用模态窗口的乐趣可能对最终用户不舒服，它剪切一些浏览器轮廓和力学，浏览器用户习惯。

2)Obvious one - that fun with modal windows can be uncomfortable for end-user, cos it cuts some browser contols and mechanics that browser users get used to.

这篇关于获取DOM元素的屏幕坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！