经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
html iframe高度自适应
来源:cnblogs  作者:下页、再停留  时间:2019/1/28 9:21:56  对本文有异议

想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度

这种方法有两种写法

  1. <script type="text/javascript">
  2. // 计算页面的实际高度,iframe自适应会用到
  3. function calcPageHeight(doc) {
  4. var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  5. var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
  6. var height = Math.max(cHeight, sHeight)
  7. return height
  8. }
  9. var ifr = document.getElementById('ifr')
  10. ifr.onload = function() {
  11. var iDoc = ifr.contentDocument || ifr.document
  12. var height = calcPageHeight(iDoc)
  13. ifr.style.height = height + 'px'
  14. }
  15. </script>
  1. <script>
  2. // 计算页面的实际高度,iframe自适应会用到
  3. function calcPageHeight(doc) {
  4. var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  5. var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
  6. var height = Math.max(cHeight, sHeight)
  7. return height
  8. }
  9. window.onload = function() {
  10. var height = calcPageHeight(document)
  11. parent.document.getElementById('ifr').style.height = height + 'px'
  12. }
  13. </script>

 

还有一种是兼容性比较好的

  1. <iframe src="http://www.fufuok.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>

 

原文链接:http://www.cnblogs.com/zxf100/p/10322564.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号