iframe高度自适应

// 设置iframe高度
winsize();
function winsize() {
    $("#ifr").height($(window).height() - 80); // 80为顶部导航高度
}
$(window).resize(function () {
    winsize();
});
// 图片看不到 这个css设置是主要代码
iframe{
    position: absolute;
    top: 62px;
    right: 0px;
    overflow: hidden;
    bottom: 0px;
    left: 0px;
     100%;
    min- 1320px;
    height: 925px; // js 通过js获取
    z-index: 2;
}

   更新一下:今天学到一个更牛×的做法!!!【代码在上↑↑↑,受小弟一拜】(iframe设置绝对定位,通过内容去撑开高度。实现效果和iframe自适应一样☺)

 

 ===============================================华丽分割线===========================================================================

=======================================理解了上面的用法,下面就不用看了===================================================================

    第一次用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>
//免费赠送2种方式
$('#iframeId').load(function() { //方法1  
    var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);  
    var h=$(this).contents().height();  
    $(this).height(h+'px');   
});  
  
$('#iframeId').load(function() { //方法2  
    var iframeHeight=$(this).contents().height();  
    $(this).height(iframeHeight+'px');   
}); 

这样就ok了!

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

  iframe作为子窗口(后台管理常用),刷新后跳转问题的解决方案go→

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