【难题】iframe高度自适应问题

页面A中iframe了页面B，A/B不在一个域中，如何实现iframe的高度自适应？求代码，希望兼容主流浏览器。谢谢！

解决方案 »

  1.   

    <iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>兼容，肯定不行了！
      

  2.   

    兼容的看看这个<script language="javascript"> 
    function resize(){var h=50;
    try{
    if(ifr_lb&&ifr_lb.document&&ifr_lb.document.body){
    var o=ifr_lb.document.body;
    var h=o.scrollHeight + (typeof(o.clientTop)== 'number' ?o.clientTop * 2 : 0);}
    }
    catch(e){var h=50;window.status=e.description;}
    if(h<50){h=50;}
    document.getElementById('ifr_lb').style.height=h+'px';
    return h+"px";
    }
    window.onresize=resize;
    </script><iframe id="ifr_lb" name="ifr_lb" onload="resize()" frameborder="0" src="http://www.google.com/" scrolling="no" frameborder="no" style="width:100%;;height:expression(resize())" height="22" target="_tc">
    aaaaaaaaaaaaaaaaaaaaaaaaaa</iframe>
      

  3.   

    用类似jquery等组件可以实现兼容吗？
    现在有两个难点：
    1，浏览器兼容
    2，跨域想了很久也没有解决
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    <style>
      body   {margin:0px; padding:0px;}
      #header{width:100%;height:30px; background:#ccccce;margin-top:0;padding:0px;}
      iframe {width:100%; margin:auto; iframeborder:0px solid #265492;float:auto;}
      #footer{width:100%;height:20px; background:#cccccc;margin-bottom:0;}
    </style><script type="text/javascript"> 
    function $(id){ return document.getElementById(id)}
    window.onload=function(){
      var cH=document.compatMode=="CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight;
      var headerH=$("header").offsetHeight;  var footerH=$("footer").offsetHeight;
      $("i").style.height=(cH-headerH-footerH-2)+"px";
    }</script>
    </head>
    <body>
    <div id="header"></div><center>
    <iframe id="i" src="http://www.google.cn"></iframe>
    <div id="footer"></div> 
    </body>
    </html>
      

  5.   

    http://www.blueidea.com/tech/web/2009/6932.asp
    蓝色刚好有一篇
      

  6.   


    期待……
    另外，对于要iframe的页面没有控制权，只是一个url
      

  7.   

    使用Jquery实现具体代码如下:
    <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
    下面的代码是放在test.html调用:
    $(window.parent.document).find("#main").load(function(){
    var main = $(window.parent.document).find("#main");
    var thisheight = $(document).height()+30;
    main.height(thisheight);
    });
    下面的代码是放在和iframe同一个页面调用
    $("#main").load(function(){
    var mainheight = $(this).contents().find("body").height()+30;
    $(this).height(mainheight);
    });这个方法可以 IE和ff都可以 你试下吧 呵呵!
      

  8.   

    只要可以页面间调用脚本就可以动态设置IFRAME的高度
    但跨域的页面好像没好的办法
      

  9.   

    兼容不了IE6 tmd不支持 min-height
    限制高度吧 然后 overflow:hidden