2

我正在尝试获取元素相对于浏览器窗口的 X 和 Y 坐标。

我正在研究的系统由各种框架组成。作为一项规则，我通常远离框架，但我目前正在开发一款大量使用框架的软件。

我正在构建一个弹出引擎，该引擎需要将弹出窗口恰好放置在特定元素旁边。这个元素可以在任何时候出现在任何一个帧中的任何位置。

因此，我需要确定一个元素相对于浏览器窗口的 X 和 Y 坐标，这样我就可以将弹出窗口放在它旁边。

我已经尝试过 position()、offset() 甚至 getBoundingClientRect()，但到目前为止都没有运气。

有没有人试过这个？

4

1 回答 1

0

假设您的页面的构造类似于以下内容：

  • 根窗口（即浏览器窗口，#ID=ROOT）
    • 框架（框架集或 iframe，#ID=1）
    • 框架（框架集或 iframe，#ID=2）

据我了解，您想在 ROOT 上渲染弹出窗口（也许是工具提示？），但要根据 1 或 2 中的相关元素定位它们。这带来了挑战，因为在 ROOT 上进行的任何定位显然都与 ROOT 的定位有关而不是子帧。遵循的指导方针可能类似于以下内容：

  1. 获取元素（#ID=ELEM）相对于它的包含窗口的绝对位置。
  2. 获取对 ROOT 的引用并在 ROOT 的上下文中执行您的弹出定位。
  3. 现在您在 ROOT 的上下文中并且拥有 ELEM 的绝对位置，修改位置以在 ROOT 的上下文中包含 ELEM 包含框架的绝对位置，并在该新位置呈现您的弹出窗口。

一些使用 jQuery 的代码指南：

// executing within the context of 1.2:
// get the element to which the popup relates
var ELEM = $("#ELEM");
// get the root window, i.e. ROOT
var ROOT = (function () {
    var r = window;
    while ($("#SOME-UNIQUE-ELEMENT-ON-ROOT", r).length == 0) {
        r = r.parent;
    }
    return r;
})();
// get ELEM's current absolute position in relation to 1.2
var top = ELEM.position().top;
var left = ELEM.position().left;
// get the current document's containing element in relation to ROOT
var C = $((document.parentWindow || document.defaultView).frameElement.parentNode);
// modify ELEM's position to compensate for the absolute position of C on ROOT
top += C.position().top;
left += C.position.left;

现在您有了在 ROOT 上渲染弹出窗口的新绝对位置，使用新的“顶部”和“左侧”坐标调用您的渲染引擎。

希望这有任何意义......

于 2013-01-22T11:38:07.290 回答