未捕获SecurityError端口问题: Iframe调整大小

Question

我有一个父页面，渲染和iframe与不同大小的主体。但是，当在没有www的情况下导航到该站点时，您会得到以下错误：

599未捕获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都有完全的控制，你可能想尝试一下ConroyP的答案：Resizing an iframe based on content。

(这是公认的答案)

这有点复杂，但它对我来说很有效。根据网络速度的不同，它几乎可以是瞬间的。

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

Answer 2

对于这个问题，有几种解决方案。

第一种方法是从iFrame标记的scr属性中删除http://example.com，因此它只是虚拟目录“/src=-directory”。

第二个选项是使用iFrame-iFrame库。

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

Answer 3

您是否尝试过向iframe元素添加sandbox="allow-same-origin“？它应该能做到这一点。

如果它有效，您应该阅读本文：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

它将为您提供对iframe的所有类型的访问权限。