javascript - 仅在 Chrome 中调整 Iframe 大小问题

Question

好的，就到这里。 Stack Overflow 处女地在这里，但希望你们能够帮助我。

我一直在根据 iframe 的内容调整其高度。随着用户逐步完成一系列表单，内容会有所不同，这意味着每次提交都会生成一个新表单，其中有 3 个表单。

下面的代码在 iframe 加载时被调用，

function checkHeight() {
    var frame=document.getElementById('frame');
    var doc=frame.contentWindow.document;
    var data=doc.getElementById('data');
    alert(data);
    var data_height=data.offsetHeight;
    if(data_height) {
        frame.style.height=data_height + 'px';
        alert('height has been set');
    }
}

这在 Mac 和 PC 版本的 Mozilla、IE 和 Safari 上运行良好，但我在使用 chrome 时遇到了一个大问题。它没有返回框架内的文档。这是权限错误还是什么？!

我也尝试过 contentDocument 但无济于事。

所有文档都位于我的服务器上，并且都在同一个文件夹中。

提前致谢。

Answer 1

编辑:

我重新阅读了您的问题 - 由于它们位于同一安全沙箱中(即在同一域中)，因此仅计算 iframe 文档内的高度并调用父级调整大小函数会更简单吗？

原文:

由于当 iframe 从不同的域嵌入时会发生类似的情况(无法访问 iframe..document)，我推测这种方法会起作用:

1. 首先:计算文档本身(即 iframe 内)的文档高度。
2. 使用旧版浏览器的 window.postMessage/hash 轮询将值传递给父级。有a neat library它会为您照顾兼容性。
3. 接收父级中的值并相应地调整 iframe 的大小。

同样，这可能有点过头了，但考虑到该解决方案已经过测试，可以在不同的安全沙箱之间完全按照您的要求进行操作，如果 iframe 更简单的场景也应该是这种情况位于同一域中。

话虽这么说，如果它们位于同一域(而不是小部件/不可混搭的第三方内容)，那么真的需要 iframe 吗？听起来这只是设置 jQuery 来发出 ajax 请求并用新数据填充容器的问题。