5

我正在尝试iframe在 Drupal 页面上包含一个。到目前为止，我成功地包含了框架，但我编写的高度调整大小功能仅适用于 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：问了一个新问题，因为它们不相关。

4

3 回答 3

5

只要您可以访问两者，此解决方案甚至可以跨域工作。有很多边缘情况，但至少你可以从这个开始。您还可以添加计时器事件以确保 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);
于 2012-10-30T13:29:14.313 回答
2 
window.addEventListener("message", handleMessage, false);

此代码不适用于 IE。

对于 IE 使用

window.attachEvent("onmessage", handleMessage, false);
于 2013-09-26T12:52:47.520 回答
1

查看这个小型库，它可以为您完成此操作并管理所有其他边缘案例。

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

于 2014-03-12T21:01:37.343 回答