场景:当A页面打开B页面,在B页面操作后,A页面需要同步变更数据时

A 页面 ,http://127.0.0.1:10001/A.html

var domain = 'http://127.0.0.1:10001';

window.open('http://127.0.0.1:10001/B.html');
window.addEventListener('message', function (event) {
    if (event.origin !== domain) return;
    console.log('message received:  ' + event.data, event);
}, false);

B 页面 ,http://127.0.0.1:10001/B.html,opener是当前窗口的打开者引用

var domain = 'http://127.0.0.1:10001';
window.opener.postMessage("success", domain);
window.close();

如果是需要A打开B的同时向B中发送数据时

// 发送数据方
var domain = 'http://127.0.0.1:10001';
var myPopup = window.open('http://127.0.0.1:10001/B.html');
myPopup.postMessage('数据', domain);

// 接收数据方
window.addEventListener('message', function(event) {
    if(event.origin !== 'http://127.0.0.1:10001') return;
    console.log('message received:  ' + event.data,event);
},false);

以上就是如何利用js在两个html窗口间通信的详细内容,更多关于js在两个html窗口间通信的资料请关注程序员的世界其它相关文章!

如何利用js在两个html窗口间通信的更多相关文章

  1. javascript 箭头函数的使用介绍

    本文介绍箭头(arrow)函数的优点,更简洁的语法我们先来按常规语法定义函数:function funcName(params) { return params + 2; }funcName(2);// 4该函数使用箭头函数可以使用仅仅一行代码搞定!var funcN......

  2. JavaScript 中的六种循环方法

    Javascript中的遍历循环1.for循环对于数值索引的数组来说,可以使用标准的for循环来遍历值const arr=[1,2,3,4];for(let i=0;i2.for...in循环for...in循环可以用来遍历对象的可枚举属性列表(包括原型链上的属性)const myObject={}......

  3. 详解CocosCreator中几种计时器的使用方法

    一、setTimeOut3秒后打印abc。只执行一次。setTimeout(()=>{console.log("abc"); }, 3000);删除计时器,3秒后不会输出abc。let timeIndex;timeIndex = setTimeout(()=>{con......

  4. 详解CocosCreator优化之DrawCall

    前言在游戏开发中,DrawCall 作为一个非常重要的性能指标,直接影响游戏的整体性能表现。无论是 Cocos Creator、Unity、Unreal 还是其他游戏引擎,只要说到游戏性能优化,DrawCall 都是绝对少不了的一项。本文将会介绍什么是 DrawCall,为什么要减少 DrawCal......

  5. JavaScript中是如何定义私有变量的

    JavaScript并不像别的语言,能使用关键字来声明私有变量。我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap。 前言 JavaScript并不像别的语言,能使用关键字来声明私有变量。我了解的JavaScript能用来声明私有变量的方式......

  6. 详解JavaScript中的链式调用

    链模式链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。描述链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式......

  7. 在JavaScript中查找字符串中最长单词的三种方法(推荐)

    本文基于Free Code Camp基本算法脚本“查找字符串中最长的单词”。在此算法中,我们要查看每个单词并计算每个单词中有多少个字母。然后,比较计数以确定哪个单词的字符最多,并返回最长单词的长度。在本文中,我将解释三种方法。首先使用FOR循环,其次使用sort()方法,第三次使用reduce()方......

  8. React Router 如何使用history跳转

    在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样,replace的作用是取代当前历史记录go,此方法用来前进或者倒退,history.go(-1);goBack,此方法......

  9. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后,显示一级菜单。如果菜单中包含子菜单,菜单右侧会有指示箭头。点击菜单之后,会再显示下一级菜单,以此类推。当菜单下无子菜单时,选择菜单后会在文本框中显示。本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本......

  10. 如何用JS实现网页瀑布流布局

    前言:瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。什么是瀑布流布局:先看效果:图片多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直......

随机推荐

  1. Android事件分发机制三:事件分发工作流程

    前言 很高兴遇见你~ 本文是事件分发系列的第三篇。 在前两篇文章中,Android事件分发机制一:事件是如何到达activity的? 分析了事件分发的真正起点:viewRootImpl,Activity只是其中的一个环节;Android事件分发机制二:viewGroup与view对......

  2. Android如何判断页面是否全屏

    Android 想判断 Activity 是否是全屏,网上找了些方法,看到有直接获取 flags 和一个具体的值比较,并没有用,其实分析下来也觉得应该不对。大多都是如何设置全屏和取消全屏,并没有判断是否全屏的方法。其实全屏控制要么通过主题设置,要么代码 addFlags,最终都会到 Window 的......

  3. java MyBatis动态SQL标签的用法详解

    1.MyBatis动态SQLMyBatis 的强大特性之一便是它的动态 SQL,即拼接SQL字符串。如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦。拼接的时候要确保不能忘了必要的空格,还要注意省掉列名列表最后的逗号。利用动态 SQL 这一特性可以彻......

  4. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发。*/$("#inputid").change(function(){ console.log($(this).val());});/** * 只要文本类容发生改变,就会触发该事件 */$("#inp......

  5. Android开发之AppWidget详解

    Android通知系统是它的一大特色,而其中,AppWidget是其中一个亮点。在开发应用的中,很多时候可以为其添加一个AppWidget显示在桌面中,及时方便的与用户进行交互。这里就简单的熟悉一下开发一个AppWidget的流程吧。想要在应用中创建一个AppWidget,至少需要以下几样东西:需要......

  6. C语言的进制转换及算法实现教程

    1、其他进制转十进制1.1、二进制转十进制转换规程: 从最低位开始,将每个位上的数提取出来,乘以2的(位数-1)次方,然后求和,例如:二进制 1011 = 1*2^0 + 1*2^1 + 0*2^2 + 1*2^3 = 1 + 2 + 0 + 8 = 111.2、八制转十进制转换规则: 从最低位开始......

  7. 如何不使用 overflow: hidden 实现 overflow: hidden

    一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden?CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。控制 overflow: hi......

  8. 利用python+request通过接口实现人员通行记录上传功能

    前言:脚本中包含以下几点常用功能:(1)实时获取当前时间(2)while循环提交(3)上传图片文件一、上述功能解释:(1)实时获取当前时间,下面展示三种格式化后的日期代码示例#!/usr/bin/python# -*- coding: UTF-8 -*-import time# 格式化成2016-0......

  9. 利用python绘制正态分布曲线

    使用Python绘制正态分布曲线,借助matplotlib绘图工具;#-*-coding:utf-8-*-"""python绘制标准正态分布曲线"""# ===========================================......

  10. Java中,那些关于String和字符串常量池你不得不知道的东西

    老套的笔试题在一些老套的笔试题中,会要你判断s1==s2为false还是true,s1.equals(s2)为false还是true。String s1 = new String("xyz");String s2 = "xyz";System.out.prin......