匹配相同父页下两个不同iframes中两个元素的位置和大小。

Question

我试图匹配两个元素在同一父页面下两个不同的元素的位置和大小，但我不知道如何做到。

使用以下代码，我设法将父页中div ("div_parent_page')的位置和大小与父页下的iframe ('iframe-1')中的元素('element_in_iframe-1")的位置匹配起来：

function myFunction() {
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
}
return { top: _y, left: _x };
}
var positionInfo = ( document.getElementById('iframe-
1').contentWindow.document.getElementById('element_in_iframe-1') 
).getBoundingClientRect();
var yheight = positionInfo.height;
var xwidth = positionInfo.width;
var x = getOffset( document.getElementById('iframe-
1').contentWindow.document.getElementById('element_in_iframe-1') ).left;
var y = getOffset( document.getElementById('iframe-
 1').contentWindow.document.getElementById('element_in_iframe-1') ).top;
var d = document.getElementById('div_parent_page');
d.style.position = "absolute";
d.style.left = x+'px';
d.style.top = y+'px';
d.style.width = xwidth;
d.style.height = yheight; ` 
}

var timer =  setInterval(myFunction, 1000);

现在，我将另一个iframe (' iframe-2 ')放在上面提到的div中，我的目标是将iframe-2中的元素element_in_iframe-1.的位置和大小与element_in_iframe-1.的位置和大小相匹配。我添加了以下代码：

var v = document.getElementById('iframe-
2').contentWindow.document.getElementsByClassName('elementXXX');
v.style.position = "absolute";
v.style.left = x+'px';
v.style.top = y+'px';
v.style.width = xwidth;
v.style.height = yheight;
}

显然，这是行不通的，但我不知道如何才能做到这一点。希望你们能启发我，因为我是一个真正的奶奶在编码。谢谢~

Answer 1

1. 如果问题是您的getOffset定位关闭，请参阅这里给出的函数，用于在一个或多个父级下面收集对象的位置的不同示例：

How can I get an object's absolute position on the page in Javascript?

1. 如果问题是您的变量var x和var y现在在iframe中是空的，请参阅这个jFiddle，以获得一个绝对在frame2中定位一个元素的示例，给定从frame1获取的值。

https://jsfiddle.net/5aLp24dd/2/

    var imframe1 = document.getElementById('iframe-1');
    var innerDoc1 = imframe1.contentDocument ||
                    imframe1.contentWindow.document;
    var x = innerDoc1.getElementById ( "carbonads" ).offsetLeft;
    var y = innerDoc1.getElementById ( "carbonads" ).offsetTop;
    alert('x offset: ' + x);
    alert('y offset: ' + y);

    var imframe2 = document.getElementById('iframe-2');
    var innerDoc2 = imframe2.contentDocument ||
                    imframe2.contentWindow.document;
    innerDoc2.getElementById ( "carbonads" ).style.position = "absolute";
    innerDoc2.getElementById ( "carbonads" ).style.left = (x - 30) + 'px';
    innerDoc2.getElementById ( "carbonads" ).style.top = (y - 30) + 'px';