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;
    width: 100%;
    min-width: 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 

 

//免费赠送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→