Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.

最近在写一个项目：需要在页面使用iframe来做登陆功能，本想使用parent.window.location.reload();刷新页面的，最后报错了“Blocked a frame with origin "https://my.xxxxxxx.com" from accessing a cross-origin frame”。

很明显这个报错就是跨域的问题，因为iframe遵循"同源策略"，所以在不同源的情况下是无法进行DOM操作的。因为我只是需要刷新父级的页面所以我使用了：parent.window.location.href = document.referrer;用来在子级窗口刷新父的页面。

如果需要进行DOM操作或者传参的可以使用 postMessage() 方法用于安全地实现跨源通信，如下：

父级页面：

<div style="margin-bottom: 20px;">
    <button onclick="handleEvent()">向子页面发送信息</button>
</div>
<iframe src="iframe.html" id="iframe"></iframe>
<script>
    function handleEvent() {
        // iframe的id
        var f = document.getElementById('iframe');
        // 触发子页面的监听事件
        f.contentWindow.postMessage('父页面发的消息', '*');
    }

    // 注册消息事件监听，接受子元素给的数据
    window.addEventListener('message', (e) => {
        console.log(e.data);
    }, false);
</script>

子窗口：

<button onclick="handleEvent()">向父页面发送信息</button>
<p>子页面</p>
<script>
    // 注册消息事件监听，接受父元素给的数据
    window.addEventListener('message', (e) => {
        console.log('iframe=' + e.data);
    }, false);

    function handleEvent() {
        // 向父页面发消息
        window.parent.postMessage('子页面发的消息', '*');
    }

</script>