jquery - 元素相对于浏览器的 X 和 Y 位置(注 : Frames are involved)

Question

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

我正在开发的系统是由各种框架组成的。我通常会远离框架，但我目前正在开发一款经常使用框架的软件。

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

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

我尝试过position()、offset()甚至getBoundingClientRect()，但到目前为止还没有成功。

有人尝试过这个吗？

Answer 1

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

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

据我了解，您希望在 ROOT 上渲染弹出窗口(也许是工具提示？)，但根据 1 或 2 中的相关元素来定位它们。这带来了挑战，因为在 ROOT 上完成的任何定位显然都与定位 ROOT 而不是子框架。遵循的准则可能是这样的:

1. 获取元素 (#ID=ELEM) 相对于其所在窗口的绝对位置。
2. 获取对 ROOT 的引用并在 ROOT 上下文中执行弹出窗口定位。
3. 现在您已处于 ROOT 上下文中并且拥有 ELEM 的绝对位置，请修改该位置以将 ELEM 包含框架的绝对位置包含在 ROOT 上下文中，并在该新位置渲染弹出窗口。

使用 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 上渲染弹出窗口的新绝对位置，请使用新的“顶部”和“左侧”坐标调用渲染引擎。

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