观察者设计模式又称订阅发布模式，在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. MongoDB学习笔记 1.1

    //1.安装MongoDB数据库 cd D:\Software\MongoDB\data\bin mongod --dbpath "D:\Software\MongoDB\data\db&q ...

  2. MySQL自动生成序号列

    select (@i:=@i+1) i,a.CITYID from basis_cityinfo a ,(select @i:=0) t2 order by a.id desc limit 220;

  3. Quartz.NET常用方法 01

    Quartz.NET作为一款定时框架,它的最小可运行程序如下: var scheduler = StdSchedulerFactory.GetDefaultScheduler(); scheduler ...

  4. Git的使用及安装

    1安装. 步骤一 如果是32位就安装32位,64位就安装64,任选一款. 步骤二 步骤三 步骤四 步骤五 步骤六 步骤七 步骤八 步骤九 步骤十 步骤十一 上面的安装完成以后,下面的程序包按要求安装就 ...

  5. DevExpress.XtraGrid.Views.Grid.GridView

    private void SetView() { GridView gridView = (GridView)this.DefaultView; if (gridView != null) { gri ...

  6. UVa 1600 Patrol Robot (BFS最短路 && 略不一样的vis标记)

    题意 : 机器人要从一个m * n 网格的左上角(1,1) 走到右下角(m, n).网格中的一些格子是空地(用0表示),其他格子是障碍(用1表示).机器人每次可以往4个方向走一格,但不能连续地穿越k( ...

  7. [NOIP2012] 同余方程(第三次考试大整理)

    1265. [NOIP2012] 同余方程 输入文件:mod.in   输出文件:mod.out   简单对比 时间限制:1 s   内存限制:128 MB [题目描述] 求关于 x 的同余方程 ax ...

  8. 织梦DedeCms技术资料

    Dedecms调用文章发布时间的方法 11-20 样式 ([field:pubdate function='strftime("%m-%d",@me)'/]) May 15, 20 ...

  9. druid监控每个服务数据库连接数和SQL执行效率

    1.下载druid 2.将刚刚下载的druid放入tomcat下的lib目录 3.配置要监控的服务启动文件,添加: -Dcom.sun.management.jmxremote.port=4090 - ...

  10. 洛谷P4095新背包问题

    传送 这道题最最暴力的方法就是对于每一个询问都跑一边多重背包问题,但显然q不会那么友好的让我们用暴力过掉这道题. 考虑优化.我们可以先把裸的多重背包搞成二进制优化后的多重背包.但是复杂度依然无法接受. ...