怎样使父页面的高度随着子页面内容的高度变化而变化

本文参考了 作者 十一路客 的文章：https://blog.csdn.net/xyr05288/article/details/46416059，非常感谢作者的分享。

业务场景：

       后台管理功能的jsp页面采用的iframe嵌套的页面结构，子页面中有数据列表等通过ajax加载的动态数据。

 

出现问题：

        子页面的高度设置为100%，但是实际取的是当前页面的可见高度或者父页面的高度，如果子页面的高度大于父页面的高度，会出现滚动条，这样父页面和子页面各有一个滚动条，看起来实在是不美观，操作也繁琐。

 

 解决方法：

        在父页面写个方法
function changeHeight(height){

      //改变装iframe的容器div的高度

     $("#child_frame").css("height",height);

}

子页面需要引入一个js文件，详见附件，该js文件是从上面的参考文章中拿的，再次感谢作者。

子页面初始化需要写如下js代码：

  $(document).ready(function(){
 $("body").fadeIn(); //防止出现界面一闪的情况，界面默认是隐藏的，此时显示
    changePH();
    $("body").resize(function() { //body变化时执行
        changePH();
    });
    $.ajaxSetup({
  beforeSend : function() {
  },
  complete : function() { //ajax请求完成后执行
   changePH();
  },
  error : function(xhr, type) {
  }
 });
});
//调用父级页面方法，修改父级页面的高度
function changePH(){
 if(window.frameElement.src.indexOf("toStudyCourseList") != -1){
        if(!($(window.frameElement.parentElement).css("display") == "none")){
            var height = $('body')[0].scrollHeight;
            window.parent.changeHeight($(window.frameElement.parentElement),height);
        }
    }else{
        if(!($(window.frameElement.parentElement.parentElement).css("display") == "none")){
            var height = $('body')[0].scrollHeight;
            window.parent.changeHeight($(window.frameElement.parentElement),height);
        }
    }
}