Blocked a frame with origin ““ from accessing a cross-origin frame.

时间:2025-02-07 18:41:37

最近在写一个项目:需要在页面使用iframe来做登陆功能,本想使用();刷新页面的,最后报错了“Blocked a frame with origin "" from accessing a cross-origin frame”。

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

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

父级页面:

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

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

子窗口:

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

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

</script>