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

tar*_*mon 9 javascript

我的问题

什么JavaScript代码会告诉我哪里有的的浏览器位于相对于屏幕

上下文

我的Web应用程序包含一个applet,允许通过java.awt.Robot获取快照(applet的jar当然已经签名并有权执行此操作).

问题是Robot的createScreenCapture适用于相对于整个屏幕的矩形,而我想捕获相对于视口的矩形.

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

我的研究到目前为止

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

Chrome支持这些,但它们保持浏览器位置.

FF不支持这些,而是​​具有screenX/Y,但与Chrome一样,它们保持浏览器位置.

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

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

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

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

Jon*_*lka 1

您的小程序通过 getLocationOnScreen() 了解其位置

这是一个 Java 小程序,当您位于鼠标光标内部时,它会打印鼠标光标的屏幕位置:

屏幕测试.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);
    }
}
Run Code Online (Sandbox Code Playgroud)

屏幕测试.html:

<html>
    <head></head>
    <body>
        <applet code="ScreenTest.class" name="screenTest" height=100 width=1000></applet>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这是一个由 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);
    }
}
Run Code Online (Sandbox Code Playgroud)

屏幕测试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>
Run Code Online (Sandbox Code Playgroud)