CN103095762A

CN103095762A - Web页面跨域通信方法和装置

Info

Publication number: CN103095762A
Application number: CN2011103423269A
Authority: CN
Inventors: 黄奎; 李临; 郭学亨; 龙丁奋
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2011-11-02
Filing date: 2011-11-02
Publication date: 2013-05-08
Anticipated expiration: 2031-11-02
Also published as: CN103095762B

Abstract

一种Web页面跨域通信方法，包括以下步骤：添加能被不同域的Web页面访问的API对象，所述对象实现了消息通知方法以及所述方法的监听事件；绑定第一Web页面的回调函数与所述监听事件；在第二Web页面向所述第一Web页面发送消息时，调用所述消息通知方法；触发所述监听事件，将所述消息传递给所述第一Web页面的回调函数；所述第一Web页面与所述第二Web页面属于不同的域。上述Web页面跨域通信方法实现了不同域的Web页面之间的跨域通信，且成本较低。此外，还提供一种Web页面跨域通信装置。

Description

Web页面跨域通信方法和装置

【技术领域】

本发明涉及网络技术，特别涉及一种Web页面跨域通信方法和装置。

【背景技术】

API(Application Programming Interface，应用程序编程接口)是一些预先定义的函数，目的是提供应用程序(或开发人员)基于某软件(或硬件)的访问一组例程的能力，而又无需访问软件的源码，或理解软件的内部工作机制的细节。Windows API是一套用来控制Windows的各个部件的外观和行为的预先定义的Windows函数。用户的每个动作都会引发一个或几个函数的运行以告诉Windows发生了什么。

一个HTML页面可以有一个或多个Web子页面(子框架)，Web子页面中可以嵌套Web子页面，这些Web子页面可能属于不同的域，而不同域的Web子页面之间也有相互通信的需求。但是IE8版本以前的浏览器出于安全的考虑，不能自动支持不同域的Web页面之间的跨域通信，而IE8版本以前的浏览器又占有很大的市场份额。因此，需要解决IE8版本以前的浏览器中不同域的Web页面之间的跨域通信的问题。

传统的方法是设置一台中转服务器，需要跨域通信的两个Web页面通过中转服务器通信。还有一种方法是采用部署代理文件的方式，例如，在域名为A的Web页面中部署域名为B的Web页面的代理文件，并在域名为B的Web页面中部署域名为A的Web页面的代理文件，两个Web页面通过代理文件实现跨域通信。

但是，上述设置中转服务器的方法会带来额外的开销，增加了成本，而采用部署代理文件的方法，则也需要较高的部署成本。

【发明内容】

基于此，有必要提供一种能减少成本的Web页面跨域通信方法。

一种Web页面跨域通信方法，包括以下步骤：

添加能被不同域的Web页面访问的API对象，所述对象实现了消息通知方法以及所述方法的监听事件；

绑定第一Web页面的回调函数与所述监听事件；

在第二Web页面向所述第一Web页面发送消息时，调用所述消息通知方法；

触发所述监听事件，将所述消息传递给所述第一Web页面的回调函数；

其中，所述第一Web页面与所述第二Web页面属于不同的域。

此外，还有必要提供一种能减少成本的Web页面跨域通信装置。

一种Web页面跨域通信装置，包括：

初始化模块，用于添加能被不同域的Web页面访问的API对象，所述对象实现了消息通知方法以及所述方法的监听事件，以及绑定第一Web页面的回调函数与所述监听事件；

消息通知模块，用于在第二Web页面向所述第一Web页面发送消息时，调用所述消息通知方法；

回传模块，用于触发所述监听事件，将所述消息传递给所述第一Web页面的回调函数；

其中，所述第一Web页面与所述第二Web页面属于不同的域。

上述Web页面跨域通信方法及装置，通过添加能被不同域的Web页面访问的、且实现了消息通知方法以及该方法的监听事件的API对象，不同域的Web页面都可调用此API对象的消息通知方法发送消息，还可以绑定其回调函数与消息通知方法的监听事件，以响应向该Web页面传送的消息，实现了不同域的Web页面之间的跨域通信。由于不需要设置中转服务器或者部署代理文件来进行跨域通信，因此上述Web页面跨域通信方法和装置能减少成本。

【附图说明】

图1为一个实施例中的Web页面跨域通信方法的流程示意图；

图2为一个实施例中第一Web页面与第二Web页面通信的示意图；

图3为一个实施例中的Web页面跨域通信装置的结构示意图。

【具体实施方式】

如图1所示，在一个实施例中，一种Web页面跨域通信方法，包括以下步骤：

步骤S10，添加能被不同域的Web页面访问的API对象，该对象实现了消息通知方法以及该方法的监听事件。

具体的，在一个实施例中，该API对象为窗口对象的全局成员对象。由于Web页面都继承自它们的基类，即窗口对象(window对象)，属于不同域的Web页面都可访问窗口对象的全局成员对象(即external成员)，因此API对象可以为窗口对象的全局成员对象，以能够被不同域的Web页面访问。该API对象为窗口对象的全局成员对象，则不同域的Web页面都可调用该API对象的消息通知方法来传送消息。

进一步的，为了响应消息通知方法传送的消息，该API对象还实现消息通知方法的监听事件。当消息通知方法被调用时，即可触发监听事件。

在一个实施例中，API对象可封装在浏览器插件或浏览器扩展组件中、或者内置于浏览器中。

具体的，对于基于组件对象模型(component object model，COM)的浏览器，如IE浏览器，可将该API对象封装在浏览器的扩展组件中，因为IE浏览器内核有一种扩展机制，提供了专门的接口(扩展组件)来实现窗口对象(window对象)的全局成员对象(extemal成员)。另外，对于可安装浏览器插件的浏览器，API对象也可封装在浏览器插件中，并通过安装浏览器插件来添加API对象；其次，对于可自定义的浏览器，可直接将API对象添加到浏览器的代码中。

步骤S20，绑定第一Web页面的回调函数与上述监听事件。

具体的，可在第一Web页面加载时或在加载完成后注册API对象的消息通知方法的监听事件，即绑定页面的回调函数与该监听事件。触发该监听事件即是触发回调函数，因此当消息通知方法被调用时，即可触发回调函数以响应消息通知方法通知的消息。

步骤S30，在第二Web页面向第一Web页面发送消息时，调用API对象的消息通知方法，其中，第一Web页面和第二Web页面属于不同的域。

由于添加的该API对象可被不同域的Web页面访问，因此在第二Web页面向第一Web页面发送消息时，可将第二Web页面要发送的消息传递给消息通知方法，并调用该消息通知方法。

在一个实施例中，调用API对象的消息通知方法的步骤为：将第一Web页面的属性信息及第二Web页面的消息传递给该消息通知方法，调用该消息通知方法。具体的，第一Web页面的属性信息可包括第一Web页面的名称、所属域名等。将第一Web页面的属性信息传递给消息通知方法，这样便能根据第一Web页面的属性信息将消息正确地传送到第一Web页面。

步骤S40，触发上述监听事件，将第二Web页面的消息传递给第一Web页面的回调函数。

在一个实施例中，在将第二Web页面的消息传递给第一Web页面的回调函数之前，还包括：根据传递给API对象的消息通知方法的第一Web页面的属性信息查找第一Web页面的回调函数。

具体的，API对象的监听事件可能与多个页面的回调函数绑定，所以在监听事件被触发后，需要判断把消息传送给哪个页面的回调函数。可根据在上述传递给API对象的消息通知方法的第一Web页面的属性信息来查找第一Web页面的回调函数。进一步的，将第二Web页面的消息传递给第一Web页面的回调函数。第一Web页面的回调函数可以对第二Web页面的消息作相应的处理。

在一个实施例中，如图2所示，第一Web页面与第二Web页面属于不同的域。具体的，第一Web页面和第二Web页面可以包含于一个HTML页面中，例如，是HTML页面中的两个Frame(也称IFrame，HTML页面中的frame标签定义了一个框架)。本实施例中，第二Web页面嵌套在第一Web页面中。应当说明的是，第一Web页面与第二Web页面也可以是并列关系。

本实施例中，extemal成员为添加的能被不同域的Web页面访问的API对象，第一Web页面和第二Web页面之间进行跨域通信的过程如下：

(1)绑定第一Web页面的回调函数与external成员的监听事件。

(2)在第二Web页面向第一Web页面发送消息时，将消息传递给external成员的消息通知方法，并调用该消息通知方法。

(3)触发extemal成员的监听事件，将消息传递给第一Web页面的回调函数。第一Web页面的回调函数可以对该消息作相应的处理，完成第一Web页面和第二Web页面之间的通信。

如图3所示，在一个实施例中，一种Web页面跨域通信装置，包括初始化模块10、消息通知模块20和回传模块30，其中：

初始化模块10用于添加能被不同域的Web页面访问的API对象，该对象实现了消息通知方法以及该方法的监听事件。

初始化模块10还用于绑定第一Web页面的回调函数与上述监听事件。

具体的，初始化模块10可在第一Web页面加载时或在加载完成后注册API对象的消息通知方法的监听事件，即绑定页面的回调函数与该监听事件。触发该监听事件即是触发回调函数，因此当消息通知方法被调用时，即可触发回调函数以响应消息通知方法通知的消息。

消息通知模块20用于在第二Web页面向第一Web页面发送消息时，调用API对象的消息通知方法，其中，第一Web页面和第二Web页面属于不同的域。

由于添加的该API对象可被不同域的Web页面访问，因此在第二Web页面向第一Web页面发送消息时，消息通知模块20可用于将第二Web页面的消息传递给消息通知方法，并调用该消息通知方法。

在一个实施例中，在第二Web页面向第一Web页面发送消息时，消息通知模块20用于将第一Web页面的属性信息及第二Web页面的消息传递给该消息通知方法，调用该消息通知方法。具体的，第一Web页面的属性信息可包括第一Web页面的名称、所属域名等。将第一Web页面的属性信息传递给消息通知方法，这样便能根据第一Web页面的属性信息将消息正确地传送到第一Web页面。

回传模块30用于触发上述监听事件，将第二Web页面的消息传递给第一Web页面的回调函数。

在一个实施例中，在将第二Web页面的消息传递给第一Web页面的回调函数之前，回传模块30根据传递给API对象的消息通知方法的第一Web页面的属性信息查找第一Web页面的回调函数。

具体的，API对象的监听事件可能与多个页面的回调函数绑定，所以在监听事件被触发后，回传模块30需要判断把消息传送给哪个页面的回调函数。可根据在上述传递给API对象的消息通知方法的第一Web页面的属性信息来查找第一Web页面的回调函数。进一步的，回传模块30用于将第二Web页面的消息传递给第一Web页面的回调函数。第一Web页面的回调函数可以对第二Web页面的消息作相应的处理。

上述Web页面跨域通信方法和装置，通过添加能被不同域的Web页面访问的、且实现了消息通知方法以及该方法的监听事件的API对象，不同域的Web页面都可调用此API对象的消息通知方法发送消息，还可以绑定其回调函数与消息通知方法的监听事件，以响应向该Web页面传送的消息，实现了不同域的Web页面之间的跨域通信，上述方式操作简便，不需要设置中转服务器或者部署代理文件来进行跨域通信，从而节约了成本。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims

1.一种Web页面跨域通信方法，包括以下步骤：

绑定第一Web页面的回调函数与所述监听事件；

其中，所述第一Web页面与所述第二Web页面属于不同的域。

2.根据权利要求1所述的Web页面跨域通信方法，其特征在于，所述API对象封装在浏览器插件或浏览器扩展组件中、或者内置于浏览器中。

3.根据权利要求1所述的Web页面跨域通信方法，其特征在于，所述调用所述消息通知方法的步骤为：将所述第一Web页面的属性信息及所述消息传递给所述消息通知方法，调用所述方法。

4.根据权利要求3所述的Web页面跨域通信方法，其特征在于，在所述将消息传递给所述第一Web页面的回调函数的步骤之前，还包括：

根据所述传递给消息通知方法的第一Web页面的属性信息查找所述第一Web页面的回调函数。

5.根据权利要求1至4任意一项所述的Web页面跨域通信方法，其特征在于，所述API对象为窗口对象的全局成员对象。

6.一种Web页面跨域通信装置，其特征在于，包括：

其中，所述第一Web页面与所述第二Web页面属于不同的域。

7.根据权利要求6所述的Web页面跨域通信装置，其特征在于，所述API对象封装在浏览器插件或浏览器扩展组件中、或者内置于浏览器中。

8.根据权利要求6所述的Web页面跨域通信装置，其特征在于，所述消息通知模块还用于将所述第一Web页面的属性信息及所述消息传递给所述消息通知方法，调用所述方法。

9.根据权利要求8所述的Web页面跨域通信装置，其特征在于，所述回传模块还用于触发所述监听事件，根据所述传递给消息通知方法的第一Web页面的属性信息查找所述第一Web页面的回调函数，将所述消息传递给所述第一Web页面的回调函数。

10.根据权利要求6至9任意一项所述的Web页面跨域通信装置，其特征在于，所述API对象为窗口对象的全局成员对象。