iframe高度自适应

Posted 2020-10-01

　　第一次用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了！

 

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