How to get document.body browser coordinates relative to the screen?

Question

There must be a way to find this. I need to find out the coordinates of document.body relative to the screen

I need to find out the coordinates of the question mark in the image. This will be the position of the document body relative to the screen. The image gives a description of the properties that I could use. Is it possible?

Answer 1

bobbel on WebDeveloper.com suggests getting the width of the border by comparing the width of the inner and outer windows, and then subtracting this from the inside — leveling the height to get the size of the window title for the values ​​you can add to screenX and 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; 

Of course, this does not guarantee correctness - it is possible that the user has a browser with a bar at the bottom, or window decorations that have different widths on the sides / bottom - but this is an accurate, practical workaround for the top -level of the browser in each browser configuration / default browser window I can think of. (Of course, this will not work for pages in an iframe.)

---

The right solution for this would be to offer a specification on the whatwg mailing list to make innerScreenX and innerScreenY the standard, as described in the discussion of Chromium 151983's problem regarding the implementation of a similar value for mozInnerScreenX / Y for Chrome. It seems like no one has found time for this, though (although this is a crazy suggestion to implement an asynchronous API function to "calculate" this).

Answer 2

How did you draw it

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

However, I would not trust this in all browsers.

Edit:

In firefox you can use:

 x = window.mozInnerScreenX y = window.mozInnerScreenY 

There may be an equivalent in Chrome. If you only need to support these two browsers, you can use your own code for each.