ifame 高度自适应

ifame 高度自适应的原理 其实 就是 先把子页面中的高度求出来 然后更改 ifame 的值

<iframe width="100%" id="iframeid"  height="auto" scrolling="none" frameborder="0" src="index.html"></iframe>

index.html 
<script>
   
    window.onload = function(){
        
        var height = document.documentElement.scrollHeight;
        
        alert(height);
        var iframe = top.document.getElementById("iframeid");
        
        iframe.style.height = height+"px";
        
    }
    
</script>
  <div style="height:400px;400px;background:green;">
 
  </div>
   

 这种方式 在 除 chrome opera 下不行 据说是在客户端不行 放到服务器就可以了

 第二种方式

思路：现有主界面main在域a下，被嵌套页面B在域b下，被嵌套页面B又嵌套一个在域a下的中介页面A。 当用户打开浏览器访问mail.html的时候载入B，触发B的onload事件获取其自身高度，然后B载入A,并将高度值作为参数赋值给A的 location对象。这样A就可以通过location.hash获得B的高度。（location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一些非常有意义的事情。）。由于A和main页面同域，所以可以修改main的dom节点属性，从而达到我们设置iframe标签高度的目的。

关键代码：

iframe主页面：main.html

<iframe id="iframeB"  name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>

iframe嵌套页面：B.html

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>

<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight; //获取自身高度
    urlC = "www.a.com/A.html"; //设置iframeA的src
    document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script>

中介页面：A.html

<script>
function  pseth() {
    var iObj = parent.parent.document.getElementById('iframeB');//A和main同域，所以可以访问节点
    iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
    iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>

同域情况下就不用多说了，直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。

第三种方式

 用 css 实现

<style>
  html,body{
    100%;
    height:100%;
    overflow:hidden;
  }
  iframe{
    100%;
    height:100%;
    border:0;
  }
</style>

这种方式 经测试 在各个浏览器下都可以  毕竟是 css吗 没有安全问题