点击菜单通过iframe的src改变来显示不同的页面。iframe能高度自适应，iframe滚动但是不显示滚动条

比眉伴天荒 2023-01-09 14:16 138阅读 0赞

当我们不使用任何的框架来写官网，把几个不同的页面怎么能在菜单改变的时候放在一起呢？

顶部菜单和底部的一般是不变的。变得是中间的内容，那么我们考虑一个总的页面，含有不变的元素，然后变得内容通过iframe的src改变来实现。那么需要考虑下面的两个问题：

# 1.怎么让iframe能高度自适应，宽度占据100%； #

页面的布局是这样的

> <div class="head">
> 
>     <ul class="nav">  
>          <li class="layui-nav-item layui-this" attr-href="/mainindex"><a href="\#">首页</a></li>  
>          <li class="layui-nav-item" attr-href="/profun"><a href="\#">功能与服务</a> </li>  
>          <li class="layui-nav-item" attr-href="/price"><a href="\#">价格</a></li>  
>          <li class="layui-nav-item" attr-href="/aboutus"><a href="\#">关于我们</a></li>  
>        </ul>
> 
> </div>
> 
>  
> 
>    <div class="mainContent">  
>        <iframe src='/pages/companyhome/mainindex.html' frameborder="0" scrolling="yes" class="weIframe" id="iframe" width="100%" ></iframe>  
>    </div>
> 
>  
> 
> <div class="footer">
> 
>    底部底部
> 
> </div>

解决办法就是：

> window.οnlοad=function()\{  
>         setTimeout(()=>\{  
>              iframeLoad();  
>          \},100)   //我发现如果没有延时有时候并不能完全获取页面的高度，会比正常的高度小一点，可能是有些内容加载的慢，所以这里写了个延迟  
>     \}  
>       
>     function iframeLoad()  
>     \{  
>         document.getElementById("iframe").height=0;  
>         document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;  
>         console.log(document.getElementById("iframe").height)  
>     \}        
>

**如果你的iframe里面有的数据是接口获取的，这样加载的时间可能和网速有关。有时候并不能准确的计算高度。**

**这个时候需要再iframe的页面里面再接口获取到数据以后计算高度。**

**再iframe的那个子页面添加**

**window.parent.iframeLoad()**

# 2，我们发现如果iframe的页面如果很长。它竟然有个滚动条，和最外层的滚动条就冲突了。我们希望里面的iframe可以滚动但是不显示滚动条 #

如果把iframe里面的属性scrolling="no"改成了no。的确是没有滚动条了。但是下面内容被挡住。没有完全的显示。

解决办法：

在这个iframe的页面里面找到他的最外面的那个div加样式

> .container\{  
>          background-color:\#fff;  
>          overflow: hidden;  
>      \}  
>      .container::-webkit-scrollbar \{  
>          display: none;  
>      \}

然后这个iframe的地方改成

> <iframe src='/pages/companyhome/mainindex.html' frameborder="0" scrolling="no" class="weIframe" id="iframe" width="100%" ></iframe>

如果上面没有效果可以在给 container加一个高度。$(".addstaff").height(window.screen.height)