如何动态调整 iFrame 的大小（跨浏览器解决方案）答案

【问题标题】：How to dynamically resize an iFrame (crossbrowser solution)如何动态调整 iFrame 的大小（跨浏览器解决方案）
【发布时间】：2012-10-30 08:15:42
【问题描述】：

我正在尝试在 Drupal 页面上包含 iframe。到目前为止，我成功地包含了框架，但我编写的高度调整大小功能仅适用于 Internet Explorer。我的目标是在 Firefox 和 Chrome 中也可以调整大小。我搜索了互联网，但找不到我要找的东西。长话短说，我希望我的框架自动调整高度。

这是我到目前为止所做的（这是 Drupal 中包含的 HTML 页面的代码）：

<script type="text/javascript">
    function resize() {
        var iframe = document.all.icw;
        document.getElementById("icw").style.height = iframe.document.body.scrollHeight + "px";
    }
</script>
<iframe id="icw" src="XXXXX" width="100%" scrolling="no" onload="resize()">

我了解，如果 iframe 位于另一个域中，则由于权限问题，解决方案可能会更加困难。对吗？

这些是我在 Chrome 和 Firefox 中遇到的错误：

Chrome：无法读取未定义的属性“正文”

Chrome：JavaScript 尝试从具有 URL YYY 的框架访问具有 URL XXX 的框架。域、协议和端口必须匹配。

Firefox：document.all 未定义

编辑：如果我想更改iframe 元素之一怎么办？就我而言，我需要更改文本框值。我知道当页面加载时我必须这样做，但我找不到解决方案。无论我把代码放在哪里，我总能得到一个

无法调用未定义的方法“getElementById”

当我尝试访问 iFrame 文本框时。

EDIT2：问了一个新问题，因为它们不相关。

【问题讨论】：

标签： javascript html drupal iframe resize

【解决方案1】：

只要您可以访问两者，此解决方案甚至可以跨域工作。有很多边缘情况，但至少你可以从这个开始。您还可以添加计时器事件以确保 iFrame 始终是正确的大小，因此您永远不会有滚动条。请记住，由于使用了 postMessage，这仅适用于支持 HTML5 的浏览器。

在 iFrame 内

function resize(){
    var body = document.body,
    html = document.documentElement,
    height = body.offsetHeight;
    if(height === 0){
        height = html.offsetHeight;
    }
    parent.postMessage({'action':'RESIZE', 'height':height}, '*');
}

父母

function handleMessage(e) {
    if (e.data.action == 'RESIZE') {
        var targetHeight = e.data.height;
        $('#iFrame').height(targetHeight);
    }
}

window.addEventListener("message", handleMessage, false);

【讨论】：

干得好！它在 Firefox 和 Chrome 上运行起来就像一个魅力，唯一的问题是它不适用于 IE。所以我试图将 if 放入 resize 函数中，以便如果浏览器是 IE，它使用旧方法。认为它会起作用吗？

【解决方案2】：

window.addEventListener("message", handleMessage, false);

此代码不适用于 IE。

IE 使用

window.attachEvent("onmessage", handleMessage, false);

【讨论】：

【解决方案3】：

查看这个小型库，它可以为您执行此操作并管理所有其他边缘情况。

https://github.com/davidjbradshaw/iframe-resizer

【讨论】：