标签:问题 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了!
补充一句,这里的高度自适应只能用于同域,非同域情况将会失败!
标签:问题 function nts 获取 scroll 最大 ram class 设置
原文地址:http://www.cnblogs.com/chenwenhao/p/7309945.html