在Firefox中查找CTRL-F文本的顶级X Window x / y坐标 [英] Finding top-level X Window x/y coordinates of CTRL-F text in Firefox

问题描述

我需要以编程方式确定在Firefox中使用CTRL-f找到的文本的顶级X窗口坐标。例如，从这个序列开始：

1. 在Linux上打开Firefox（这里不涉及MS Windows）。

$ b
2. 键入CTRL-f开始查找页面中存在的文本foo。


3. 然后，Firefox会按预期突出显示文本。


4. 输入Escape键，消除页面底部的查找工具栏。

现在，在这一点上，我想打开Scratchpad（Shift-F4），然后输入一些javascript文件，这个javascript文件会把文本左上角的X坐标和Y坐标输出到控制台这是突出显示/选择（再次，澄清，坐标需要是顶级X窗口坐标）。坐标需要转换成相对于顶层X窗口（Firefox窗口）的坐标。

我不想安装任何Firefox扩展，例如Selenium，只是使用直接的JavaScript。如果可能的话，我也不想修改正在加载和查看的页面的内容。

选定的文本和xy坐标问题似乎与此类似。 window.getSelection（）方法返回文本字符串，但是我正在专门查找该字符串的X和Y坐标，因为它在X窗口上。 p>

编辑1：请注意，给出的窗口坐标 http://javascript.info/tutorial/coordinates 与顶层的X窗口坐标不一样。这个问题的一个可行的答案包括完整的仿射变换的JavaScript代码，从元素或节点坐标转换到顶层的X窗口坐标（即使这意味着中间转换成窗口坐标，由 http://javascript.info/tutorial/coordinates ）。

编辑＃ 2：可能的答案是在 https://stackoverflow.com/a/14119731/257924 中的作品，但我仍然确认它。通过下面的编辑＃3确认：

编辑＃3：后续蒂姆Downs答案：这是什么工作，一个警告：

$ p $ var sel = window.getSelection（）;
var result =no_selection;
if（sel.rangeCount）{
var range = sel.getRangeAt（0）.cloneRange（）;
if（range.getBoundingClientRect）{
range.collapse（true）;
var rect = range.getBoundingClientRect（）;
if（rect）{
x = rect.left;
y = rect.top;
x + = window.mozInnerScreenX;
y + = window.mozInnerScreenY;
result =+ x ++ y;


$ b $结果


需要注意的是，如果用户通过在页面中按CTRL-PLUS或
CTRL-MINUS缩放页面，则x和y值将不正确
（缩放问题）。但是我发现如果不涉及缩放，那么x
和y值就是绝对的X根窗口（在Linux下的X11下）
坐标，而不是相对于Firefox X根窗口的原点
这是我原来要求。

我已经问了一个单独的相关问题关于

解决方案

您可以使用从选择中获取的范围的 getClientRects（）方法来执行此操作。请参阅 https://stackoverflow.com/a/6847328/96100

要将由 getClientRects（）返回的矩形返回的坐标转换为相对于仅在Firefox中的屏幕的坐标，您可以使用 window.mozInnerScreenX 和 window.mozInnerScreenY 。下面的演示;在Windows上的Firefox中看起来似乎是合理的。

http://jsfiddle.net/timdown/gaw5W/1/

I need to programmatically determine the top-level X window coordinates of the text that is found by using CTRL-f in Firefox. For example, starting with this sequence:

1. Open up Firefox on Linux (MS Windows is not involved here).
2. Browse to some web page.
3. Type CTRL-f to start finding text "foo" that exists in the page.
4. Firefox then highlights the text as expected.
5. Type Escape key which eliminates the find toolbar at the bottom of the page.

Now, at this point, I want to open up the Scratchpad (Shift-F4), and type some javascript that will dump out to the console the X and Y coordinates of the top left point of the text that is highlighted/selected (again, to clarify, the coordinates need to be the top-level X window coordinates). The coordinates need to be transformed into coordinates relative to the top-level X window (the Firefox window).

I would prefer not to install any Firefox extensions such as Selenium, just use straight javascript. I also do not want to modify the content of the page being loaded and viewed if possible.

The selected text and xy coordinates question seems similar to this. The window.getSelection() method returns the text string, but I'm looking specifically for the X and Y coordinates of that string as it is on the X window.

EDIT #1: Note that the "window coordinates" given by http://javascript.info/tutorial/coordinates is not the same as the top-level X window coordinates. A viable answer to this question includes the full affine transformation javascript code to transform from Element or Node coordinates to top-level X window coordinates (even if it means intermediate transformations into "window coordinates" as given by http://javascript.info/tutorial/coordinates).

EDIT #2: Possible answer is in the works in https://stackoverflow.com/a/14119731/257924 but I am still confirming it. Confirmed via EDIT #3 below:

EDIT #3: A followup to Tim Downs answer: This is what worked, with a caveat:

var sel = window.getSelection();
var result = "no_selection";
if (sel.rangeCount) {
    var range = sel.getRangeAt(0).cloneRange();
    if (range.getBoundingClientRect) {
        range.collapse(true);
        var rect = range.getBoundingClientRect();
        if (rect) {
            x = rect.left;
            y = rect.top;
            x += window.mozInnerScreenX;
            y += window.mozInnerScreenY;
            result = "" + x + " " + y;
        }
    }
}
result

The caveat is that if the user has scaled the page by pressing CTRL-PLUS or CTRL-MINUS in the page, the x and y values will not be correct (scaling issue). But I found that if scaling is not involved, the x and y values were absolute X root window (under X11 under Linux) coordinates, not relative to the origin of the Firefox X root window, which is what I originally asked for.

I've asked a separate related issue about accessing the scaling factor during debugging.

解决方案

You can do this using the getClientRects() method of a range obtained from the selection. See https://stackoverflow.com/a/6847328/96100

To transform the coordinates returned by the rectangle returned by getClientRects() into coordinates relative to the "screen" in Firefox only, you can use window.mozInnerScreenX and window.mozInnerScreenY. Demo below; the results seem plausible in Firefox on Windows.

http://jsfiddle.net/timdown/gaw5W/1/

这篇关于在Firefox中查找CTRL-F文本的顶级X Window x / y坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！