使用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的自適應高度，讓頁面嵌套更加美觀、合理。在實際應用中，可以根據具體情況選擇不同的方法實現。