一: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. 一条SQL完成跨数据库实例Join查询

    背景 随着业务复杂程度的提高.数据规模的增长,越来越多的公司选择对其在线业务数据库进行垂直或水平拆分,甚至选择不同的数据库类型以满足其业务需求.原本在同一数据库实例里就能实现的SQL查询,现在需要跨多 ...

  2. JavaScript--淘宝图片切换

    css样式有点问题,但是主要是js逻辑: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  3. python 逗号分隔值文件的操作

  4. Javascript 用来验证电话号码的正则

    Javascript 用来验证电话号码的正则 在学习 Javascript 时学习到的. function telephoneCheck(str) { // return /^(1\s?)?(\d{3 ...

  5. Oracle函数——COALESCE

    COALESCE 含义:COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值 ...

  6. 洛谷P3366 【模板】最小生成树(kuskal)

    #include<bits/stdc++.h> using namespace std; ; ; struct node{ int cnt,fa; }f[maxn]; inline voi ...

  7. 模板—点分治A(容斥)(洛谷P2634 [国家集训队]聪聪可可)

    洛谷P2634 [国家集训队]聪聪可可 静态点分治 一开始还以为要把分治树建出来……• 树的结构不发生改变,点权边权都不变,那么我们利用刚刚的思路,有两种具体的分治方法.• A:朴素做法,直接找重心, ...

  8. js日期拓展方法

    最近项目中使用了大量关于日期的操作遂将其整理如下: /** * 格式化日期 * @param {String} fmt [日期类型 默认为年月日(yyyy-MM-dd)] */ Date.protot ...

  9. Getting started with the basics of programming exercises_5

    1.编写函数,把由十六进制数字组成的字符串转换为对应的整型值 编写函数htoi(s),把由十六进制数字组成的字符串(包含可选的前缀0x或0X)转换为与之等价的整型值.字符串中允许包含的数字包括:0~9 ...

  10. 5款实用的jQuery验证码插件

    效果图 文档结构 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...