如何在iframe页面中执行方法定位iframe中元素在父页面中的position位置

例如有两个页面，parent.html为父页面，children.html为iframe中的页面；
想要的结果就是点击children.html中的button，然后获取这个button在父页面parent.html中的位置绝对位置。问题就在于如何在children.html中定位当前iframe的位置。注：iframe的class、name、id都是未知并且不确定的parent.html<body>
<iframe src="children.html"></iframe>
<iframe src="..."></iframe>
<iframe src="..."></iframe>
...
</body>
children.html<body>
<input type="button" value="测试"/>
</body>
困扰多日，坐等高手...

解决方案 »

  1.   

    先找到button在子页面的位置，+ iframe在父页面的位置。
    offsetLeft,offsetTop等循环查找
      

  2.   

    老孟啊...问题就在怎么找这个iframe在父页面中的位置啊...问题补充：支持jQuery
      

  3.   


    $(parent.frames["frameid"]).offset().left;
    $(parent.frames["frameid"]).offset().top;
      

  4.   

    iframe和其他别的元素一样啊，你找到这个对象就可以得到它的属性了啊
    http://msdn.microsoft.com/en-us/library/ms534200%28VS.85%29.aspx
      

  5.   

    这个我知道啦，考虑了通用性和可扩展性，不知道它所在的iframe的class、name、id...
    就是当这个iframe中的事件触发之后怎么让父页面知道是哪个iframe
      

  6.   

    误解了啦...
    我只是想表达我用了jQuery，需要的话可以直接用里面封装好的方法，不用再用document.getElementById...什么的了
      

  7.   

    <script type="text/jscript">
        function getPosition(o){
            for(var i=0;i<parent.frames.length;i++){
                if(parent.frames[i]==this)alert(this.location);
            }
        }
    </script>
        <body>
    <input type="button" value="ss" onclick="getPosition(this);"/>
    </body>
      

  8.   

    首先是父页面
    base.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    function getPosition(target) {
    var left = 0, top = 0;
    do {
    left += target.offsetLeft || 0;
    top += target.offsetTop || 0;
    target = target.offsetParent;
    } while(target); return {
    left: left,
    top: top
    };
    }
    </script>
    </head>
    <body onload="init();">
    <iframe src="child.html" style="top:30px;"></iframe>
    </body>
    </html>子页面child.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">var identity = Math.random();
    function btnClick() {
    var parentWindow = window.parent;

    for (var index = 0; index < parentWindow.frames.length; index++) {
    if (identity == parentWindow.frames[index].identity) {
    var pos = parentWindow.getPosition(parentWindow.frames[index].frameElement);
    alert(pos.left);
    alert(pos.top);
    break;
    }
    }
    }</script>
    </head>
    <body>
    <input type="button" onclick="btnClick()"></input>
    </body>
    </html>试试
      

  9.   

    你可以在base.html中
    <body>
    <div style="200px;"></div>
    <iframe src="child.html"></iframe>
    </body>这样写，就可以看到效果了。top输出215,left 10另外，刚才在iframe这里用top:30px,只有在绝对定位的时候起作用（top:30px这句话）。这个方法是全浏览器通过，你可以放心使用ps.请教各位大侠。回帖的时候html code这个框框是怎么出来的呀