9

私の質問

ブラウザのビューポートが画面に対して相対的にどこにあるかを教えてくれる JavaScript コードは何ですか?

環境

私の Web アプリケーションには、 java.awt.Robotを介してスナップショットを取得できるアプレットが含まれています(アプレットの jar はもちろん署名されており、これを実行する特権があります)。

問題は、Robot のcreateScreenCaptureが画面全体に対して長方形で動作するのに対し、ビューポートに対して長方形をキャプチャしたいことです。

ブラウザは明らかに画面のどこにでも配置できますが、最大化されている場合でも (したがって、画面の左上、つまり {0,0} から始まります)、コンテンツがどれだけ押し下げられているかはまだわかりません。ウィンドウ ヘッダーまたは一部のツールバー。

これまでの私の研究

window.screenTop/Leftを介してビューポートの位置を指定するのは IE だけのようです。

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

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

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>
于 2012-11-08T01:23:44.867 に答える