Chinaunix首页 | 论坛 | 博客

long_chuanren的ChinaUnix博客

首页　| 　博文目录　| 　关于我

long_chuanren

  • 博客访问： 13831
  • 博文数量： 3
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 10
  • 用 户 组： 普通用户
  • 注册时间： 2014-09-10 10:05
文章分类

全部博文（3）

文章存档

2014年（3）

我的朋友
最近访客
推荐博文
iframe自适应高度

分类： JavaScript

2014-10-22 09:28:53

原文地址：iframe自适应高度 作者：lovenyf



    iframe 自适应高度，目前最广泛的实现方式是以 JS 获取 iframe 所载入页面的 body 高度。（在本地 html 文件测试的时候 chrome 会有跨域错误，可以使用 IE 来测试）。其实质就是通过 offsetHeight 或者 scrollHeight 获取到 iframe 内部 body 的高度，再调整 iframe 高度即可。以下是初略形式：

Test.html 源码
  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <title>iframe 自适应高度</title>
  5.     <meta charset="UTF-8"/>
  6.   </head>
  7.   <body>
  8.     <iframe id="auto" name="auto" src="./Test2.html" width="100%" onload="autoHeight()"></iframe>
  9.     <script type="text/javascript" charset="utf-8">
  10.       function autoHeight(){
  11.         var ifr = document.getElementById('auto');
  12.         ifr.height = ( ifr.contentDocument && ifr.contentDocument.body.offsetHeight ) ||
  13.                      ( ifr.contentWindow.document.body.scrollHeight );
  14.       }
  15.     </script>
  16.   </body>
  17. </html>

Test2.html 源码

  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <title>iframe 自适应高度</title>
  5.     <meta charset="UTF-8"/>
  6.     <style type="text/css">
  7.       html,body{
  8.         margin: 0;
  9.         padding: 0;
  10.       }
  11.       #block{
  12.         background-color: red;
  13.         height: 500px;
  14.         width: 800px;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div id="block"> </div>
  20.   </body>
  21. </html>

当然以上只是简单的实现，具体更严谨的计算高度做好使用一些兼容性不错库作为基础。


原文作者：lovenyf
原文博客：lovenyf.blog.chinaunix.net

阅读(890) | 评论(0) | 转发(0) |
0

上一篇：关于Java内存泄露

下一篇：没有了

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6