一.问题描述

使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时，因为违反了浏览器安全策略，无法跨iframe获取到另一页面的数据，在控制台中可以看到如下报错

Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.

二.解决方案

以上问题可通过postMessage方法安全地跨iframe进行通信。

1.iframe子页面调用父页面

子页面数据发送

// data为子页面发送的数据（可以是一个js对象，会被自动序列化处理）

window.parent.postMessage(data, '*')


父页面数据监听
addEventListener('message', e => {

    // e.data为子页面发送的数据

    console.log(e.data)

})



2.父页面调用iframe子页面
父页面数据发送
document.getElementById('iframe').contentWindow.postMessage(data,'*')


子页面接收数据
addEventListener('message', e => {

    // e.data为父页面发送的数据

    console.log(e.data)

})



3.安全性优化- 发送数据限制接收源

在上边的代码中postMessage的第二个参数被设置为’*’，意为任意源，这里可以指定接收源，示例代码如下
 window.parent.postMessage('exit','http://example.org');


监听到数据检测发送来源
addEventListener('message', e => {

    if(e.origin === 'http://example.org') {

        // 仅在数据发送来源自受信任的地址才执行对应操作

    }

})



END

原创：https://www.panoramacn.com

源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。
专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说


免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议，如果您下载了该资源行为将被视为对《免责声明》全部内容的认可->
联系客服
投诉资源
 www.panoramacn.com资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。
敬请谅解！ 侵权删帖/违法举报/投稿等事物联系邮箱：2640602276@qq.com
                
                
未经允许不得转载：书荒源码源码网每日更新网站源码模板！ » 解决iframe跨域传参（Blocked a frame with origin）
                                
                                    
blocked a frame with origin
                                
                    

        

            
            
关注我们小说电影免费看
            
关注我们，获取更多的全网素材资源，有趣有料！
            
120000+人已关注
        
    
 
                
                    


                    
分享到：
        
                                赞(0)
        
                    打赏