【JS观察者设计模式：实现iframe之间快捷通信】的更多相关文章

JS观察者设计模式：实现iframe之间快捷通信

观察者设计模式又称订阅发布模式,在JS中我们习惯叫做广播模式,当多个对象监听一个通道时,只要发布者向该通道发布命令,订阅者都可以收到该命令,然后执行响应的逻辑.今天我们要实现的就是通过观察者设计模式,实现iframe之间的通信. 一.top对象 一般的JS书里都会在讲框架集的时候讲top,这会让人误解,认为top对象只是代表框架集,其实top的含义应该是说浏览器直接包含的那一个页面对象,也就是说如果你有一个页面被其他页面以iframe的方式包含了,无论包含的层级是什么,都可以用top访问最外层的…

父页面和iframe之间的通信（操作和传值问题）

一.jq实现iframe父页面与子页面传值与方法调用 1.值操作 (1)父页面获取子页面的值 $('iframe的id').contents().find(子页面的id).text(); (2)子页面获取父页面的值 $("父页面id",window.parent.document).html(); 2.方法操作 (1)父页面调用子页面的方法 document.getElementById('iframe的id').contentWindow.子页面的方法; (2)子页面调用父页面的方法…

《Head First设计模式》批注系列（一）——观察者设计模式

最近在读<Head First设计模式>一书,此系列会引用源书内容,但文章内容会更加直接,以及加入一些自己的理解. 观察者模式(有时又被称为模型-视图(View)模式.源-收听者(Listener)模式或从属者模式).在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼叫各观察者所提供的方法来实现.此种模式通常被用来实现事件处理系统. 引子 我们的公司刚刚你拿下了一个中国气象局的一个招标,负责建立北京市的气象观测站.该气象站必须建立在中国气…

window之间、iframe之间的JS通信

一.Window之间JS通信 在开发项目过程中,由于要引入第三方在线编辑器,所以需要另外一个窗口(window),而且要求打开的window要与原来的窗口进行js通信,那么如何实现呢? 1.在原窗口创建新打开window的一个对象: var new_window; var url = 'http:://second.com'; new_window = window.open(url, 'new_window'); 新窗口里有一个say()方法: function say() { alert('…

iframe之间通信问题及iframe自适应高度问题

下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA"&g…

js组件之间的通信

应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安静的停留在页面的角落里,不声不响.你在页面上买了零食买了书,购物车还是安静的呆着,猛然间点开一看,安静的购物车已经躺满了. 以上两种,在模块化满天飞的今天,当然不可能面向过程的一一开发,你不能在微博列表,微博推荐和评论中逐一把用户名片功能开发一遍.实际上,常见 的做法是将usercard作为一个组件…

Vue.js组件之同级之间的通信

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>componentKnowledge-同级组件通信</title> <script src="js/vue.js"></script> </head> <body> <template…

javascript 中contentWindow和 frames和iframe之间通信

iframe父子兄弟之间通过jquery传值(contentWindow && parent),iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主要知识点 1:document.getElementById("ii").contentWindow 得到iframe对象后,就可以通过contentWindow得到iframe包含页面的…

JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数

//页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }); //每500毫秒运行一次 window.setInterval("getH()", 500); //获取页面的高度,并传给父页面的元素 function getSubPageH() { var parentWorkDiv = $("#workDiv", parent…

Cocos中的观察者设计模式与通知机制

观察者(Observer)模式也叫发布/订阅(Publish/Subscribe)模式,是 MVC( 模型-视图-控制器)模式的重要组成部分.天气一直是英国人喜欢讨论的话题,而最近几年天气的变化也成为中国人非常关注的话题.我会根据天气预报决定是坐地铁还是开车上班,我的女儿也会根据天气预报决定明天穿哪件衣服.于是我在移动公司为我的手机定制了天气预报短信通知服务,它的工作模型如图所示. 每天气象局将天气预报信息投送给移动运营商,移动运营商的短信中心负责把天气预报发送给定制过这项服务的手机.在软件系统…