首页 > 其他分享 >两个非同源页面之间通信,postMessage

两个非同源页面之间通信,postMessage

时间:2022-09-08 02:22:18浏览次数:89  
标签:postMessage function http 0.1 html 3000 同源 页面

http://127.0.0.1:3000/a.html

<iframe id="frame" src="http://127.0.0.1:3001/b.html"></iframe>
<script>
  iframe.onload = function() {
    iframe.contentWidnow.postMessage('msg from 3000/a.html', 'http://127.0.0.1:3001/')
  }
  // 监听b.html传来的信息
  window.onmessage = function(e) {
    console.log(e.data)
  }
</script>

http://127.0.0.1:3001/b.html

<script>
  // 监听b.html传来的信息
  window.onmessage = function(e) {
    console.log(e.data)
    e.source.postMessage('send msg to 3000/a.html', e.origin)
  }
</script>

标签:postMessage,function,http,0.1,html,3000,同源,页面
From: https://www.cnblogs.com/Lilc20201212/p/16667918.html

相关文章

  • 解决详情页面作者不显示
    问题如下:详情页面中:  文章列表中:  解决方法:把app/models/user/user.go中的Link方法接收者改为值传递,则解决问题,如下:原来的Link方法:  更改后的Link方法......
  • HTML页面修改辅助测试页面列表滑轮显示
    需求页面 如上图,我们在实际测试过程中,需要测试这个列表页在数据过多时,是否会有滑轮出现,依照我们常规操作,会需要我们操作业务流程,单条的走【申请】-【审批】等流程,会繁琐......
  • C# ASP.NET常见4种页面缓存方式
    C#ASP.NET常见4种页面缓存方式1、 分布式缓存Memcached教程pdf下载 2、内存缓存,此暂用服务器资源,没钱买好机机的少用,不用!#region内存缓存publicclas......
  • uniapp请求到数据却渲染不到页面
    是this指向问题,如果success写成普通函数的形式,那么this指向success自身,应该指向对象自身的uni.request({url:‘http://localhost:3000/api/search,method:‘get......
  • elementUI-点击表格某一行携带参数跳转到另一个页面-路由携参
    1.应用场景示例(1)在任务下发界面,点击查看巡检结果,携带tsakId,times跳转到任务结果界面,查询任务对应的任务结果(2)任务结果页面2.实现方法及步骤(1)通过el-table,添加操作列......
  • 前台页面如何找某个数据的后端接口
    右键>开发者模式>打开网络>刷新页面>看响应>一个个看响应,看哪个响应与像找的数据一样或可以看‘预览’  ......
  • 基于百度通用翻译API的在线翻译页面
    百度通用翻译API实现在线翻译界面前期准备注册账号:api.fanyi.baidu.com申请百度通用翻译API服务记住appid以及key(后面用的上)准备一个MD5算法观看文档学习使用规则......
  • 记录一次在fastadmin中列表顶部增加操作按钮并展开页面操作
    index.html<ahref="javascript:;"class="btnbtn-successbtn-addsbtn-disableddisabled{:$auth->check('match/article/adds')?'':'hide'}"title="{:__('指定评委......
  • 【面试题】js实现将excel表格copy到页面
    js实现将excel表格copy到页面点击打开视频讲解更加详细其实最核心的技术,还是copy的是我们粘贴板上的数据就像平常怎么粘贴复制其他的数据一样,只是我们在excel粘贴的是一......
  • 导航页面设计/课程
    导航页面设计/课程导航页面设计/课程免费下载在HTML、CSS和JavaScript中HTML:部分导航h1前沿趋势h3.span.loader跨度.mB跨度.mE跨度.mN......