iframe根据内容的高度和宽度自适应显示

建站过程中经常会使用iframe标签去调用一些图片、视频或者网页内容，对于调用内容的宽度和高度，我们常用width和height属性去设置。但是不同的浏览器对于宽高的要求是不一样的。如果我们把宽高写死，那么可能会在一些浏览器中出现错位的情况。所以就要想办法来设置iframe调用内容的宽高自适应浏览器。

百度搜索了好久，找了很多方法和代码都没有作用，最终在简书看到一篇文章介绍iframe根据内容的高度和宽度自适应显示的代码，测试后好像[文]确实可以自适应。

所以扒下来留存，以便于后期使用。代码如下：

<iframe src="https://www.bAIdu.com" id="iframe" frameborder="0" scrolling="no" onload="changeFrameHeight()"></iframe>        <script type="text/Javascript" language="javascript">            function changeFrameHeight() {                var ifm = document.getElementById("iframe");                ifm.height = document.documentElement.clientHeight;                ifm.width = document.documentElement.clientWidth;                console.log("高度",document.documentElement.clientHeight);            }            window.onresize = function() {                changeFrameHeight();            }        </script>

以上就是iframe根据内容的高度和宽度自适应显示的全部内容了,希望能够帮助到你，找建站教程记得来极光资源网！