Javascript 如何获得X&；iframe中iframe的Y位置？_Javascript_Html_Iframe

Javascript 如何获得X&；iframe中iframe的Y位置？

javascript html iframe

Javascript 如何获得X&；iframe中iframe的Y位置？,javascript,html,iframe,Javascript,Html,Iframe,我在文件上有一个iframe。使用javascript，我可以获得iframe的宽度和高度以及文档的宽度和高度。我现在需要从iframe中获取文档上iframe的x，y位置代码类似于： <html> <iframe> var documentWidth = parent.window.innerWidth; var documentHeight = parent.window.innerHeight; var iframeWidth = window.innerWidt

我在文件上有一个iframe。使用javascript，我可以获得iframe的宽度和高度以及文档的宽度和高度。我现在需要从iframe中获取文档上iframe的x，y位置

代码类似于：

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

window.parent.document.getElementsByTagName（'iframe'）

将引用父窗口中的每个iframe。通过循环并检查

src

属性，可以从中找到特定的iframe

一旦有了iframe，就可以从中获取它的尺寸和位置以及属性

var-iframes=window.parent.document.getElementsByTagName（'iframe'）；
var yourURL='test.com'；
var-iframe；
对于（var i=0；i

由于两个文件都在同一台服务器上，所以您没有跨域问题，您可以尝试以下解决方案：

主Html

<html>
 <body>
   <iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe>
 </body>
</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>


var documentWidth=parent.window.innerWidth；
var documentHeight=parent.window.innerHeight；
var iframeWidth=window.innerWidth；
var iframehight=window.innerHeight；
//靠左
var iframeX=window.parent.document.getElementById（'iframe_id'）.offsetLeft；
//登上榜首
var iframeY=window.parent.document.getElementById（'iframe_id'）.offsetTop；

谢谢您的详细回答。我知道iframe的名字。。或者至少如何得到它。。所以我这样做：var iframeName=window.name；var iframeX=window.parent.document.getElementsByName（iframeName.getBoundingClientRect（）；但是，每当我添加“getBoundingClientRect（）；”时，我的脚本就会中断。有什么想法吗？getBoundingClientRect（）只适用于单个元素。getElementsByName（iframeName）返回元素数组。getElementsByName（iframeName）[0]。getBoundingClientRect（）应该可以工作。我使用的是基于Chromium的浏览器，框架对象没有getBoundingClientRect（）方法。我尝试了window.parent.document.getElementsByName（iframeName）.offsetLeft；不幸的是，它返回未定义。我使用变量iframeName=window.name获取名称；但我不认为这是问题所在，因为我甚至试着键入它。在这种情况下，您可以使用window.parent.document.getElementsByName（iframeName）[0]。offsetTop和window.parent.document.getElementsByName（iframeName）[0]。offsetLeftThanks继续提供帮助。我将var转储之前JS中的最后一行更改为“var-iframeX=window.parent.document.getElementsByName（iframeName）[0].offsetLeft；”现在没有显示任何var转储，因此我假设代码一定是因为[0]而中断的。有没有想过什么会破坏密码？没关系，这很有效！！我尝试了不同的浏览器。iframe必须已被缓存。非常感谢你！！我在这里发布了工作代码：

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

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

<html>
 <body>
   <iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe>
 </body>
</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>