码迷,mamicode.com
首页 > 其他好文 > 详细

iframe高度自适应

时间:2017-08-09 01:03:04      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:问题   function   nts   获取   scroll   最大   ram   class   设置   

  第一次用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高度自适应

标签:问题   function   nts   获取   scroll   最大   ram   class   设置   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!