首页 > 其他 > 详细

iframe高度自适应

时间:2017-08-09 00:46:24      阅读:350      评论:0      收藏:0      [点我收藏+]

  第一次用iframe标签代替ajax异步刷新去做后天管理系统,发现iframe的确是个好东西。但有个最大的问题就是——高度不能自适应,要么设置死,要么用js去动态获取目标资源body的height并改变iframe的height。我们往往使用后者去自适应高度,这样的动态改变也有很多种方法——js和jQuery的。对于有选择强迫症的人来说,选一种通用的就行。

  HTML部分:

1 <div class="edit-content-iframe">
2      <iframe src="login_M.html" id="iframe" name="iframe" frameborder="0" scrolling="no" width="100%" ></iframe>
3 </div>

  jQuery部分:

 1 <script>
 2       //同域ifram高度自适应
 3       $("#iframe").on(‘load‘,function(){
 4            //获取iframe内容高度h 和 包裹元素距定位父元素的的距离h_
 5            var h = $(this).contents().find(‘body‘).height(),
 6                h_ = $(window).height() - $(‘.edit-content-iframe:eq(0)‘).offset().top;
 7                     
 8           //iframe高度至少填满屏幕剩余部分
 9           if(h < h_){
10                h = h_;
11           }
12           $(this).height(h);
13       });14 </script>

  这样就ok了!

 

  补充一句,这里的高度自适应只能用于同域,非同域情况将会失败!

 

iframe高度自适应

原文:http://www.cnblogs.com/chenwenhao/p/7309945.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!