匹配同一父页面下两个不同iframe中两个元素的位置和大小

Question

我想匹配同一父页面下两个不同 iframe 中两个元素的位置和大小，但我不确定该怎么做。

使用以下代码，我设法在 iframe ('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);

现在，我在上面提到的div里面放了另一个iframe('iframe-2')，我的目标是匹配一个元素 ('elementXXX') inside iframe-2 inside the div with the position and size of 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

如果问题是您的 getOffset 定位不正确，请参阅此处给出的函数，了解收集一个或多个父对象下方对象位置的不同示例：

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

如果问题是您的变量 var x 和 var y 现在在 iframe 中为空，请参阅此 jFiddle 以获取在给定取自 frame1 的值的情况下将一个元素绝对定位在 frame2 中的示例。

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';

匹配同一父页面下两个不同iframe中两个元素的位置和大小

Match the position and size of two elements in two different iframes under the same parent page

javascript

html

iframe

position

getelementsbyclassname