13

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

4

3 回答 3

7

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

element.offsetLeft\Top并没有真正按照它的意思工作。
从 HTML 你可以得到坐标，相对于页面空间的左上角，而不是用户屏幕本身。

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

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

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

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

有一种更简单的方法，您可以不从顶部开始，而是从底部开始 - 获取矩形底部点的坐标并通过 HTML 进行一些计算element.offset- 将坐标系绑定到窗口的左下角。
底部没有用户浏览器栏，因此可以对页面和窗口角落之间的空间更有信心，但是有些浏览器会在此处弹出带有下载信息等的栏，在这里我们又搞砸了。

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 address bar and the page. Now you got much more control, 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)Some browsers (for example google chrome, as I remember) got those custom browser additions (Firebug for example) to appear as small icons near address bar, and they are still appearing near the address 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)Obvious one - that fun with modal windows can be uncomfortable for end-user, cos it cuts some browser controls and mechanics that browser users get used to.

于 2014-01-22T05:11:20.140 回答
5

我知道您没有提到 jQuery，但您可以使用http://api.jquery.com/offset/作为示例。它结合了offsetLeft/top所有父节点和滚动帐户，为嵌套节点提供准确的 x,y（相对于主体）。

请注意，如果您正在处理事件，则事件对象始终使用http://api.jquery.com/event.pageX/和http://api.jquery.com/event.pageY/告诉您事件发生的位置

同样，仅当您不想使用 jQuery 时才提及 jQuery。

这是 jQuery 是如何做到的

$.fn.offset = function (options) {
    var elem = this[0],
        doc = elem && elem.ownerDocument;

    if (!doc) {
        return null;
    }

    if (elem === doc.body) {
        return jQuery.offset.bodyOffset(elem);
    }

    return getOffset(elem, doc, doc.documentElement);
}

function getOffset(elem, doc, docElem, box) {
    try {
        box = elem.getBoundingClientRect();
    } catch(e) {}

    // Make sure we're not dealing with a disconnected DOM node
    if (!box || !jQuery.contains(docElem, elem)) {
        return box ? {
            top: box.top,
            left: box.left
        } : {
            top: 0,
            left: 0
        };
    }

    var body = doc.body,
        win = getWindow(doc),
        clientTop = docElem.clientTop || body.clientTop || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
        scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
        top = box.top + scrollTop - clientTop,
        left = box.left + scrollLeft - clientLeft;

    return {
        top: top,
        left: left
    };
}
于 2013-03-29T16:09:52.293 回答
1

you move cursor to somewhere of the page ,and make a click event.(find the window,then GetWindowRect ,caculate a sutable position) then you can catch the event,record clientX and clientY. By this ,you build a bridge between two different coordinate system.

于 2017-02-10T06:39:04.163 回答