Question

如何获取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中？

谢谢。

Answer 1

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

Answer 2

尝试使用像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

Answer 3

好吧，如果适合您，我建议建议使用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.
        }
    }
}

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

iFrame中html元素的精确坐标

3 个答案: