动态的改变IFrame的高度实现IFrame自动伸展适应高度

要实现IFrame的自动伸展以适应其内容的高度，可以通过JavaScript动态地调整其`height`属性。这通常涉及到跨域通信的问题，因为IFrame的内容可能来自不同的源。然而，如果IFrame的内容与你控制的页面位于同一域下，或者你有权限修改IFrame内页面的JavaScript，那么可以通过以下几种方式实现：

### 方法一：使用JavaScript（同域）

如果IFrame与父页面位于同一域，你可以直接通过JavaScript访问并修改IFrame的高度。以下是一个基本的示例：

// 假设iframe的id为"myIframe"
function adjustIframeHeight() {
    var iframe = document.getElementById('myIframe');
    // 假设IFrame内部有一个足够高的元素，其id为"content"
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    var contentHeight = iframeDoc.getElementById('content').offsetHeight;
    // 加上一些额外的空间（比如滚动条等）
    var newHeight = contentHeight + 50;
    iframe.style.height = newHeight + 'px';
}

// 可以在页面加载完成后调用，或者根据需要调用
window.onload = adjustIframeHeight;

### 方法二：使用`postMessage`（跨域）

如果IFrame的内容来自不同的域，你可以使用`window.postMessage`方法进行跨域通信。这需要在父页面和IFrame内部页面都设置监听器和消息发送者。

**父页面JavaScript**:

window.addEventListener('message', function(event) {
    if (event.origin !== "http://example.com") { // 检查消息来源
        return;
    }
    var iframe = document.getElementById('myIframe');
    iframe.style.height = event.data + 'px'; // 假设event.data是IFrame页面发送的高度
}, false);

**IFrame内部页面JavaScript**:

function sendHeightToParent() {
    var height = document.body.scrollHeight; // 获取内容高度
    window.parent.postMessage(height, '*'); // 发送高度到父页面，'*'可以替换为具体的父页面源
}

// 可以在页面加载完成后调用，或者内容更新时调用
window.onload = sendHeightToParent;

注意：在使用`postMessage`时，应谨慎处理消息来源，以防止潜在的安全风险。

以上两种方法可以根据你的具体需求和环境来选择使用。