How to get the X & Y position of an iframe from within the Iframe?

Question

I have an iframe on a document. Using javascript, I can get the iframe's width and height and the document's width and height. I now need to get the x,y position of the iframe on the document from within the iframe.

Code is something like:

<html>
<iframe>
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
var iframeX = ????
</iframe>
<html>

I've tried window.offsetTop/Left, parent.window.offsetTop/Left, window.clientTop, etc and anything else I can find but keep getting 'undefined'.

Both are on the same server so I don't think I have a cross domain issue.

Any ideas?

BTW I can't use JQuery for this. JS Only.

Here is a bit more detail:

<html>
<body>
<div>
<iframe name="iframe/123/Test">
<html>
<body>
<script src="same domain"></script>
</body>
</html>
</iframe>
</div>
</body>
</html>

The script looks like this so far:

// JavaScript Document
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
var iframeName = window.name;
var iframeX = window.parent.document.getElementsByName(iframeName).offsetLeft;

//Var Dumps
document.write("Document Width: "+documentWidth+"<br>");
document.write("Document Height: "+documentHeight+"<br>");
document.write("Iframe Width: "+iframeWidth+"<br>");
document.write("Iframe Height: "+iframeHeight+"<br>");
document.write("Iframe X: "+iframeX+"<br>");

I get the following results on page in the iframe:

Document Width: 1566
Document Height: 652
Iframe Width: 300
Iframe Height: 250
Iframe X: undefined

I posted working code here: https://stackoverflow.com/questions/53056796/getboundingclientrect-from-within-iframe/53872705#53872705 — pawelbylina, Dec 20 '18 at 17:07

Yogesh Salvi · Accepted Answer · 2018-04-04T09:31:13.503

6

Since both files are on same server, so you dont have cross domain issue, You can try following solution:

Main Html

<html>
 <body>
   <iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe>
 </body>
</html>

Iframe Code [iframe.html]:

<html>
  <body>
    <script type="text/javascript">
       var documentWidth = parent.window.innerWidth;
       var documentHeight = parent.window.innerHeight;
       var iframeWidth = window.innerWidth;
       var iframeHeight = window.innerHeight;
       // Get Left Position
       var iframeX = window.parent.document.getElementById('iframe_id').offsetLeft;
       // Get Top Position
       var iframeY = window.parent.document.getElementById('iframe_id').offsetTop;
    </script>
  </body>
</html>

edited Apr 04 '18 at 09:31

answered Feb 12 '15 at 03:23

Yogesh Salvi

1,177
2
10
17

I tried window.parent.document.getElementsByName(iframeName).offsetLeft; and it returns undefinied unfortunately. I am getting the name with var iframeName = window.name; I don't think that is the issue though because I even tried hard typing it in. – Keith C. Feb 12 '15 at 03:29
1

in that case you can use window.parent.document.getElementsByName(iframeName)[0].offsetTop and window.parent.document.getElementsByName(iframeName)[0].offsetLeft – Yogesh Salvi Feb 12 '15 at 05:23
Thanks for the continuing help. I changed the last line in the JS before the var dumps to "var iframeX = window.parent.document.getElementsByName(iframeName)[0].offsetLeft;" Now none of the var dumps show up so I assume the code must be breaking because of the [0]. Any thought on what could be breaking the code? – Keith C. Feb 13 '15 at 01:38
Nevermind, this works!! I tried a different browser. The iframe must have been caching. Thank you so much!! – Keith C. Feb 13 '15 at 01:40
Please be aware that `window.parent` is accessible only for iframes with same domain. – puchu Jul 25 '23 at 09:36

score 4 · Answer 2 · answered Feb 12 '15 at 03:08

4

window.parent.document.getElementsByTagName('iframe') will reference every iframe in the parent's window. From there you can find your specific iframe by looping through and checking the src attribute.

Once you have your iframe, you can get it's dimensions and locations with the properties from element.getBoundingRect().

var iframes = window.parent.document.getElementsByTagName('iframe');

var yourURL = 'test.com';
var iframe;

for (var i = 0; i < iframes.length; i++) {
    if (iframes[i].src == 'test.com') {
        iframe = iframes[i];
        break;
    }
}

var rect = iframe.getBoundingClientRect();

answered Feb 12 '15 at 03:08

Thank you for the detailed answer. I know the name of the iframe .. or how to get it atleast .. so I am doing this: var iframeName = window.name; var iframeX = window.parent.document.getElementsByName(iframeName).getBoundingClientRect(); However, whenever I add "getBoundingClientRect();" my script breaks. Any thoughts? – Keith C. Feb 12 '15 at 03:22
getBoundingClientRect() only works on a single element. getElementsByName(iframeName) returns an array of elements. getElementsByName(iframeName)[0].getBoundingClientRect() should work. – Fritzz Mar 21 '16 at 12:38
I'm working with a Chromium-based browser and frame objects do NOT have a getBoundingClientRect() method. – Christoph Mar 25 '16 at 03:27

How to get the X & Y position of an iframe from within the Iframe?

2 Answers2