夏日博客

A-A+

iframe框架自适应高度多种方法介绍

2016年10月15日 前端设计 暂无评论 阅读 4 views 次

iframe框架自适应高度这个问题有很多朋友写了非常不错的一些解决办法，下面我一些不错的iframe框架自适应高度的代码收藏起来给大家参考。

HTML代码如下:

  1. <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>  

Javascript代码如下:

  1. <script type="text/javascript" language="javascript">     
  2.  function iFrameHeight() {     
  3.   var ifm= document.getElementById("iframepage");     
  4.   var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;     
  5.   if(ifm != null && subWeb != null) {  
  6.      ifm.height = subWeb.body.scrollHeight;  
  7.   }   //xiariboke.net  
  8.  }     
  9. </script>  

代码二,在包含Iframe的页面：

  1. <iframe src="main.asp" width="557px" height="100%" name="Mainv" id="Mainv" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="border:#FFFFFF"></iframe>  

然后在每个要在Iframe中显示的页面上，代码如下:

  1. <body onload="parent.document.all.Mainv.height=getTotalHeight();">  

然后在页面底部加入如下代码:

  1. <div id="theEnd" style="position:relative"></div>  
  2. <script language="JavaScript">  
  3. function getTotalHeight(){  
  4.      return document.getElementById("theEnd").offsetTop+10;  
  5. }//xiariboke.net  
  6. </script>  

同域下的iframe自适应高度,同域下父页面内的js能获取到iframe页面的高度，所以在iframe加载完后获取下高度就行了,代码如下:

  1. <iframe src="./ue.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;width:1000px;" onload="autoHeight();"></iframe>  
  2. <script type="text/javascript">  
  3.     function autoHeight(){  
  4.         var iframe = document.getElementById("Iframe");  
  5.         if(iframe.Document){//ie自有属性  
  6.             iframeiframe.style.height = iframe.Document.documentElement.scrollHeight;  
  7.         }else if(iframe.contentDocument){//ie,firefox,chrome,opera,safari  
  8.             iframeiframe.height = iframe.contentDocument.body.offsetHeight ;  
  9.         }  
  10.     }  
  11. </script>  

如果是同一个域名下的不同子域，设置下document.domain就行了,IE6和IE7中的iframe没有contentDocument属性，而且如果iframe里的页面在同域下的不同子域,通过iframe.Document.documentElement.scrollHeight获取到的高度是错误的，所以还是建议用 iframe.contentwindow.document来获取高度.

2.跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。

方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。

我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。

a.html中包含iframe,代码如下:

  1. <iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>  

在c.html中加入如下代码：

  1. <iframe id="c_iframe"  height="0" width="0"  src="https://www.xiariboke.net/agent.html" style="display:none" ></iframe>  
  2. <script type="text/javascript">  
  3.     (function autoHeight(){  
  4.         var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);  
  5.         var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);  
  6.         var c_iframe = document.getElementById("c_iframe");  
  7.         c_iframe.src='#'"   
  8.     })();  
  9. </script>  
标签：

给我留言