一:a页面
1:打开b页面
let isB= window.open('b.html','b'); 2:a页面发送消息给b页面
    isB.postMessage("dsddfsdf", 'b.html');
 
 
  二: b页面
 
       b页面接受a页面的消息
 

window.onload = function() {
window.addEventListener('message', function(event) {
 //可以通过event.origin  判断消息来源
 
console.log(event.data,'a发送来的消息');
//作为接受到消息的回应 同样给a页面发送一个消息
   
 
//如果a页面没有关闭
 if(window.opener){
     window.opener.postMessage('我是b,我收到消息了','a.html');
}else{
console.log("a页面关闭了啊");
}
 
});
}
 
 
LAST:
 
在a页面同样添加 接受消息的事件  接受b接受消息的反馈信息
window.onload = function() {
window.addEventListener('message', function(event) {
//其他操作
})
}

  

js window.open 页面之间的通讯(不同源)的更多相关文章

  1. window.open()页面之间函数传值

    项目中遇到的问题,使用window.open()开一个页面之后,cookie会消失,所以无法一键切肤不管作用,解决方案如下: window.open()总结: window.open("sU ...

  2. JS控制静态页面之间传递参数获取参数并应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a ...

  3. js两个页面之间URL传递参数中文乱码

  4. js 页面之间的跳转、传参以及返回上一页

    js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一.页面之间的跳转传参 1.在页面之间跳转的方式有两种: window.location.href="test.html?nu ...

  5. H5小程序不同页面之间通讯解决方案

    小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等.于是做了以下总结 打开新的页面可以通过 navigator 组件来实现,通过 ...

  6. vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js jquery 实现html页面之间参数传递(单一参数、对象参数传递)

    最近自己在忙着做毕业设计,后台程序员,前端菜鸡,因为需要,所以实现了html页面之间参数传递.------jstarseven .菜鸡的自我修养. 页面A代码如下: <!DOCTYPE html ...

  8. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  9. 【转】iframe和父页,window.open打开页面之间的引用

    [转]iframe和父页,window.open打开页面之间的引用 iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到 1)通过iframe加载的,在if ...

随机推荐

  1. 元素的高度(基于vue)

    const viewH =el.target.offsetHeight;//可见高度 const contentH =el.target.scrollHeight;//内容高度 const scrol ...

  2. 简单线性回归(梯度下降法) python实现

    grad_desc .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { bord ...

  3. Apple的App Analytics统计平台你必须知道的

    Apple最近在iTunesConnect里最新发布了App Analytics统计平台,提供了现有友盟统计平台和自有统计平台无法统计的数据,具有自己的独有特点,尤其是下面几个最让人头疼的流量分析转化 ...

  4. 【New Feature】阿里云快照服务技术解析

    一.背景   目前上云已经成为行业发展趋势,越来越多的企业级客户将业务系统和数据库迁移到云上.而传统的备份一体机/备份软件方式,并不适合云上ECS.RDS等产品的备份与容灾服务.阿里云块存储服务提供云 ...

  5. 原生js复习1.0

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 【NS2】学习资源

    查找资料时在网上看到不错的资源汇总博客 1 http://blog.csdn.net/chenkai619/article/category/1084323 2 http://blog.sina.co ...

  7. SDUT-2117_数据结构实验之链表二:逆序建立链表

    数据结构实验之链表二:逆序建立链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入整数个数N,再输入N个整数,按照 ...

  8. shell不排序去重

    一条命令搞定:   awk '!a[$0]++' file 如果是第一次出现a[$0]++的值为0(假),而!a[$0]++的值就为1(真),之后就执行print $0 第二次或者两次以上的出现a[$ ...

  9. @codechef - SONATR@ Sonya and Tree

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 p 为 0~N-1 的一个排列,并给定一棵 N 个点的树. ...

  10. Mysql统计信息处理及binlog解释

    TODO use db_name; -- 分析表 ANALYZE TABLE table_name; -- 查看表信息 ; -- 查看索引 SHOW INDEX FROM table_name; ht ...