iframe自适应高度【框架自适应高度】

iframe自适应高度传统做法大致有两个:
方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。
方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。
在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。

但是碰到有些页面会根据用户的操作或者为了增加用户体验的时候我们的页面高度可能会增加。这就要求使用其他办法:我们可以用setInterval();

代码如下:

XML/HTML代码
  1. <!DOCTYPE?html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”?”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??
  2. <html?xmlns=“http://www.w3.org/1999/xhtml”><HEAD><TITLE>iframe自适应高度-demo</TITLE>??
  3. <META?http-equiv=Content-Type?content=“text/html;?charset=GBK”>??
  4. <META?content=“MSHTML?6.00.6001.18063”?name=GENERATOR></HEAD>??
  5. <BODY>??
  6. <DIV? ??
  7. style=“BORDER-RIGHT:?1px?dotted;?BORDER-TOP:?1px?dotted;?BORDER-LEFT:?1px?dotted;?WIDTH:?400px;?BORDER-BOTTOM:?1px?dotted”><IFRAME? ??
  8. id=frame_content?src=“iframe_b.html”?frameBorder=0?scrolling=no? ??
  9. onload=this.height=100></IFRAME></DIV>??
  10. <DIV><BUTTON?onclick=checkHeight()>Check?Height</BUTTON></DIV>??
  11. <SCRIPT?type=text/javascript>??
  12. ????????????function?reinitIframe(){ ??
  13. ????????????????var?iframe?=?document.getElementById(“frame_content”); ??
  14. ????????????????try{ ??
  15. ????????????????????var?bHeight?=?iframe.contentWindow.document.body.scrollHeight; ??
  16. ????????????????????var?dHeight?=?iframe.contentWindow.document.documentElement.scrollHeight; ??
  17. ????????????????????var?height?=?Math.max(bHeight,?dHeight); ??
  18. ????????????????????iframe.height?=??height; ??
  19. ????????????????}catch?(ex){} ??
  20. ????????????} ??
  21. ????????????window.setInterval(“reinitIframe()”,?200); ??
  22. ???????????? ??
  23. ????????????function?checkHeight()?{ ??
  24. ????????????????var?iframe?=?document.getElementById(“frame_content”); ??
  25. ????????????????var?bHeight?=?iframe.contentWindow.document.body.scrollHeight; ??
  26. ????????????????var?dHeight?=?iframe.contentWindow.document.documentElement.scrollHeight; ??
  27. ????????????????alert(“bHeight:”?+?bHeight?+?”,?dHeight:”?+?dHeight); ??
  28. ????????????} ??
  29. ????????</SCRIPT>??
  30. </BODY></HTML>??

查看完整的演示:https://www.html.cn/demo/iframe/iframe.htm

赞(0) 打赏
未经允许不得转载:WEB前端开发 » iframe自适应高度【框架自适应高度】

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏