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

Question

I am trying to match the position and size of two elements in two different iframes under the same parent page, but I am not sure how to do it.

With the following code, I manage to match the position and size of a div ("div_parent_page') in the parent page with the position of an element ('element_in_iframe-1") inside an iframe ('iframe-1') under the same parent page:

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

Now, I put another iframe ('iframe-2') inside the div mentioned above, and my goal is to match the position and size of an element ('elementXXX') inside iframe-2 inside the div with the position and size of element_in_iframe-1. I added the code below:

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

Apparently, it did not work, but I am not sure how this can be achieved. Hope you guys can enlighten me because I am really a Grandma in coding. Thanks~

See [How to clear the contents of an iFrame from another iFrame](https://stackoverflow.com/questions/33645685/how-to-clear-the-contents-of-an-iframe-from-another-iframe/), [Can we refer to javascript variables across webpages in a browser session?](https://stackoverflow.com/questions/36146595/can-we-refer-to-javascript-variables-across-webpages-in-a-browser-session/) — guest271314, Jun 09 '17 at 04:47
But how to change the position of element in the iframe based on the coordinates in the parent page? — Kelvin C, Jun 09 '17 at 05:29
Do each `iframe` `src` and parent `location.href` have same origin? — guest271314, Jun 09 '17 at 05:30
You should be able to communicate between browsing contexts using `MessageChannel` or `Worker` — guest271314, Jun 09 '17 at 13:44
Is the problem that your x and y variables are null where you expect them to have values? — entitycs, Jun 09 '17 at 18:28

entitycs · Accepted Answer · 2017-06-09T20:39:23.060

If the issue is that your getOffset positioning is off, see the function given here for a different example of gathering position of an object underneath one or more parents:

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

If the issue is that your variables var x and var y are empty now that they are in the iframe, see this jFiddle for an example of positioning one element absolutely in frame2 given values taken from 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';

Your answer sure is useful. Thank You very much! I will post an update later! — Kelvin C, Jun 11 '17 at 16:52

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

1 Answers1