javascript - 如何获得相对于屏幕的视口(viewport)位置？

Question

我的问题

哪些 JavaScript 代码会告诉我浏览器的视口(viewport)相对于屏幕的位置？

上下文

我的 Web 应用程序包含一个允许通过 java.awt.Robot 拍摄快照的小程序(小程序的 jar 当然是签名的并且有权执行此操作)。

问题是 Robot 的 createScreenCapture 使用相对于整个屏幕的矩形，而我想捕获相对于视口(viewport)的矩形。

浏览器显然可以在屏幕上的任何位置，但即使它最大化(因此从屏幕左上角开始，即 {0,0})我仍然不知道内容被推送了多少由于窗口标题或某些工具栏而向下。

我目前的研究

似乎只有 IE 通过 window.screenTop/Left 给出视口(viewport)位置。

Chrome 支持这些，但它们占据了浏览器的位置。

FF 不支持这些，取而代之的是 screenX/Y，但与 Chrome 一样，它们占据浏览器位置。

确保我们都使用相同的术语

屏幕 - 又名桌面。例如，我有一个 WSXGA+ (1680x1050) 显示器。我使用 Windows，我的任务栏始终显示在底部，因此它在垂直方向上占据了大约 50 个像素。

浏览器 - 一个窗口，可能有也可能没有各种工具栏:顶部的地址和/或书签栏，底部的状态/附加栏等。

Viewport - 实际呈现 URL 的地方。

Answer 1

Jon Hulka 的回答完全赢得了他的赞誉 - 对我来说非常完美!

如果其他人来到这里并且需要不使用小程序的解决方案(我的问题是针对 JavaScript 代码提出的)，他们可以尝试下面的(妥协*)解决方案。

*= 它假设浏览器的窗口底部没有太多东西。

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];
    }
}