观察者设计模式又称订阅发布模式，在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——class类文件的结构

    class类文件并不一定以磁盘的形式存在,也可以是由类加载器直接生成的二进制流,他其实是一种数据结构,类似于c语言结构体,这种数据结构只有两种数据类型:无符号数和表. 1.魔数:类似于文件拓展名,CA ...

  2. 树莓派VI命令大全（附vim使用异常，卸载重新安装步骤）

    vi有3个模式:插入模式.命令模式.低行模式. 插入模式:在此模式下可以输入字符,按ESC将回到命令模式. 命令模式:可以移动光标.删除字符等. 低行模式:可以保存文件.退出vi.设置vi.查找等功能 ...

  3. Lambda表达式匿名类实现接口方法

    Lamb表达式匿名类实现接口方法 import java.util.ArrayList; public class HandlerDemo{ public static void main(Strin ...

  4. js-计算textarea可剩余的字数？？？

    效果图 HTML: JS:

  5. wed.xml 中 filter、servlet 配置格式

    1.wed.xml 中 filter 配置格式 <filter> <filter-name>filterName</filter-name> <filter- ...

  6. 带 like 的字符串匹配查询

    1.百分号通配符  '%'  ,匹配任意长度的字符,甚至包括零字符 例:查询所有以  'a'  字母开头的水果,sql 语句如下 select f_id,f_name from fruits wher ...

  7. [CF118D]Caesar's Legions 题解

    题意简述 一个01序列由\(n_1\)个0和\(n_2\)个1组成,求最长连续0串长度不超过\(k_1\),最长连续1串长度不超过\(k_2\)的序列的方案总数 题解 状态 方案总数 变量 已经取了i ...

  8. Zookeeper简介及安装(一)

    1 Zookeeper入门1.1 概述Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. 1.2 特点 1.3 数据结构 1.4 应用场景提供的服务包括:统一命名服务 ...

  9. 【UOJ #210】【UER #6】寻找罪犯

    题目描述 通过一些不可描述的方式,妹滋滋算出了 51% 的得票率,于是就她就把这个公开给了广大用户 —— UOJ 解散已成定局. 几个小时后,UOJ 创始人伏特跳蚤国王宣布辞职,即日起退出 UOJ 团 ...

  10. [LeetCode]-DataBase-Employees Earning More Than Their Managers

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...