Точная координата HTML-элемента в пределах iFrame

Question

Как получить абсолютные координаты x, y для элемента HTML на странице, которая может существовать в iFrame. Страница иногда вызывается сама по себе, а иногда изнутри iFrame.

Это функция, которую я написал для определения положения x, y на основе offsetLeft и offsetTop элемента и offseParent.

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

хорошо, я бы предложил предложенные размеры 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.

Answer 3

Попробуйте использовать JavaScript-фреймворк, такой как Dojo или JQuery. Они обладают всеми этими базовыми функциями и работают согласованно в современных браузерах.

В додзё:

<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 для более подробной информации