网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

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

日期:2013-12-07  来源:攀枝花惠康网络公司

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 dHeightiframe.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. function checkHeight() {
  23. var iframe = document.getElementById(“frame_content”);
  24. var bHeight = iframe.contentWindow.document.body.scrollHeight;
  25. var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  26. alert(“bHeight:” + bHeight + ”, dHeight:” + dHeight);
  27. }
  28. </SCRIPT>
  29. </BODY></HTML>

查看完整的演示:http://www.css88.com/demo/iframe/iframe.htm

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

  • 提交设计需求
    您可以通过以下联系方式提交设计需求
  • 制作周期与费用评估
    收到您的需求后,我们将对网站建设周期和费用进行评估
  • 签订服务合同
    双方确认需求后签订服务合同协议,网站建设开发正式启动
  • 网站制作及修改
    约定工期内提交网站初稿,并与客户沟通修改
  • 完稿及验收
    完成网站开发制作并交付用户,验收合格后付款
  • 售后及维护
    根据用户需要况进行免费营销指导以及有偿网络营销及网站维护

客服热线:tel(谢先生)  客服QQ:1323605005  
服务邮箱:yewubu@huikon.com(售前咨询)  jishubu@huikon.com(技术部)  shouhou@huikon.com(售后服务)
公司地址:四川省攀枝花市
邮编:617200