在 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 Window x/y 坐标
【发布时间】：2012-12-16 13:29:46
【问题描述】：

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

在 Linux 上打开 Firefox（此处不涉及 MS Windows）。
浏览到某个网页。
键入 CTRL-f 开始查找页面中存在的文本“foo”。
Firefox 然后按预期突出显示文本。
键入 Escape 键可消除页面底部的查找工具栏。

现在，此时，我想打开 Scratchpad (Shift-F4)，然后键入一些 javascript，它将向控制台输出突出显示的文本左上点的 X 和 Y 坐标/已选中（再次澄清，坐标必须是顶级 X 窗口坐标）。坐标需要转换成相对于顶级 X 窗口（Firefox 窗口）的坐标。

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

selected text and xy coordinates 问题似乎与此类似。 window.getSelection() 方法返回文本字符串，但我正在寻找该字符串的 X 和 Y 坐标，因为它在 X 窗口上。

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

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

编辑#3：Tim Downs answer 的后续行动：这是有效的，但需要注意的是：

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

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

我已就accessing the scaling factor during debugging 提出了一个单独的相关问题。

【问题讨论】：

标签： firefox coordinates selection

【解决方案1】：

您可以使用从选择中获得的范围的getClientRects() 方法来执行此操作。见https://stackoverflow.com/a/6847328/96100

要将getClientRects() 返回的矩形返回的坐标转换为相对于“屏幕”的坐标仅在 Firefox 中，您可以使用window.mozInnerScreenX 和window.mozInnerScreenY。演示如下；在 Windows 上的 Firefox 中，结果似乎是合理的。

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

【讨论】：

将答案标记为有用。但是，我真正需要的是所选文本范围左上角的Firefox X（X11）窗口的顶级X窗口坐标，而不是相对于“文档”对象。
@bgoodr：您可以在 Firefox 中通过将 window.mozInnerScreenX 和 window.mozInnerScreenY 添加到您的 x 和 y 坐标中来获得它，尽管我从未使用过这些，因此无法保证他们。
@Tim_Down：非常感谢！这可能是我正在寻找的东西，但我必须在stackoverflow.com/a/6847328/257924 处修改您的 jsfiddle 的修改副本，以在目标 X 窗口管理器上确认它，看看它是否足够可靠。
@Tim_Down：我看到您对答案的编辑，但 jsfiddle.net 演示链接没有显示任何 Javascript 代码。请问你能解决这个问题吗？
@Tim_Down: jsfiddle.net/aSUSh/5 表示在stackoverflow.com/a/6847328/96100 也没有出现。嗯，也许这是 jsfiddle.net 上的一个小故障？

【解决方案2】：

鉴于 jsfiddle.net 没有响应（在 Tim's answer 中引用），我正在回复下面我自己的解决方案也解决了我在 “编辑#3”在我关于获取比例因子的问题中。

以下 Javascript 代码演示了如何正确获取选定文本的缩放原点坐标。选定的文本包括如果您键入 CTRL-f 时选择的内容，键入一些文本然后选择，然后键入 Escape。

为了使screenPixelsPerCSSPixel 不可用抛出异常，devtools.chrome.enabled 标志 about:config 应设置为 true，您必须使用 Scratchpads Environment 菜单选择Browser 配置（详见Inspecting Firefox Components.interfaces.nsIDOMWindowUtils.screenPixelsPerCSSPixel value in Javascript Scratchpad）。

为避免安全隐患，请务必转devtools.chrome.enabled 尝试下面的代码后标记回 false。

应用上述配置更改后，键入以下内容将文本输入 Scratchpad，将光标放在“结果”之后结束，按CTRL-L查看结果。

var contentWindow = window.content;
var sel = contentWindow.getSelection();
var result = "no_selection";
if (sel.rangeCount) {
    var range = sel.getRangeAt(0).cloneRange();
    if (range.getClientRects) {
        range.collapse(true);
        var rect = range.getClientRects()[0];
        if (rect) {
            x = rect.left;
            y = rect.top;
            x += contentWindow.mozInnerScreenX;
            y += contentWindow.mozInnerScreenY;
            var util = contentWindow.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
            x *= util.screenPixelsPerCSSPixel;
            y *= util.screenPixelsPerCSSPixel;
            result = "" + x + " " + y;
        }
    }
}
result

我验证了上述句柄在内容窗口，使得生成的坐标值嵌入 result 字符串对应于绝对 X 根窗口坐标。我没有在 MS Windows 上测试过上述内容。

【讨论】：