A-A+

iframe 自适应高度

2015年09月02日 web前端设计 评论 25 条 阅读 214 views 次

今天在帮一个小伙伴做一个 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.xiariboke.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 自适应代码,大家可以谷歌一下,这里就权当做个笔记吧,在使用的时候可以好进行摘取。

标签:

25 条留言  访客:25 条  博主:0 条

  1. 外汇EA

    感觉 iframe 就是为解决页面难题而生的,现在有时候做页面效果,一个页面上面如果有冲突的JS或者jquery之类的话,就直接把两个效果分开,用 iframe 来嵌套。

  2. 潘鑫博客

    看不懂。。。还是我的水平太低了。

    • smiling

      嵌入到页面的 iframe 进行自适应展示的。

  3. 蓝沢润

    用IFrame的不多吧,毕竟不利用百度搜索引擎SEO的优化。

  4. 东莞青龙加固

    前台很少用 iframe,对网站SEO很不利,除非做些其它什么特殊要求。

  5. 豆浆机知识

    主要使用 iframe 别出现滚动条是上上策,否则很难看的。

    • 有证的网工

      把宽和高设置成0,再把border设置成零

  6. 广州电子商务网

    要是我们知道iframe加载内容的高度,直接设置一个高度就可以了,要是内容不是一篇两篇,设置个百分之百还不行。

    • 萨尔帕

      正解。

  7. 天道营销俱乐部

    多种小方法哈,宽度,高度神马的,选一个方法就可以了,

  8. 网赚论坛

    用过第二段代码,但现在好像都不太兼容了。

  9. 杂时代

    这东西我们前端设计员经常用到。

    • 有证的网工

      😆 😆 😆 不能光表情啊

  10. 免费发广告网站

    只见过好多后台使用,

  11. 专业仿站

    写得很到位,正好拿来试手。

  12. 奋斗人生网

    js 类的代码使用的时候全部网上下载,囧。。

  13. 1分钱100MB流量

    好像不能用,是不是跟兼容浏览器有关系。

  14. 一元夺宝

    iframe 自适应高度不都用在后台页面吗,左侧不变,右侧变,要不就是上面不变下面变。

    • 萨尔帕

      后台用的较多,还有就是首页侧边导航栏用的也多,就是一些特殊用途了,否则很少用。

  15. 药丸子

    对于内容有多有少的网页来用,但最好别用 iframe,百度都不去收录。

    • DDA

      搜索引擎根本就找不到 iframe 的页面,都把主页面给分离了。

  16. 田埂上乡村旅游门户

    第一种还行,简单兼容,

  17. 妹子最多的大学排行

    iframe 对于 SEO 来说并不太好吧。

    • subpro

      这种包含的方法都是十来年以前的方法了,现在如果不是特殊使用,根本就是不允许的。

  18. 科研动力

    这个正有用

给我留言