使用iframe制作页面嵌套的完美解决方案——自适应高度

一、iframe的基本使用方法

iframe是HTML中的一个元素，它可以将其他网页嵌入到当前页面中，从而达到页面嵌套的效果。使用iframe只需要两个步骤：

1. 在父页面中使用iframe标签引入子页面。

<iframe src="子页面的URL"></iframe>

2. 子页面在自己的HTML文件中进行编写，和制作独立的HTML文件没有区别。

通过上述两个步骤，就可以很简单的实现页面嵌套了。但是，使用iframe时还需要注意一个问题——iframe的大小问题。

二、iframe的大小问题

在实际开发过程中，父页面和子页面的大小往往会不一致，这时我们就需要调整iframe的大小，使它能够适应子页面的大小。下面介绍三种实现iframe自适应高度的方法：

方法1：通过JS获取iframe高度

可以使用JS的contentWindow属性获取嵌入的子页面，然后再获取子页面的高度，将得到的高度赋给iframe即可。代码如下：

<iframe src="子页面的URL" onload="this.height=this.contentWindow.document.body.scrollHeight" ></iframe>

在这个例子中，onload事件会在iframe加载完毕后触发，然后通过 this.contentWindow.document.body.scrollHeight 获得子页面的高度，最后将高度赋给iframe元素的 height属性，从而实现自适应高度。

方法2：通过监听window.postMessage消息

通过postMessage API可以在iframe和父页面之间建立通信，监听子页面发送的高度信息并将高度赋给iframe即可。首先，子页面在加载完毕后向父页面发送自己的高度信息：

window.parent.postMessage(document.body.scrollHeight, '*');

然后，父页面监听window.postMessage事件，当子页面向父页面发送信息时，自动将子页面的高度赋给iframe：

window.addEventListener('message', function(e){
    if(e.origin != '子页面域名') return;
    var height = parseInt(e.data);
    iframe.style.height = height + 'px';
});

需要注意的是，使用这种方法需要在子页面中添加安全头，以防止跨站脚本攻击：

res.setHeader("X-Frame-Options", "ALLOW-FROM 父页面域名");

方法3：使用第三方插件

除了手动编写JS代码实现自适应高度之外，还可以使用现成的第三方插件。

比如iFrame Resizer插件，它可以自动调整iframe元素的高度和宽度，一行JS代码解决自适应问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.min.js"></script>
<iframe src="子页面的URL" frameborder="0" scrolling="no" data-iframe-height></iframe>
<script>iFrameResize({log:false,checkOrigin:false}, 'iframe[data-iframe-height]');</script>

需要引入iFrame Resizer插件，对iframe元素进行简单的设置，并执行一行JS代码就可以实现自适应高度。

三、总结

通过以上三种方法，我们可以实现iframe的自适应高度，让页面嵌套更加美观、合理。在实际应用中，可以根据具体情况选择不同的方法实现。