·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

[JS]Js操作iframe嵌入页面高度自动适应

时间:2014-06-10 09:20酷播
web开发的工作中我们难免会遇到使用iFrame这个标签,有时候iFrame的高度我们要让它自动的去适应内容的高度,防止出现滚动条,利于页面的美化

web开发的工作中我们难免会遇到使用iFrame这个标签,有时候iFrame的高度我们要让它自动的去适应内容的高度,防止出现滚动条,利于页面的美化。下面将接受iframe动态调整高度的方法。

 

1、同域下的iframe自适应高度

 

同域下父页面内的js能获取到iframe页面的高度,所以在iframe加载完后获取下高度就行了

 

例如

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

如果是同一个域名下的不同子域,设置下document.domain就行了

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

 

2、跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.studyofnet.com下的一个页面url1要包含 http://www.baidu.com下的一个页面url2。
我们使用url1下的另一个页面url11来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

 

具体示例如下

  1.              
  2. // url1中包含iframe: 
  3. <iframe src="http://www.baidu.com/url2" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe> 
  4.  
  5. // 在url2中加入如下代码: 
  6. <iframe id="c_iframe"  height="0" width="0"  src="http://www.studyofnet.com/url11" style="display:none" ></iframe> 
  7. <script type="text/javascript"> 
  8.     (function autoHeight(){ 
  9.         var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth); 
  10.         var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); 
  11.         var c_iframe = document.getElementById("c_iframe"); 
  12.         c_iframe.src=\\'#\\'"  
  13.     })(); 
  14. </script> 
  15.  
  16. // 最后,agent.html中放入一段js: 
  17. <script type="text/javascript"> 
  18.     var b_iframe = window.parent.parent.document.getElementById("Iframe"); 
  19.     var hash_url = window.location.hash; 
  20.     if(hash_url.indexOf("#")>=0){ 
  21.         var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; 
  22.         var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; 
  23.         b_iframe.style.width = hash_width
  24.         b_iframe.style.height = hash_height
  25.     } 
  26. </script> 

url11 从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为url11在http://www.studyofnet.com 下,所以操作url1时不受JavaScript的同源限制)

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器