Question

我有一个父网页，渲染和iframe的大小不同。但是，当网站导航到www时，您会收到以下错误：

599 Uncaught SecurityError：阻止原始“http://example.com”的帧访问原点为“http://www.example.com”的帧。协议，域和端口必须匹配。

表单在iframe中呈现，但它没有正确调整滚动高度（我在iframe上没有任何滚动功能，并且需要在框架底部有额外的空间）。

这是因为页面上有以下iframe /函数：

<iframe id="iframe1" src="http://www.example.com/virtual-directory" height="" width="300px" frameborder="0" onload="iframeLoaded()"></iframe>
<script>
   function iframeLoaded() {
     var iFrameID = document.getElementById('iframe1');
     if (iFrameID) {
         iFrameID.height = "";
         iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 20 + "px";
     }
   }
</script>

我看了一下这篇文章SecurityError: Blocked a frame with origin from accessing a cross-origin frame，但我不确定在哪里实施该检查以使此调整大小正常运行而不会带来安全风险。

Answer 1

这个问题有几个解决方案。

第一个是从你的iFrame标签的scr属性中删除http://example.com，所以它只是src =“/ virtual-directory”

第二个选项是使用iFrame-resizer lib。

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

Answer 2

您是否尝试过添加沙箱=＆＃34;允许同源＆＃34;到iframe元素？应该这样做。

如果有效，请查看以下文章：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

它可以让您访问可以提供iframe的各种权限。

Answer 3

如果你完全控制父和iframe，你可能想在这里尝试ConroyP的答案：Resizing an iframe based on content。

（这是接受的答案）

这有点复杂，但它对我有用。根据网络速度，它几乎可以瞬间完成。

唯一的缺点是，当您更改其中的页面时，它不会向上滚动iframe内容。

未捕获的SecurityError端口问题：iframe调整大小

3 个答案: