观察者设计模式又称订阅发布模式，在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. jvm——metaspace代替永久代

    https://mp.weixin.qq.com/s?__biz=MzIzNjI1ODc2OA==&mid=2650886860&idx=1&sn=f8bc6ab03d7a07 ...

  2. 019：re_path函数详解

    re_path使用: 1.re_path和path的作用是一样的,只不过re_path在写url的时候可以使用正则表达式——功能更加强大: 2.使用正则表达式时,推荐使用原生字符串(即:已 r 开头的 ...

  3. vsftp配置文件

    直接使用,本地用户可以使用账号密码登录 # Example config file /etc/vsftpd/vsftpd.conf # # The default compiled in settin ...

  4. BZOJ 4517: [Sdoi2016]排列计数 错排 + 组合

    从 $n$ 个数中选 $m$ 个不错排,那就是说 $n-m$ 个数是错排的. 用组合数乘一下就好了. Code: #include <cstdio> #include <algori ...

  5. Codeforces Round #287 (Div. 2) E. Breaking Good 路径记录！！！+最短路+堆优化

    E. Breaking Good time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  6. 【Leetcode】爬楼梯

    问题: 爬n阶楼梯,每次只能走1阶或者2阶,计算有多少种走法. 暴力计算+记忆化递归. 从位置 i 出发,每次走1阶或者2阶台阶,记录从位置 i 出发到目标 n 所有的走法数量,memoA[i] .记 ...

  7. 超实用的PHP代码片段！

    摘要:本文分享了九个超级有用的PHP代码片段,当你在开发网站.应用或者博客时,利用这些代码能为你节省大量的时间.你可以直接拿来用! 此前,研发频道曾发布<直接拿来用,10个PHP代码片段> ...

  8. IoC有什么好处

    IoC(Inversion of Control):控制反转. DI(Dependency Injection):依赖注入. 控制反转是目的,依赖注入是实现控制反转的手段. 控制反转是一种面向对象的思 ...

  9. Python 基础知识总结

    strptime() 根据指定的格式将一个时间字符串解析为一个时间元组. time.strptime(time_str[,format]) 返回strcut_time对象 #time_str 是时间字 ...

  10. sklearn—支持向量机

    SVC介绍: 拟合出来的模型为一个超平面 解决与样本维数无关,适合做文本分类 解决小样本.非线性.高维 是用于分类.回归.孤立点检测的监督学习方法的集合. 优点: 有效的高维空间 维数大于样本数的时候 ...