<p>iframe自适应宽度和高度，兼容多种浏览器随着窗口大小改变。工作中我们遇到了iframe嵌入页面高度自适应的问题。因为我们不知道所加载的iframe内容页面会有多高，又不想在页面上出现难看的滚动条，这个时候我们可以使用Javascript来动态让iframe自适应高度。</p><p>我们准备一个主页面a.html，以及两个用于嵌入iframe的页面分别为iframeH.html和iframeH1.html，内容可以自己随便加，实际应用中可能是后台生成的内容。</p><p>为了演示，我们在主页面a.html中加入如下代码：</p><pre class="brush:html;toolbar:false">&lt;div&nbsp;class=&quot;opt_btn&quot;&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;getData(&#39;iframeH&#39;);&quot;&gt;加载内容1&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;getData(&#39;iframeH2&#39;);&quot;&gt;加载内容2&lt;/button&gt;&nbsp; &lt;/div&gt;&nbsp; &lt;iframe&nbsp;src=&quot;iframeH.html&quot;&nbsp;id=&quot;ifrm&quot;&nbsp;frameborder=&quot;0&quot;&nbsp;width=&quot;100%&quot;&nbsp;scrolling=&quot;no&quot;&nbsp;marginheight=&quot;0&quot;&nbsp;marginwidth=&quot;0&quot;&nbsp;onLoad=&quot;setIframeHeight(this.id)&quot;&gt;&lt;/iframe&gt;</pre><p>我们要实现的是，分别点击两个按钮，iframe中加载不同的内容，iframe中不能出现滚动条。</p><p>Javascript</p><p>首先我们使用Javascript动态改变iframe的src值，即分别点击两个按钮时，iframe加载不同的页面内容。代码中按钮button分别调用了自定义函数getData()就实现了切换内容的效果。</p><pre class="brush:js;toolbar:false">function&nbsp;getData(ifm){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;ifrm&quot;).src&nbsp;=&nbsp;ifm+&#39;.html&#39;;&nbsp; }</pre><p>然后，我们来关注iframe里的内容，因为我们事先不知道iframe的内容高度，如果先设置好iframe的高度height值，很可能当页面内容超长时会出现滚动条，这不是我们想要的。那么我们使用Javascript来动态获取iframe页面高度，然后设置iframe的高度。</p><p>在iframe完全加载后即onload，调用setIframeHeight()，iframe内容加载完成后，可获取iframe的高度值，然后重新设置iframe的高度，以下是整理好的代码：</p><pre class="brush:js;toolbar:false;">function&nbsp;setIframeHeight(id)&nbsp; {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ifrm&nbsp;=&nbsp;document.getElementById(id);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;doc&nbsp;=&nbsp;ifrm.contentDocument?&nbsp;ifrm.contentDocument:&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ifrm.contentWindow.document;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;ifrm.style.visibility&nbsp;=&nbsp;&#39;hidden&#39;;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;ifrm.style.height&nbsp;=&nbsp;&quot;10px&quot;;&nbsp;//&nbsp;reset&nbsp;to&nbsp;minimal&nbsp;height&nbsp;...&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;ifrm.style.height&nbsp;=&nbsp;getDocHeight(&nbsp;doc&nbsp;)&nbsp;+&nbsp;4&nbsp;+&nbsp;&quot;px&quot;;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;ifrm.style.visibility&nbsp;=&nbsp;&#39;visible&#39;;&nbsp; }&nbsp;&nbsp; function&nbsp;getDocHeight(doc)&nbsp; {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;doc&nbsp;=&nbsp;doc&nbsp;||&nbsp;document;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;body&nbsp;=&nbsp;doc.body,&nbsp;html&nbsp;=&nbsp;doc.documentElement;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;height&nbsp;=&nbsp;Math.max(&nbsp;body.scrollHeight,&nbsp;body.offsetHeight,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html.clientHeight,&nbsp;html.scrollHeight,&nbsp;html.offsetHeight&nbsp;);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;height;&nbsp; }</pre><p>好了，以上就是关于“iframe自适应宽度和高度，兼容多种浏览器随着窗口大小改变”的全部内容了，希望可以帮助到大家。如果大家有更好的方法，欢迎大家在评论区留言，谢谢~</p>