javascript 如何从 iframe 中获取 iframe 的 X 和 Y 位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28468449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the X & Y position of an iframe from within the Iframe?
提问by Keith C.
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.
我在文档上有一个 iframe。使用javascript，我可以获得iframe 的宽度和高度以及文档的宽度和高度。我现在需要从 iframe 中获取 iframe 在文档上的 x,y 位置。
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'.
我已经尝试过 window.offsetTop/Left、parent.window.offsetTop/Left、window.clientTop 等，以及我能找到的任何其他东西，但不断得到“未定义”。
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.
顺便说一句，我不能为此使用 JQuery。仅 JS。
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:
我在 iframe 的页面上得到以下结果：
Document Width: 1566
Document Height: 652
Iframe Width: 300
Iframe Height: 250
Iframe X: undefined
回答by Yogesh Salvi
Since both files are on same server, so you dont have cross domain issue, You can try following solution:
由于这两个文件在同一台服务器上，所以您没有跨域问题，您可以尝试以下解决方案：
Main Html
主 HTML
<html>
<body>
<iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe>
</body>
</html>
Iframe Code [iframe.html]:
iframe 代码 [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>
回答by Keith C.
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 srcattribute.
window.parent.document.getElementsByTagName('iframe')将引用父窗口中的每个 iframe。从那里您可以通过循环并检查src属性来找到您的特定 iframe 。
Once you have your iframe, you can get it's dimensions and locations with the properties from element.getBoundingRect().
拥有 iframe 后，您可以使用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();
