如何动态调整iFrame(crossbrowser解决方案)的大小

Question

我想iframe在Drupal页面上添加一个.到目前为止,我成功地包含了框架,但我编写的高度调整大小功能仅适用于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尝试使用网址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);