Trung tâm cá nhân
sách gpt4 ai đã đi

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

In lại 作者：行者123 更新时间：2023-12-01 05:57:15 26 4
mua khóa gpt4 Nike

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

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

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

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

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

有人尝试过这个吗？

1 Câu trả lời

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

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

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

关于jquery - 元素相对于浏览器的 X 和 Y 位置(注 : Frames are involved)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14453671/

26 4 0
Bài viết được đề xuất: jquery - 如何在浏览器中获取 'moving through clouds'动画？
Bài viết được đề xuất: python - 国际象棋编程的走棋和撤棋
Bài viết được đề xuất: java - 为什么 getPreferredSize() 返回的大小对于此 JDialog 来说太小？
Bài viết được đề xuất: java - @JoinTable是否有属性 "table"？
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com