iframe开发中遇到的问题

问题描述：前段开发中给出的静态页面，每个页面中都存在导航以及头部尾部信息，现在需要对其公共部分进行抽取，并实现点击菜单导航左侧不刷新，右侧主体局部刷新。

解决办法：使用iframe做页面嵌套，删除重复的头部和菜单导航
frameborder=“0” 规定不显示框架周围的边框。
scrolling=“no” 规定在 iframe 中不显示滚动条。
嵌套信息

<iframe id="iframepage" src='${innerUrl}' width="100%" frameborder="0" scrolling="no" onload="iframeLoad()"></iframe>

监听菜单，做点击事件，替换iframe中的src来实现右侧主体内容的刷新

<li><a href="javascript:;" onclick="openIframepage('${contentp_path}${child.menuurl}')">${child.menuname}</a></li>
<script>
    function openIframepage(url) {
        var ifm= document.getElementById("iframepage");
        if(ifm!=null&&ifm.src!=url){ //新的url和当前不相同
            ifm.src=url;//替换url实现刷新
        }
    }

//页面加载过程
    function iframeLoad()
    {
        var ifm=document.getElementById("iframepage");
        ifm.height=0;
        ifm.height=ifm.contentWindow.document.body.scrollHeight;
    }
</script>

问题点：iframe页面嵌套时存在页面高度自适应问题，当页面高度被撑大无法回缩
解决办法：在页面加载过程中，将之前加载的页面高度覆盖掉，重置为0，以此达到收缩目的，再把嵌套页面的高度赋值给iframe,实现高度自适应。
问题点：由于网络原因可能还会出现先加载视图，然后才接收到后端传送的数据，仍无法完全实现高度自适应这个尴尬问题，所以我们要在子页面加载数据完成之后也能控制到父页面的高度，以此来达到高度自适应
解决办法：在子页面引入的js文件中编写这样一个js方法

function iframeLoad()
{
    var ifm = window.parent.document.getElementById('iframepage');
    ifm.height=0;
    ifm.height=document.body.scrollHeight;
}

在子页面初始化页面访问后端数据请求完成之后，再调用上述方法，以此来控制父页面的高度
例如：

到这里iframe页面自适应的问题算是完全解决了，撒花
参考博客
https://blog.youkuaiyun.com/ye987987/article/details/51832066