最近在写一个项目:需要在页面使用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>