解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame

简介: 解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
  • 内嵌 iframe 页面,一般使用 window.parentwindow.top 来获取父页面的 window 对象
  • 在子页面 想使用(或传递给) 父页面的参数,但是原因两个的域名不一样,所以会出现跨域问题。
  • 解决办法
    1、父页面监听 message,写法固定
window.addEventListener('message', function (e) {
  console.log(e)
})
  • 2、子页面发送 message 消息,并附带参数
// window.parent 是 iframe 子页面获取父页面的 window 对象
// 后面的 * 号就是处理跨域问题的,任何域名都不会出现跨域问题
window.parent.postMessage("需要传递的参数", '*')
// 也可以指定传送域名地址,这个域名不会出现跨域问题,写父页面(接收)域名地址
window.parent.postMessage("需要传递的参数", 'http://0.0.0.0:8080')
相关文章
iOS- 关于AVAudioSession的使用——后台播放音乐
iOS- 关于AVAudioSession的使用——后台播放音乐
822 0
iOS- 关于AVAudioSession的使用——后台播放音乐
|
12月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
822 20
|
12月前
|
自然语言处理 前端开发 JavaScript
🔥3.4K star!阿里出品对话式UI神器,轻松打造专业级聊天界面!
ChatUI 是阿里巴巴团队开源的对话式 UI 设计语言与 React 组件库,专为构建智能对话界面而生。它凝聚了阿里在智能客服领域的最佳实践,提供“最新、最全、最优质”的开源项目和高效工作学习方法。核心功能亮点包括智能消息流处理、无障碍访问认证、企业级主题定制、多端自适应布局、国际化双引擎和智能输入辅助。技术架构基于 React 17 + TypeScript 4,支持 Less + CSS Variables 样式方案,Rollup + Babel 构建工具,以及 Jest + React Testing Library 测试体系。
3214 5
|
容器
echarts的grid——图表的位置配置
echarts的grid——图表的位置配置
2955 1
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6290 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
1109 3
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
3880 0
|
JavaScript
Vue组件点击事件不触发的问题,添加事件修饰符native解决
Vue组件点击事件不触发的问题,添加事件修饰符native解决
1476 0