使用 postMessage() 访问 iframe.contentWindow.document 不起作用答案

【问题标题】：Accessing iframe.contentWindow.document not working using postMessage()使用 postMessage() 访问 iframe.contentWindow.document 不起作用
【发布时间】：2020-04-29 17:55:36
【问题描述】：

我的目标是将 css 添加到父页面的 iframe 内容中。我有两个不同的域，一个从另一个渲染 iframe，我使用 postMessage 绕过 same-origin 策略问题，但这似乎没有按预期工作。当我尝试console.log(iframe.contentWindow) 时，控制台出现错误Uncaught DOMException: Blocked a frame with origin "http://parent.domain.com" from accessing a cross-origin frame.

iframe

<iframe
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
        src="https://domain.with.iframe.content"
        width="100%"
        frameBorder="0"
        id="iframe-1"
    ></iframe>

带有 iframe 的页面。

<script>
    window.addEventListener('message', function(e) {
        var iframe = document.getElementById("iframe-1");
        console.log(e)
        console.log(e.origin)
        console.log(iframe)
        console.log(iframe.contentWindow)
    }, false);
</script>

我正在构建 iframe 的页面。

<script>
    var body = document.body
    body.onload = function resize() {
        parent.postMessage(["hey"], "*");
    }
</script>
</script>

从控制台我可以看到message 事件侦听器正在运行，但是console.log(iframe.contentWindow) 这一行会引发错误。任何帮助将不胜感激，谢谢。

【问题讨论】：

你不能这样做，见stackoverflow.com/questions/25098021/…所以你需要用postMessage来回传递你需要的数据
@Milton 我的目标是能够将 css 添加到父页面的 iframe 内容中，建议如何去做。谢谢。
这取决于您如何获取 CSS，但假设您将其作为字符串，您可以使用 postMessage 将该字符串发送到 iframe。在 iframe 中，您可以创建一个样式标签，将该标签的 innerHTML 设置为 CSS 字符串并将其附加到文档头部。就像这篇文章在 Global Styles 下一样 dev.to/karataev/set-css-styles-with-javascript-3nl5
感谢@Milton，如果你能将它添加为一个很棒的答案，它会起作用。

标签： javascript same-origin-policy postmessage

【解决方案1】：

添加来自我的 cmets 的答案：
您无法从父框架访问iframe.contentWindow，请参阅SecurityError: Blocked a frame with origin from accessing a cross-origin frame
所以你需要用postMessage来回传递你需要的CSS。

根据您获取 CSS 的方式，但假设您将其作为字符串，您可以使用 postMessage 将该字符串发送到 iframe。在 iframe 中，您可以创建一个样式标签，将该标签的 innerHTML 设置为 CSS 字符串并将其附加到文档头部。就像这篇文章中的 Global Styles https://dev.to/karataev/set-css-styles-with-javascript-3nl5

【讨论】：