JS观察者设计模式：实现iframe之间快捷通信
Posted iwideal
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS观察者设计模式：实现iframe之间快捷通信相关的知识，希望对你有一定的参考价值。
观察者设计模式又称订阅发布模式，在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之间快捷通信的主要内容，如果未能解决你的问题，请参考以下文章