Menu
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
367
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
