观察者设计模式又称订阅发布模式,在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>
四、效果