A-A+

iframe 自适应高度

2015年09月02日 编程技术 暂无评论

今天在帮一个小伙伴做一个 iframe 自适应的效果,要在产品页面进行无刷新的显示内容,也就是当点击左侧产品导航时,右侧会直接显示出来,而不用再次刷新整个页面,所以需要将右侧做成 iframe 包含进来,这样在点击产品导航时就会只显示右侧相应的内容了,这样给人的体验非常好,而右侧显示的产品内容有多有少,这就导致一个长度不一致的问题,所以就只能使用 iframe 自适应效果了,让其右侧产品随着内容的多少而变化 iframe。

小虎博客使用了很简单的一种方法,但可能并不兼容所有的浏览器,不过已经足够使用了,先来看一下如下的代码:

  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. win.height = win.contentDocument.body.offsetHeight;   
  10. else if(win.Document && win.Document.body.scrollHeight)   
  11. win.height = win.Document.body.scrollHeight;   
  12. }   
  13. }   
  14. }   

下面是 iframe 代码,如下:

  1. <iframe width="778" align="center" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>  

这段代码 win 就是框架的名称了,在右侧链接的时候进行选择就可以了,除了这个方法之外,小虎博客还搜集了一些其它的方法,下面一并进行分享一下。

第二种经典的 iframe 自适应高度代码,在多数的浏览器测试下通过,如下:

  1. <iframe src="https://www.xiaohuboke.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码:   
  2. <script type="text/javascript" language="javascript">   
  3. function iFrameHeight() {   
  4. var ifm= document.getElementById("iframepage");   
  5. var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
  6. if(ifm != null && subWeb != null) {   
  7. ifm.height = subWeb.body.scrollHeight;   
  8. }   
  9. }   
  10. </script>   

第三种,同上面一样,据说兼容性都很好,这一款没有进行测试,如下代码:

  1. <script language="javascript" type="text/javascript">   
  2. function dyniframesize(down) {   
  3. var pTar = null;   
  4. if (document.getElementById){   
  5. pTar = document.getElementById(down);   
  6. }   
  7. else{   
  8. eval('pTar = ' + down + ';');   
  9. }   
  10. if (pTar && !window.opera){   
  11. //begin resizing iframe   
  12. pTar.style.display="block"   
  13. if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){   
  14. //ns6 syntax   
  15. pTar.height = pTar.contentDocument.body.offsetHeight +20;   
  16. pTar.width = pTar.contentDocument.body.scrollWidth+20;   
  17. }   
  18. else if (pTar.Document && pTar.Document.body.scrollHeight){   
  19. //ie5+ syntax   
  20. pTar.height = pTar.Document.body.scrollHeight;   
  21. pTar.width = pTar.Document.body.scrollWidth;   
  22. }   
  23. }   
  24. }   
  25. </script>   
  26. <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">   
  27. </iframe>  

好了,就分享这几种 iframe 自适应高度的代码吧,其实这几款代码都比较老了,但是都比较经典,对于兼容性上感觉还可以,当然,现在网上还有一些更新的 iframe 自适应代码,大家可以谷歌一下,这里就权当做个笔记吧,在使用的时候可以好进行摘取。

标签:

给我留言