请选择 进入手机版 | 继续访问电脑版
切换风格

Sunset glow Snow NewYear London Flowers Wizard California Cloud Sky Lavender City Black Beige Dragon

1万

主题

1万

帖子

4万

积分

管理员

Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

吾爱币
27494
在线时间
370 小时
注册时间
2019-8-16

论坛新星

JS观察者设计模式:实现iframe之间快捷通信[复制链接]
发表于 2020-9-29 09:45:00 | 显示全部楼层 |阅读模式
标签:upd div2 date images html cas 命令参数 之间 ast
观察者设计模式又称订阅发布模式,在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
                Document        broadcast       
       

  2、radioStation2.html
                Document        我是一个iframe       
       

  四、效果
20180111002953688339.png

JS观察者设计模式:实现iframe之间快捷通信
标签:upd div2 date images html cas 命令参数 之间 ast
原文地址:http://www.cnblogs.com/iwideal/p/7587225.html




上一篇:ASP.NET CORE配置用户密码验证
下一篇:【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系 ...
回复

使用道具 举报

33

主题

2534

帖子

5104

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2570
在线时间
0 小时
注册时间
2020-6-28

论坛新星

发表于 2020-9-30 00:34:00 | 显示全部楼层
楼主呀,,,您太有才了。。。
回复

使用道具 举报

49

主题

2529

帖子

5107

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2578
在线时间
0 小时
注册时间
2020-7-7
发表于 2020-10-3 15:06:25 | 显示全部楼层
楼下的接上
回复

使用道具 举报

206

主题

2669

帖子

5544

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2875
在线时间
0 小时
注册时间
2020-6-28

论坛新星

发表于 2020-10-5 12:26:16 | 显示全部楼层
向楼主学习
回复

使用道具 举报

243

主题

2661

帖子

5565

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2904
在线时间
0 小时
注册时间
2020-6-28

论坛新星

发表于 2020-10-5 14:57:19 | 显示全部楼层
确实不错,顶先
回复

使用道具 举报

219

主题

2714

帖子

5650

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2936
在线时间
0 小时
注册时间
2020-6-28

论坛新星

发表于 2020-10-5 15:01:46 | 显示全部楼层
围观 围观 沙发在哪里!!!
回复

使用道具 举报

53

主题

2515

帖子

5086

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2571
在线时间
0 小时
注册时间
2020-7-7
发表于 2020-10-5 15:05:52 | 显示全部楼层
LZ帖子不给力,勉强给回复下吧
回复

使用道具 举报

239

主题

2744

帖子

5727

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2983
在线时间
0 小时
注册时间
2020-6-28

论坛新星

发表于 2020-10-5 15:31:30 | 显示全部楼层
这么强,支持楼主,佩服
回复

使用道具 举报

0

主题

2363

帖子

4726

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2363
在线时间
0 小时
注册时间
2020-7-7
发表于 2020-10-5 15:34:47 | 显示全部楼层
垃圾内容,路过为证。
回复

使用道具 举报

242

主题

2629

帖子

5503

积分

金牌会员

Rank: 6Rank: 6

吾爱币
2874
在线时间
0 小时
注册时间
2020-6-28

论坛新星

发表于 2020-10-5 15:43:14 | 显示全部楼层
前排支持下了哦~
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|吾爱分享-享你所想 ( 黔ICP备18007665号-2 )|网站地图

GMT+8, 2020-12-2 12:04 , Processed in 2.480828 second(s), 76 queries .

Powered by 52Fenxiang.Top

© 2001-2020 Comsenz Inc.

返回顶部