9

我的问题

什么 JavaScript 代码会告诉我浏览器的视口相对于屏幕的位置？

语境

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

问题是机器人的createScreenCapture使用相对于整个屏幕的矩形，而我想捕获相对于视口的矩形。

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

到目前为止我的研究

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

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

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

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

屏幕- 又名桌面。例如，我有一个 WSXGA+ (1680x1050) 显示器。我使用 Windows，我的任务栏总是显示在底部，因此它垂直消耗大约 50 像素。

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

视口- 实际呈现 URL 的位置。

4

2 回答 2

3

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];
    }
}
于 2012-11-14T17:56:34.923 回答
1

您的小程序通过 getLocationOnScreen() 知道它的位置

这是一个 Java 小程序，当您在其中时，它会打印鼠标光标的屏幕位置：

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

屏幕测试.html：

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

这是一个由 javascript 调用的更简单的示例。小程序在页面的左上角是 1px x 1px。

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

屏幕测试2.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>
于 2012-11-08T01:23:44.867 回答