CDN导致IFrame负载问题

Posted 2021-04-05

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

这是一个例子（右边的补充事实没有完全加载）：https://www.prosupps.com/products/aminolinx

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

未捕获的DOMException：阻止具有原始“https://www.prosupps.com”的帧访问跨源帧。在resizeIframe（https://cdn.prosupps.com/media/js/54d03508885a150fb0a1fa2ded94c4e8.js:21106:57）的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>

答案

来自here：

javascript API（如iframe.contentWindow，window.parent，window.open和window.opener）允许文档直接相互引用。当两个文档的原点不同时，这些引用提供对Window和Location对象的非常有限的访问

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

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