2007-07-29

iframe自适应高度

关键字: js,iframe

iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe 设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种iframe动态调整高度的方法，主要是以下JS函数：
程序代码：

js 代码
  1. function SetWinHeight(obj)   
  2. {   
  3.     var win = obj;   
  4.     if (document.getElementById)   
  5.     {   
  6.         if (win && !window.opera)   
  7.         {   
  8.             if (win.contentDocument && win.contentDocument.body.offsetHeight)   
  9.   
  10.                 win.height = win.contentDocument.body.offsetHeight;   
  11.             else if (win.Document && win.Document.body.scrollHeight)   
  12.                 win.height = win.Document.body.scrollHeight;   
  13.         }   
  14.     }   
  15. }  

最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配
程序代码

js 代码
  1. <iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>   


另一种情况的iframe解决方案（超简单）
重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问！”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题，为了得到答案去网上搜索，发现有不少人也遇到了这样的问题，现在就把解决方法共享一下

1、建立一个bottom.js的文件，然后输入下面的代码（只有两行哦）

js 代码
  1. parent.document.all("框架ID名").style.height=document.body.scrollHeight;    
  2. parent.document.all("框架ID名").style.width=document.body.scrollWidth;    

这里的 框架ID名 就是Iframe的ID，比如：
＜IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"＞＜/IFRAME＞

2、给你网站里所有的被包含文件里面每个都加入
＜script language = "JavaScript" src = "bottom.js"/＞＜/script＞
3、OK，收工！
在WINXP、IE6下面测试通过。很简单吧！

实现 iframe 的自适应高度
实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
程序代码

js 代码
  1. <script type="text/javascript">   
  2.     //** iframe自动适应页面 **//   
  3.   
  4.     //输入你希望根据页面高度自动调整高度的iframe的名称的列表   
  5.     //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。   
  6.   
  7.     //定义iframe的ID   
  8.     var iframeids = ["test"]   
  9.   
  10.     //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏   
  11.     var iframehide = "yes"  
  12.   
  13.     function dyniframesize()   
  14.     {   
  15.         var dyniframe = new Array()   
  16.         for (i = 0; i < iframeids.length; i++)   
  17.         {   
  18.             if (document.getElementById)   
  19.             {   
  20.                 //自动调整iframe高度   
  21.                 dyniframe[dyniframe.length] = document.getElementById(iframeids);   
  22.                 if (dyniframe && !window.opera)   
  23.                 {   
  24.                     dyniframe.style.display = "block"  
  25.                     if (dyniframe.contentDocument   
  26.                             && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape   
  27.                         dyniframe.height = dyniframe.contentDocument.body.offsetHeight;   
  28.                     else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE   
  29.                         dyniframe.height = dyniframe.Document.body.scrollHeight;   
  30.                 }   
  31.             }   
  32.             //根据设定的参数来处理不支持iframe的浏览器的显示问题   
  33.             if ((document.all || document.getElementById) && iframehide == "no")   
  34.             {   
  35.                 var tempobj = document.all ? document.all[iframeids] : document.getElementById(iframeids)   
  36.                 tempobj.style.display = "block"  
  37.             }   
  38.         }   
  39.     }   
  40.   
  41.     if (window.addEventListener)   
  42.         window.addEventListener("load", dyniframesize, false)   
  43.     else if (window.attachEvent)   
  44.         window.attachEvent("onload", dyniframesize)   
  45.     else  
  46.         window.onload = dyniframesize   
  47. </script>  
评论
发表评论

您还没有登录，请登录后发表评论

ecchanger
搜索本博客
最近加入圈子
存档
最新评论