一: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. bzoj4033 树上染色

    Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并 将其他的N-K个点染成白色.将所有点染色后,你会获得黑点两两之间的距 ...

  2. BZOJ 1500 洛谷2042维护序列题解

    BZ链接 洛谷链接 这道题真是丧心病狂.... 应该很容易就可以看出做法,但是写代码写的....... 思路很简单,用一个平衡树维护一下所有的操作就好了,重点讲解一下代码的细节 首先如果按照常规写法的 ...

  3. html+js 在页面同步服务器时间

    将以下的代码  放置html页面中! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. 从零学React Native之07View

    View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...

  5. datetimepicker —— 日期选择控件

    一.依赖 <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel=&qu ...

  6. AtCoder Regular Contest 082 D Derangement

    AtCoder Regular Contest 082 D Derangement 与下标相同与下个交换就好了.... Define a sequence of ’o’ and ’x’ of lengt ...

  7. Liunx vi/vim 2

    移动光标的方法 H 光标移动到这个屏幕的最上方那一行的第一个字符 M  光标移动到这个屏幕的中央那一行的第一个字符 L 光标移动到这个屏幕的最下方那一行的第一个字符 G 移动到这个档案的最后一行(常用 ...

  8. 2019-7-1-VisualStudio-快速设置启动项目

    title author date CreateTime categories VisualStudio 快速设置启动项目 lindexi 2019-07-01 14:37:38 +0800 2019 ...

  9. 关于Java语言for循环内外变量定义的问题

    今天看书时,看到一个代码,一个在循环外面没有用的变量,后即有了我的问题,在后面: 我的问题: 变量循环内定义,例如:while(true){String splitStr = null;}这“些”个s ...

  10. Java变量以及内存分配

    Java变量以及内存分配(非常重要) 堆栈 静态存储区域 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操 ...