使用iframe实现自动调整大小

在网页开发中，经常会使用iframe嵌入其他网页内容。但是，如果嵌入的网页内容大小变动时，父页面的iframe大小并不会自动调整，造成页面的不美观，也给用户带来不便。所以，我们需要使用一些方法来实现iframe自动调整大小。

方法一：使用Javascript实现

我们可以使用Javascript来实现iframe的自动调整大小。具体实现代码如下：

<script type="text/javascript">
function resizeFrame(){
    var theFrame=document.getElementById("myFrame");
    if(theFrame.contentWindow.document.body.scrollHeight>0){
        theFrame.height=theFrame.contentWindow.document.body.scrollHeight;
    }
}
</script>

<iframe id="myFrame" src="子页面" onload="resizeFrame();" scrolling="no" frameborder="0"></iframe>

代码说明：

• resizeFrame()函数：该函数是用来重置iframe大小的，我们在iframe的onload事件中调用该函数，使iframe加载完成后，自动调整大小。
• theFrame：该变量表示iframe元素。
• theFrame.contentWindow.document.body.scrollHeight：表示子页面的高度，如果子页面的高度大于0，则将iframe的高度设置为当前子页面高度，这样就实现了自动调整大小。

使用Javascript实现的优点是代码简单易懂，但是存在一些问题。比如，当嵌入的网页内容越来越多时，调整大小的耗时也会越来越长，导致用户等待时间过长。所以，我们可以使用另外的方法来实现。

方法二：使用第三方库实现

我们可以使用一些第三方库来实现iframe的自动调整大小，比如iframe-resizer。它是一个轻量级、可定制的iframe自动调整大小脚本，适用于移动设备。

使用iframe-resizer的方法非常简单，只需要引入它的js文件，并在父页面的html代码中加入一些配置参数即可。示例代码如下：

<!-- 加载iframe-resizer脚本 -->
<script src="js/iframeResizer.min.js"></script>

<!-- 配置参数 -->
<script type="text/javascript">
    iFrameResize({
        log: false,
        enablePublicMethods: true,
        heightCalculationMethod: 'lowestElement',
        checkOrigin: false
    });
</script>

<!-- 父页面的iframe元素 -->
<iframe src="子页面" frameborder="0" scrolling="no"></iframe>

代码说明：

• iFrameResize()函数：用来初始化iframe-resizer，并设置相关参数。比如log表示是否将运行日志输出到控制台，enablePublicMethods表示是否允许子页面调整父页面的大小等等。
• heightCalculationMethod参数：表示自动调整大小的方法。比如设置lowestElement表示使用最底层的元素作为高度的计算方式。
• checkOrigin参数：表示是否启用安全策略，防止跨站点脚本攻击。

总结

以上就是使用iframe实现自动调整大小的两种方法。使用Javascript实现的方法代码简单，易于理解；而使用第三方库实现的方法更加方便、快捷。我们可以根据需求选择合适的方法，并根据实际情况进行调整，以达到更好的效果。