iFrame 中 html 元素的精确坐标答案

【问题标题】：Exact coordinate of html element within an iFrameiFrame 中 html 元素的精确坐标
【发布时间】：2009-04-30 17:14:59
【问题描述】：

如何获取页面上可能存在于 iFrame 中的 HTML 元素的绝对 x,y 坐标。该页面有时会单独调用，有时会从 iFrame 中调用。

这是我编写的函数，用于根据元素的 offsetLeft 和 offsetTop 以及 offseParent 来计算 x,y 位置。

function getXY(obj) 
{
var curObj = obj;
var curLeft = curTop = 0;

curLeft += curObj.offsetLeft
curTop += curObj.offsetTop;

while (curObj.offsetParent != null) 
{
    curObj = curObj.offsetParent;               
    curLeft += curObj.offsetLeft
    curTop += curObj.offsetTop;
}
obj.x = curLeft;
obj.y = curTop;
}

如果页面位于顶部，这很好用，但问题是如果页面是从 iFrame 中运行的，我不知道 iFrame 在页面上的偏移量。

无论页面是否在 iFrame 中，有没有办法获得准确的绝对坐标？

谢谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

我使用JQuery Dimensions 来执行此操作。它可以很好地遍历 DOM 并为您添加所有偏移量。

【讨论】：

谢谢，这很有帮助，我会看看这个细节。

【解决方案2】：

好吧，如果适合您，我会建议建议的 jquery 尺寸。要访问父 iframe，您需要查找 window.parent。然后你可以通过父母递归地得到你的偏移量。

if (window.parent && window.parent.frames && window.parent.document && window.parent.document.getElementsByTagName) {
    var iframes = window.parent.document.getElementsByTagName("IFRAME");
    for (var i = 0; i < iframes.length; i++) {
        var id = iframes[i].id || iframes[i].name || i;
        if (window.parent.frames[id] == window) {
            //iframes[i] is your iframe in your parent.
        }
    }
}

我正在使用这种技术来识别我的 FrameDialog jQueryUI 插件中的框架。

【讨论】：

谢谢，这就是我要找的。我没想到要超出当前窗口，但是使用 window.parent 然后获取对 iframe 的引用是我需要的。谢谢！

【解决方案3】：

尝试使用 Dojo 或 JQuery 等 JavaScript 框架。它们具有所有这些基本功能，并且可以在现代浏览器中始终如一地工作。

在道场：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
// box is an oject {l, t, w, h, x, y}
// (x,y) are the absolute coordinates
// (l,t) are the left and top offsets relative to the parent container
box = dojo.coords(aDomObj);

查看http://docs.dojocampus.org/dojo/coords了解更多详情

【讨论】：