Question

我想在Drupal页面上添加iframe。到目前为止，我成功地包含了框架，但我编写的高度调整大小功能仅适用于Internet Explorer。我的目标是在火狐和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：问了一个新问题，因为它们没有关联。

Answer 1

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

内部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);

Answer 2

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

此代码不适用于IE。

对于IE使用

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

Answer 3

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

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

如何动态调整iFrame（crossbrowser解决方案）的大小

3 个答案: