兼容主流浏览器的iframe自适应高度js脚本

以下是一个兼容主流浏览器的iframe自适应高度的JavaScript脚本。此脚本通过监听iframe内部内容的变化来动态调整iframe的高度，确保内容不会超出iframe的显示区域。

function autoResizeIframe(iframe) {
    // 兼容多种浏览器获取iframe的contentWindow和document对象
    var iWindow = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iWindow.document.documentElement) {
        // 设定iframe的高度为内部文档的总高度
        iframe.height = iWindow.document.documentElement.scrollHeight + "px";
    } else {
        // 兼容旧版本的IE浏览器
        iframe.height = iWindow.document.body.scrollHeight + "px";
    }
}

// 假设iframe元素有一个特定的ID，这里使用"myIframe"作为示例
var iframe = document.getElementById('myIframe');

// 监听iframe加载完成
iframe.onload = function() {
    autoResizeIframe(iframe);
};

// 可选：如果iframe内容会动态变化，可以通过定时器再次调整高度
setInterval(function() {
    autoResizeIframe(iframe);
}, 1000); // 每秒检查一次

// 注意：如果iframe跨域，则可能由于同源策略限制而无法直接访问其内容
// 在这种情况下，需要iframe内的页面配合设置postMessage等跨域通信机制

这段代码首先定义了一个`autoResizeIframe`函数，用于调整指定iframe的高度。它通过`contentWindow`或`contentDocument.parentWindow`属性获取iframe内部的window对象，然后基于该window对象的文档高度来调整iframe的高度。

代码中还展示了如何使用`onload`事件监听器来在iframe加载完成后首次调整高度，并通过`setInterval`设置一个定时器来周期性地调整高度，以适应iframe内部内容的动态变化。

请注意，如果iframe跨域，则由于浏览器的同源策略，可能无法直接访问iframe内部的内容。在这种情况下，你需要使用`postMessage`等跨域通信机制来实现iframe高度的自适应。