javascript - Get absolute screen bounds of a DOM element from a Firefox extension - Stack Overflow

admin管理员组

文章数量:1346662

I have a firefox extension that needs to get the exact screen co-ordinates of a DOM element and passes it to a native DLL via js/c-types.

Now I have it mostly covered :

var gDomWindowUtils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(nsIDOMWindowUtils);

function getScreenRect(oElem)
{
    var rc =
    {
        x : 0,
        y : 0,
        w : 0,
        h : 0
    };

    var o = oElement;
    while(o != null)
    {
        rc.y += o.offsetTop;
        rc.x += o.offsetLeft;
        o = o.offsetParent;
    }

    var x = {}, y = {};
    gDomWindowUtils.getScrollXY(false, x, y);
    rc.x -= x.value;
    rc.y -= y.value;

    var scale = gDomWindowUtils.screenPixelsPerCSSPixel;
    rc.x *= scale;
    rc.y *= scale;
    rc.w *= scale;
    rc.h *= scale;

    return rc;
};

This handles scrolling and zooming, but the values I get are relative to the browser window, and not the screen.

How do I detect the offset of the client area of the actual rendering area of the browser? I can even use native code (Win32) via js/ctypes so I tried to see if I could use FindWindow() / GetWindowRect() to get it, but the whole of firefox is a single HWND, the controls are all not native windows.

So one idea I have is, since the UI of firefox is an XUL document, I should be able to get the menubar, tab bar etc etc and find the browser areas absolute offset. But, I have no clue how to access the XUL tree that defines the browser UI.

Can someone give me a pointer?

[Edit] Ignore rc.w and rc.h being undefined in the above code , it is irrelevant to the question.

I have a firefox extension that needs to get the exact screen co-ordinates of a DOM element and passes it to a native DLL via js/c-types.

Now I have it mostly covered :

var gDomWindowUtils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(nsIDOMWindowUtils);

function getScreenRect(oElem)
{
    var rc =
    {
        x : 0,
        y : 0,
        w : 0,
        h : 0
    };

    var o = oElement;
    while(o != null)
    {
        rc.y += o.offsetTop;
        rc.x += o.offsetLeft;
        o = o.offsetParent;
    }

    var x = {}, y = {};
    gDomWindowUtils.getScrollXY(false, x, y);
    rc.x -= x.value;
    rc.y -= y.value;

    var scale = gDomWindowUtils.screenPixelsPerCSSPixel;
    rc.x *= scale;
    rc.y *= scale;
    rc.w *= scale;
    rc.h *= scale;

    return rc;
};

This handles scrolling and zooming, but the values I get are relative to the browser window, and not the screen.

How do I detect the offset of the client area of the actual rendering area of the browser? I can even use native code (Win32) via js/ctypes so I tried to see if I could use FindWindow() / GetWindowRect() to get it, but the whole of firefox is a single HWND, the controls are all not native windows.

So one idea I have is, since the UI of firefox is an XUL document, I should be able to get the menubar, tab bar etc etc and find the browser areas absolute offset. But, I have no clue how to access the XUL tree that defines the browser UI.

Can someone give me a pointer?

[Edit] Ignore rc.w and rc.h being undefined in the above code , it is irrelevant to the question.

• javascript
• firefox-addon
• xul
• jsctypes

Share Improve this question Follow edited Feb 29, 2012 at 11:28 rep_movsd asked Feb 29, 2012 at 11:22 rep_movsdrep_movsd 6,90544 gold badges3535 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You mostly got it already but I would remend using getBoundingClientRect() instead of offsetLeft/offsetTop:

var rect = oElement.getBoundingClientRect();
var rc = {
  x: rect.left,
  y: rect.top,
  w: rect.width,
  h: rect.height
};

getBoundingClientRect() considers scrolling so that you no longer need to add it. You get the coordinates relative to screen using window.mozInnerScreenX and window.mozInnerScreenY:

rc.x += window.mozInnerScreenX;
rc.y += window.mozInnerScreenY;

And after that you multiply the values with screenPixelsPerCSSPixel. That should give you proper screen coordinates.

I will add one more "trick" that helped me with a similar problem.

Whenever my code receives a mousemove event, I capture the mouse-cursor positions in ALL the coordinates that event provides, which includes at least "screen", "client" and "pageXY" coordinates. Then for any OTHER purpose I can pute the difference between these coordinates simply by subtracting the appropriate two of those.

In your case, you'd probably pute an offset like this:

deltaX = event.screenX - event.clientX;
deltaY = event.screenY - event.clientY;

or

offsetX = event.screenX - event.pageX;
offsetY = event.screenY - event.pageY;

Then just add deltaX and deltaY or offsetX and offsetY to those coordinates to get screen coordinates.

本文标签： javascriptGet absolute screen bounds of a DOM element from a Firefox extensionStack Overflow