一种Web页面窗口对象的通信方法及系统的制作方法
【专利摘要】本发明提供一种Web页面窗口对象的通信方法及系统，所述Web页面窗口对象的通信方法包括如下步骤：调用发送窗口对象的消息发送函数向目标窗口对象发送消息事件，其中，所述消息事件包括：待发送的数据以及以所述发送窗口对象为来源的来源属性；令所述目标窗口对象调用监听函数对所述消息事件进行监听，在根据所监听到的消息事件的来源属性判断其来源于所述发送窗口对象时，显示所监听到的消息事件中的数据。本发明可实现以一种简单便捷的方式实现跨域、跨Web页面的通信，用户体验较好。
【专利说明】-种Web页面窗口对象的通信方法及系统
【技术领域】
[0001] 本发明涉及一种通信【技术领域】，特别是涉及一种Web页面窗口对象的通信方法及 系统。
【背景技术】
[0002] 一个HTML页面可以有一个或多个Web子页面，Web子页面中可以嵌套Web子页 面，这些Web子页面可能属于不同的域，而不同域的Web子页面之间也有相互通信的需求。 例如在开发过程中我们经常需要父子页面实现跨域。通信从安全性的角度来说，任何来自 其他站点动态装载的内容，其安全性都是不可知的，所以对于浏览器来说，在要求动态内容 时，只应该读取同源的HTTP应答和Cookies，而不能读取不同源的内容。由于同源策略的 限制，JavaScript跨域的问题，一直是一个比较棘手的问题。目前存在多种克服同源策略 的限制的方案，但基本都是利用的代理页面，也就不可避免的要产生网络请求，对于这些开 销，在访问量超大的站点可能会对服务器产生相当大的压力。现有方法主要有两个方面的 问题，1、安全性。当一个站点被攻击后，另一个站点会引起安全漏洞，或者数据直接暴漏在 URL中。2、如果一个页面中引入一个iframe，想要能够操作所有iframe，必须设置相同的 domain，数据容量和类型有限。所以亟需设计一种可以简单便捷的实现跨域、跨Web页面的 通信方法。
【发明内容】
[0003] 鉴于以上所述现有技术的缺点，本发明的目的在于提供一种Web页面窗口对象的 通信方法及系统，用于解决现有技术中跨Web页面通信较为复杂且消耗资源较大的问题。
[0004] 为实现上述目的及其他相关目的，本发明提供一种Web页面窗口对象的通信方法 包括如下步骤：调用发送窗口对象的消息发送函数向目标窗口对象发送消息事件，其中，所 述消息事件包括：待发送的数据以及以所述发送窗口对象为来源的来源属性；所述目标窗 口对象调用监听函数对所述消息事件进行监听，在根据所监听到的消息事件的来源属性判 断其来源于所述发送窗口对象时，显示所监听到的消息事件中的数据。
[0005] 可选的，所述目标窗口对象在根据所监听到的消息事件的来源属性判断其来源于 所述发送窗口对象时，继续判断所述消息事件的来源是否可信任；当为是时，显示所述消息 事件中的数据；当为否时，显示错误信息。
[0006] 可选的，调用所述发送窗口对象的消息发送函数后，根据所述目标窗口对象的地 址向目标窗口对象发送消息事件。
[0007] 可选的，所述目标窗口对象的地址为URL格式。
[0008] 可选的，所述发送窗口对象可同时向多个所述目标窗口对象发送消息事件。
[0009] 可选的，所述消息发送函数为postMessage函数，所述监听函数为 addEventListener 函数。
[0010] 可选的，所述发送窗口对象处于第一 Web页面，所述目标窗口对象处于第二Web页 面。
[0011] 为实现上述目的及其他相关目的，本发明还提供一种Web页面窗口对象的通信系 统包括：发送模块，调用发送窗口对象的消息发送函数向目标窗口对象发送消息事件，其 中，所述消息事件包括：待发送的数据以及以所述发送窗口对象为来源的来源属性；监听 模块，令所述目标窗口对象调用监听函数对所述消息事件进行监听；判断显示模块，在根据 所述监听模块所监听到的消息事件的来源属性判断其来源于所述发送窗口对象时，显示所 监听到的消息事件中的数据。
[0012] 可选的，所述判断显示模块，在根据所述监听模块所监听到的消息事件的来源属 性判断其来源于所述发送窗口对象时，继续判断所述消息事件的来源属性是否为可信任； 当为是时，显示所述消息事件中的数据；当为否时，显示错误信息。
[0013] 可选的，所述发送模块，调用所述发送窗口对象的消息发送函数，并根据所述目标 窗口对象的地址向目标窗口对象发送消息事件；其中所述目标窗口对象的地址为URL格 式。
[0014] 如上所述，本发明的一种Web页面窗口对象的通信方法及系统，调用发送窗口对 象的消息发送函数向目标窗口对象发送消息事件，其中，所述消息事件包括：待发送的数据 以及以所述发送窗口对象为来源的来源属性；所述目标窗口对象调用监听函数对所述消 息事件进行监听，在根据所监听到的消息事件的来源属性判断其来源于所述发送窗口对象 时，显示所监听到的消息事件中的数据。本发明可实现以一种简单便捷的方式实现跨域、跨 Web页面的通信，用户体验较好。
【专利附图】
【附图说明】
[0015] 图1显示为本发明的一种Web页面窗口对象的通信方法的流程示意图。
[0016] 图2显示为应用本发明的一种Web页面窗口对象的通信方法的原理流程图。
[0017] 图3显示为应用本发明的一种Web页面窗口对象的通信方法的原理流程图。
[0018] 图4显示为本发明的一种Web页面窗口对象的通信系统模块示意图。
[0019] 元件标号说明
[0020] I Web页面窗口对象的通信系统
[0021] 11 发送模块
[0022] 12 监听模块
[0023] 13 判断显示模块
[0024] S11、S12 步骤
【具体实施方式】
[0025] 以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书 所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实 施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离 本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施 例中的特征可以相互组合。
[0026] 需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构 想，遂图示中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸 绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也 可能更为复杂。
[0027] 请参阅图1，显示为本发明的一种Web页面窗口对象的通信方法的流程示意图。
[0028] 所述方法包括如下步骤：
[0029] Sll :调用发送窗口（window)对象的消息发送函数向目标窗口对象发送消息事 件，例如调用所述发送窗口对象的消息发送函数后，根据所述目标窗口对象的地址向目标 窗口对象发送消息事件，其中，所述消息事件包括：待发送的数据以及以所述发送窗口对象 为来源的来源属性，所述目标窗口对象的地址为URL格式。例如所述发送窗口对象处于第 一 Web页面，所述目标窗口对象处于第二Web页面。所述第一 Web页面为所述第二Web页 面的父页面。优选的，所述发送窗口对象可同时向多个所述目标窗口对象发送消息事件。
[0030] S12 :所述目标窗口对象调用监听函数对所述消息事件进行监听，在根据所监听到 的消息事件的来源属性判断其来源于所述发送窗口对象时，显示所监听到的消息事件中的 数据。
[0031] 在另一具体实施例中，所述目标窗口对象在根据所监听到的消息事件的来源属性 判断其来源于所述发送窗口对象时，继续判断所述消息事件的来源是否可信任；当为是时， 显示所述消息事件中的数据；当为否时，显示错误信息。
[0032] 请参阅图2,显示为应用本发明的一种Web页面窗口对象的通信方法的原理流程 图，本实施例中，所述消息发送函数为postMessage函数，该函数将一个消息放入（寄送） 到与指定窗口创建的线程相联系消息队列里，不等待线程处理消息就返回，是异步消息 模式。在HTML5中新增了 postMessage方法，postMessage可以实现跨文档消息传输。所 述监听函数为addEventListener，其可侦听事件并对事件进行相应处理。首先，在第一 个WEB页面中执行脚本，定位定标window对象并调用postMessage函数，即图3中所示 的Window. postMessage ();接着，在第二个WEB页面中执行脚本，调用window(窗口）对 象的 addEventListener 函数，即图 3 所不的 window. addEventListener ()函数；当消息 (Message)事件发生时，检查MessageEvent对象的来源（origin)属性，将第一个页面的消 息传递给第二个页面。
[0033] 例如，所述 Window. postMessage ()为 window. postMessage ("I like apples〃，〃http://phicomm:81〃），其中，〃I like apples〃为即将要发送的消息文本， 〃http://phicomm:81〃即为接受消息的窗口的url地址。在第二个页面中的监听函数 addEventListenerO对事件消息进行监听，所述监听函数具体为：
[0034]
【权利要求】
1. 一种Web页面窗口对象的通信方法，其特征在于，包括如下步骤： 调用发送窗口对象的消息发送函数向目标窗口对象发送消息事件，其中，所述消息事 件包括：待发送的数据以及以所述发送窗口对象为来源的来源属性； 令所述目标窗口对象调用监听函数对所述消息事件进行监听，在根据所监听到的消息 事件的来源属性判断其来源于所述发送窗口对象时，显示所监听到的消息事件中的数据。
2. 根据权利要求1所述的Web页面窗口对象的通信方法，其特征在于：所述目标窗口 对象在根据所监听到的消息事件的来源属性判断其来源于所述发送窗口对象时，继续判断 所述消息事件的来源是否可信任；当为是时，显示所述消息事件中的数据；当为否时，显示 错误信息。
3. 根据权利要求1所述的Web页面窗口对象的通信方法，其特征在于：调用所述发送 窗口对象的消息发送函数后，根据所述目标窗口对象的地址向目标窗口对象发送消息事 件。
4. 根据权利要求3所述的Web页面窗口对象的通信方法，其特征在于：所述目标窗口 对象的地址为URL格式。
5. 根据权利要求1所述的Web页面窗口对象的通信方法，其特征在于：所述发送窗口 对象可同时向多个所述目标窗口对象发送消息事件。
6. 根据权利要求1所述的Web页面窗口对象的通信方法，其特征在于：所述消息发送 函数为postMessage函数，所述监听函数为addEventListener函数。
7. 根据权利要求1所述的Web页面窗口对象的通信方法，其特征在于：所述发送窗口 对象处于第一 Web页面，所述目标窗口对象处于第二Web页面。
8. -种Web页面窗口对象的通信系统，其特征在于：包括： 发送模块，调用发送窗口对象的消息发送函数向目标窗口对象发送消息事件，其中，所 述消息事件包括：待发送的数据以及以所述发送窗口对象为来源的来源属性； 监听模块，令所述目标窗口对象调用监听函数对所述消息事件进行监听； 判断显示模块，在根据所述监听模块所监听到的消息事件的来源属性判断其来源于所 述发送窗口对象时，显示所监听到的消息事件中的数据。
9. 根据权利要求8所述的Web页面窗口对象的通信系统，其特征在于： 所述判断显示模块，在根据所述监听模块所监听到的消息事件的来源属性判断其来源 于所述发送窗口对象时，继续判断所述消息事件的来源属性是否为可信任；当为是时，显示 所述消息事件中的数据；当为否时，显示错误信息。
10. 根据权利要求8所述的Web页面窗口对象的通信系统，其特征在于： 所述发送模块，调用所述发送窗口对象的消息发送函数，并根据所述目标窗口对象的 地址向目标窗口对象发送消息事件； 其中所述目标窗口对象的地址为URL格式。
【文档编号】H04L29/08GK104410722SQ201410814706
【公开日】2015年3月11日 申请日期:2014年12月19日 优先权日:2014年12月19日
【发明者】尚薇薇 申请人:上海斐讯数据通信技术有限公司