未捕获的DOMException：阻止具有原始“http：// localhost：3000”的帧访问跨源帧

Question

我试图改变iframe中的样式，我给了iframe sandbox="allow-same-origin allow-scripts"属性，但我仍然得到'阻止一个有起源的框架'还有什么问题呢？

<iframe
  height="100%"
  sandbox="allow-same-origin allow-scripts"
  src={formLink}
  onLoad={event => {
    console.log('event', event, event.target);
    const iframeEle = event.target;
    const iframeEleDocument = (iframeEle.contentWindow || iframeEle.contentDocument);
    console.log('iframeEleDocument', iframeEleDocument);
    debugger;
    iframeEleDocument.body.style.backgroundColor = "red";
  }}
/>

Answer 1

我认为thepostMessage是这样做的安全方式。你可以使用postMessage在你的iframe中设置一个事件函数，你可以做你想做的事情。

GitHub有很多关于postMessage的商品，你可以方便地做到。