Question

我的问题

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

上下文

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

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

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

到目前为止我的研究

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

Chrome支持这些功能，但它们保持浏览器位置。

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

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

屏幕 - 桌面AKA。例如，我有一个WSXGA +（1680x1050）显示器。我使用Windows，我的任务栏总是显示在底部，所以它垂直消耗大约50个像素。

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

视口 - 实际呈现网址的位置。

Answer 1

Jon Hulka的回答完全赢得了他的信任 - 这对我来说非常完美！

如果其他人来到这里需要一个不使用applet的解决方案（我的问题需要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];
    }
}

Answer 2

您的applet通过getLocationOnScreen（）

知道其位置

这是一个Java applet，可以在你内部时打印鼠标光标的屏幕位置：

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>

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

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>

如何获得相对于屏幕的视口位置？

我的问题

上下文

到目前为止我的研究

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

2 个答案: