Question

我正在尝试在iframe中加载html文件，但自从我将网站的资源加载到CDN后，它现在被浏览器阻止。

以下是一个示例（右侧的补充事实未完全加载）：https://www.prosupps.com/products/aminolinx

这是我从控制台得到的错误：

未捕获DOMException：阻止具有原始“https://www.prosupps.com”的帧访问跨源帧。 at resizeIframe（https://cdn.prosupps.com/media/js/54d03508885a150fb0a1fa2ded94c4e8.js:21106:57）at HTMLIFrameElement.onload（https://www.prosupps.com/products/aminolinx:677:248）

有人可以帮我找到解决方案吗？

以下是导致问题的特定代码行。

 function resizeIframe(e)
{e.style.height=e.contentWindow.document.body.scrollHeight+"px"}

以下是iframe代码：

 <iframe name="aminolinx-sample-supplement-facts" id="supplement-facts" 
src="{{media url="wysiwyg/prosupps/supplement-facts/AminoLinx-Mango-
Passion-Fruit-Sample-Supplement-Facts.html"}}" frameborder="0" 
scrolling="no"></iframe>

Answer 1

来自this answer：

JavaScript API，例如iframe.contentWindow，window.parent， window.open和window.opener允许文档直接引用彼此。当这两个文件没有相同的起源时，这些引用提供对Window和Location对象的非常有限的访问

这就是为什么当您将资源卸载到CDN时，您的JS被破坏了。您需要将右侧块从CDN移回或借助here来进行帧间通信

window.postMessage（）方法安全地启用跨源 Window对象之间的通信;例如，在页面和页面之间它产生的弹出窗口，或嵌入的页面和iframe之间的弹出窗口在其中

CDN导致IFrame加载问题

1 个答案: