观察者设计模式又称订阅发布模式，在JS中我们习惯叫做广播模式，当多个对象监听一个通道时，只要发布者向该通道发布命令，订阅者都可以收到该命令，然后执行响应的逻辑。今天我们要实现的就是通过观察者设计模式，实现iframe之间的通信。

一、top对象

一般的JS书里都会在讲框架集的时候讲top，这会让人误解，认为top对象只是代表框架集，其实top的含义应该是说浏览器直接包含的那一个页面对象，也就是说如果你有一个页面被其他页面以iframe的方式包含了，无论包含的层级是什么，都可以用top访问最外层的哪一个页面，因为这个页面被浏览器直接包含，这个事情的意义在于如果多个页面被同时加载，他们之间需要通信，就完全可以在最外层的页面设置一个通信对象，其他页面都通过这个对象进行通信（需要说明的是,如果要这么干，需要将他们部署在服务器上进行测试，仅仅在文件系统上测试，可能因为跨域而测试失败)。

二、搭建广播站

(function(top,undefined){

	var observerAble={};

	var radioStation={};

	radioStation.subscription=function(channel,obj){

			if(!observerAble[channel]){

				var array=new Array();

				array.push(obj);

				observerAble[channel]=array;

			}else{

				observerAble[channel].push(obj);

			}

		};

	radioStation.broadcast=function(channel,data){

			for(var item in observerAble[channel]){

				observerAble[channel][item].update(data);

			}

		};

	top.radioStation=radioStation;

}(top))

　　我们将广播站放到top对象中，后面的所有iframe都可以从top中获得该对象。我们只要建立通道，一旦广播站对该通道发布命令，我们就可以从update方法中获取命令参数。

三、测试

1、radioStation.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="jquery-3.2.1.js"></script>

	<!-- 引入广播站，创建广播站对象-->

	<script type="text/javascript" src="RadioStation.js"></script>

</head>

<body>

	<button id="broadcast">broadcast</button>

	<iframe src="radioStation2.html" frameborder="0"></iframe>

	<div id="topdiv1"></div>

	<div id="topdiv2"></div>

	<script>

		function sayHello(){

			this.update=function(data){

				$("#topdiv1").text(data);

			}

		}

		function sayGoodBye(){

			this.update=function(data){

				$("#topdiv2").text(data);

			}

		}

		var sayhello=new sayHello();

		var saygoodbye=new sayGoodBye();

		//订阅

		radioStation.subscription("hello",sayhello);

		radioStation.subscription("hello",saygoodbye);

		//广播

		$("#broadcast").click(function(){

			radioStation.broadcast("hello",'hello radioStation');

		});

	</script>

</body>

</html>

　　2、radioStation2.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="jquery-3.2.1.js"></script>

</head>

<body>

	我是一个iframe

	<div id="iframediv1"></div>

	<div id="iframediv2"></div>

	<script>

		function sayHello(){

			this.update=function(data){

				$("#iframediv1").text(data);

			}

		}

		function sayGoodBye(){

			this.update=function(data){

				$("#iframediv2").text(data);

			}

		}

		var sayhello=new sayHello();

		var saygoodbye=new sayGoodBye();

		//订阅,从最外层的窗口对象top中获取radioStation对象

		top.radioStation.subscription("hello",sayhello);

		top.radioStation.subscription("hello",saygoodbye);

	</script>

</body>

</html>

　　四、效果

JS观察者设计模式：实现iframe之间快捷通信的更多相关文章

  1. 父页面和iframe之间的通信（操作和传值问题）

    一.jq实现iframe父页面与子页面传值与方法调用 1.值操作 (1)父页面获取子页面的值 $('iframe的id').contents().find(子页面的id).text(); (2)子页面 ...

  2. 《Head First设计模式》批注系列（一）——观察者设计模式

    最近在读<Head First设计模式>一书,此系列会引用源书内容,但文章内容会更加直接,以及加入一些自己的理解. 观察者模式(有时又被称为模型-视图(View)模式.源-收听者(List ...

  3. window之间、iframe之间的JS通信

    一.Window之间JS通信 在开发项目过程中,由于要引入第三方在线编辑器,所以需要另外一个窗口(window),而且要求打开的window要与原来的窗口进行js通信,那么如何实现呢? 1.在原窗口创 ...

  4. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  5. js组件之间的通信

    应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...

  6. Vue.js组件之同级之间的通信

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

  7. javascript 中contentWindow和 frames和iframe之间通信

    iframe父子兄弟之间通过jquery传值(contentWindow && parent),iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) ...

  8. JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数

    //页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...

  9. Cocos中的观察者设计模式与通知机制

    观察者(Observer)模式也叫发布/订阅(Publish/Subscribe)模式,是 MVC( 模型-视图-控制器)模式的重要组成部分.天气一直是英国人喜欢讨论的话题,而最近几年天气的变化也成为 ...

随机推荐

  1. eclipse中没有server选项无法配置Tomcat

    eclipse集成Tomcat: 打开eclipse - 窗口 - 首选项 - 服务器 - 运行时环境 找到Tomcat然后添加. eclipse添加插件: 开发WEB项目时要集成Tomcat可以并不 ...

  2. ssh复制公钥成功后仍需输入密码

    1,网上说权限问题 登录流程: 被登录机器的文件权限: //用户权限 chmod 700 /home/username //.ssh文件夹权限 chmod 700 ~/.ssh/ // ~/.ssh/ ...

  3. 配置文件：mainfest.xml

    AndroidManifest.xml 是每个android程序中必须的文件.   它位于整个项目的根目录,描述了package中暴露的组件(activities,services, 等等),他们各自 ...

  4. 手写ORM

    利用ORM把mysql中的数据封装成对象,通过对象点语法来获取mysql中的数据,所以自己手写一个ORM,方便我们操作数据 一.ORM:对象关系映射 类 >>> 数据库的一张表 对象 ...

  5. 将DVD.iso 挂载到虚拟机

    将DVD.iso挂载到虚机之后,默认设备名是/dev/sr0 挂载DVD.iso文件到/mnt. 操作: mount /dev/sr0 /mnt 查看: ll /mnt

  6. Eating Plan

    Eating Plan 2019南昌G 模数为合数,所以只有约3000个数字不为0 记录一下不为0的数字位置 H[x]代表距离为x的连续段的数字和的最大值 处理出H[x] 再H[x] = max(H[ ...

  7. 时间戳Unix和时间之间的转换

    时间戳  --->  时间 var a="1523258178"; var start = new Date(a).format("yyyy-MM-dd hh:mm ...

  8. [UPC10525]:Dove打扑克（暴力+模拟）

    题目描述 $Dove$和$Cicada$是好朋友,他们经常在一起打扑克来消遣时光,但是他们打的扑克有不同的玩法. 最开始时,牌桌上会有$n$个牌堆,每个牌堆有且仅有一张牌,第$i$个牌堆里里里那个扑克 ...

  9. 一个时序图描述从用户在浏览器地址栏输入url并按回车，到浏览器显示相关内容的各个过程

    其实考察的就是一次HTTP请求所经过的过程和Spring或者SpringMVC怎么调用dispatcherServlet的过程

  10. Js自定义数组map之bigmap

    /** * like map,but prev,curr,next and index will be given * @param {Function} cb Callback,the parame ...