My question

What JavaScript code will tell me where the viewport of the browser is located relative to the screen?

Context

My web application includes an applet that allows taking a snapshot via java.awt.Robot (the applet's jar is of course signed and is privileged to perform this).

The problem is that Robot's createScreenCapture works with rectangles relative to the entire screen, whereas I want to capture a rectangle relative to the viewport.

A browser can obviously be anywhere on the screen, but even if it is maximized (and therefore begins at the top left of the screen, i.e. {0,0}) I still don't know how much the content is pushed down because of the window header or some toolbars.

My research so far

It seems only IE gives the viewport position through window.screenTop/Left.

Chrome supports these, but they hold the browser position.

FF doesn't support these, instead it has screenX/Y, but like Chrome they hold the browser position.

Making sure we all use the same terminology

Screen - AKA the desktop. for example I have a WSXGA+ (1680x1050) display. I use Windows and my taskbar is always shown at the bottom so it consumes about 50 pixels vertically.

Browser - a window that may or may not have various toolbars: address and/or bookmarks bar at the top, status/add-on bars at the bottom, etc.

Viewport - where a URL is actually being rendered.

My question

What JavaScript code will tell me where the viewport of the browser is located relative to the screen?

Context

My web application includes an applet that allows taking a snapshot via java.awt.Robot (the applet's jar is of course signed and is privileged to perform this).

The problem is that Robot's createScreenCapture works with rectangles relative to the entire screen, whereas I want to capture a rectangle relative to the viewport.

A browser can obviously be anywhere on the screen, but even if it is maximized (and therefore begins at the top left of the screen, i.e. {0,0}) I still don't know how much the content is pushed down because of the window header or some toolbars.

My research so far

It seems only IE gives the viewport position through window.screenTop/Left.

Chrome supports these, but they hold the browser position.

FF doesn't support these, instead it has screenX/Y, but like Chrome they hold the browser position.

Making sure we all use the same terminology

Screen - AKA the desktop. for example I have a WSXGA+ (1680x1050) display. I use Windows and my taskbar is always shown at the bottom so it consumes about 50 pixels vertically.

Browser - a window that may or may not have various toolbars: address and/or bookmarks bar at the top, status/add-on bars at the bottom, etc.

Viewport - where a URL is actually being rendered.

• javascript

Share Improve this question Follow asked Nov 6, 2012 at 15:21 targumontargumon 1,1011212 silver badges2727 bronze badges 5

• Sorry mate, I was in a hurry and I didn't pay attention to the full question... – Ofir Hadad Commented Nov 6, 2012 at 15:41
• All DOM events give you the mouse coordinates relative to the viewport and relative to the screen. Just do event.screenX - event.clientX and your are ready to go. You can do it in response to any event like mousemove, mouseover, mousedown, etc.. – GetFree Commented Jun 26, 2018 at 11:19
• @GetFree Please go to example. using Chrome, open devtools, paste this document.addEventListener('click', function(e) {console.log(e.screenX - e.clientX)}) and click a few times to see the number. Now hit ⌘-shift-B / ctrl-shift-B to toggle the bookmarks bar. Click again. Is it a different number? No? Then you didn't answer this question from 2012. But thanks for trying! – targumon Commented Jun 27, 2018 at 20:55
• @targumon, you must be joking. The bookmarks bar changes the Y coordinate not the X coordinate. – GetFree Commented Jun 27, 2018 at 22:17
• @GetFree sorry, you're right! (shouldn't have replied at midnight and be confused by your reply that used X instead of Y) Anyway, the problem with your solution is that is assumes a mouse event such as click. It won't work for a scroll event for example. It certainly won't work for a keyboard event. – targumon Commented Jun 28, 2018 at 12:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Jon Hulka's answer totally earned him his credit - works perfect for me!

If someone else gets here and need a solution that doesn't use applets (my question asked for JavaScript code), they can try the (promising*) solution below.

*= It assumes browsers don't have too much stuff at the bottom of their windows.

function cacheElemImage(element) {
    var x, y, pos = findPosition(element);
    // screenTop/Left supported on all except FF. screenX/Y supported on all except IE.
    // In addition IE returns viewport top/left while FF & Chrome return browser window top/left.
    // Opera & Safari yet to be tested.
    if (isIE()) {
        x = window.screenLeft;
        y = window.screenTop;
    } else {
        var borderWidth = (window.outerWidth - window.innerWidth) / 2;
        x = window.screenX + borderWidth;
        y = window.screenY + window.outerHeight - window.innerHeight - borderWidth;
    }
    x += pos[0]; // adjust for the element position
    y += pos[1];
    var width  = element.offsetWidth;
    var height = element.offsetHeight;
    cacheImage(x, y, width, height); // call the applet with the Robot
}

function findPosition(oElement) {
    if (typeof(oElement.offsetParent) != 'undefined') {
        for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
            posX += oElement.offsetLeft;
            posY += oElement.offsetTop;
        }
        return [posX, posY];
    } else {
        return [oElement.x, oElement.y];
    }
}

Your applet knows its location via getLocationOnScreen()

Here is a Java applet that prints the screen location of the mouse cursor while you are inside of it:

ScreenTest.java:

import java.awt.Point;
import java.awt.Graphics;
import java.applet.Applet;
import java.awt.event.MouseMotionListener;
import java.awt.event.MouseEvent;
public class ScreenTest extends Applet implements MouseMotionListener
{
    public ScreenTest()
    {
        this.addMouseMotionListener(this);
    }
    public void mouseDragged(MouseEvent e)
    {
    }
    public void mouseMoved(MouseEvent e)
    {
        Graphics g = getGraphics();
        Point loc=getLocationOnScreen();

        String s=(loc.getX()+e.getX())+":"+(loc.getY()+e.getY());
        g.clearRect(0,0,1000,100);
        g.drawString(s, 10, 10);
    }
}

screentest.html:

<html>
    <head></head>
    <body>
        <applet code="ScreenTest.class" name="screenTest" height=100 width=1000></applet>
    </body>
</html>

Here's a simpler example called by javascript. The applet is 1px by 1px in the upper left corner of the page.

ScreenTest2.java:

import java.awt.Point;
import java.applet.Applet;
public class ScreenTest2 extends Applet
{
    public String test(int x, int y)
    {
        Point loc=getLocationOnScreen();
        return (loc.getX()+x)+":"+(loc.getY()+y);
    }
}

screentest2.html:

<html>
    <head></head>
    <body onclick="buttonClick(event);" style="margin:0; border:0; height:800px">
        <applet code="ScreenTest2.class" name="screenTest2" height=1 width=1></applet>
    </body>
    <script>
        function buttonClick(evt)
        {
            alert(screenTest2.test(evt.clientX,evt.clientY));
        }
    </script>
</html>