CN108762946A - 一种跨域web端通信方法及终端 - Google Patents

Abstract

本发明公开了一种跨域web端通信方法及终端，在web端上的每个iframe内创建一个消息管理器的类库，消息管理器接收当前iframe发送的待处理消息，获取待处理消息的消息状态，根据消息状态和消息管理器所在的节点信息来控制当前iframe与其它iframe的通信；本发明通过消息管理器获取并判断待处理消息的消息状态和消息管理器所在的节点信息，从而对待处理消息进行统一操作和管理，实现跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性。

Description

一种跨域web端通信方法及终端

技术领域

本发明涉及跨域通信技术领域，尤其涉及一种跨域web端通信方法及终端。

背景技术

在多个iframe嵌套的web和HTML5项目中，由于各个iframe组件的域名不同，嵌套层级位置不同，导致iframe之间的信息通信变得非常复杂而且难以维护。

目前实现跨域的通信技术普遍使用PostMessage来实现，PostMessage是WindowsAPI中的一个常用函数，用于将一条消息放入到消息队列中。但传统的PostMessage只能向直接上级或直接下级进行消息的发送，无法实现跨级发送消息。

发明内容

本发明所要解决的技术问题是：提供一种跨域web端通信方法及终端，实现跨站点、跨层级间iframe的标准化通信。

为了解决上述技术问题，本发明采用的技术方案为：

一种跨域web端通信方法，包括步骤：

S1、在web端上的每个iframe内创建一个消息管理器的类库；

S2、所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态，根据所述消息状态和所述消息管理器所在的节点信息来控制当前iframe与其它iframe的通信。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种跨域web端通信终端，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S1、在web端上的每个iframe内创建一个消息管理器的类库；

S2、所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态，根据所述消息状态和所述消息管理器所在的节点信息来控制当前iframe与其它iframe的通信。

本发明的有益效果在于：通过消息管理器获取并判断待处理消息的消息状态和消息管理器所在的节点信息，从而对待处理消息进行统一操作和管理，实现跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性。

附图说明

图1为本发明实施例的一种跨域web端通信方法的流程示意图；

图2为本发明实施例的一种跨域web端通信方法中步骤S2的具体流程示意图；

图3为本发明实施例的一种跨域web端通信方法中iframe之间嵌套关系的示意图；

图4为本发明实施例的一种跨域web端通信终端的结构示意图；

标号说明：

1、一种跨域web端通信终端；2、存储器；3、iframe；4、消息管理器；

5、处理器。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：通过消息管理器获取并判断待处理消息的消息状态和消息管理器所在的节点信息，从而对待处理消息进行统一操作和管理。

在此之前，为了便于理解本发明的技术方案，对于本发明中涉及的英文缩写、设备等进行说明如下：

(1)、web：在本发明中为World Wide Web的简称，其中文解释为全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

(2)、HTML：在本发明中为Hyper Text Markup Language的简称，其中文解释为超文本标记语言，它是标准通用标记语言下的一个应用。

(3)、API：在本发明中为Application Programming Interface的简称，其中文解释为应用程序编程接口，它是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

(4)、iframe：HTML标签，作用是文档中的文档，或者浮动的框架，其中。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

请参照图1至图3，一种跨域web端通信方法，包括步骤：

S1、消息管理器接收待处理消息，获取所述待处理消息的消息状态；

S2、消息管理器根据所述消息状态和所述消息管理器所在的节点信息来管理所述待处理消息。

从上述描述可知，本发明的有益效果在于：通过消息管理器获取并判断待处理消息的消息状态和消息管理器所在的节点信息，从而对待处理消息进行统一操作和管理，实现跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性。

进一步的，所述步骤S1和步骤S2之间还包括步骤：

消息管理器接收当前iframe创建的初始消息，并将所述初始消息的消息状态标记为消息冒泡，生成待处理消息，并将所述待处理消息发送至父节点的消息管理器，所述初始消息包括消息名称、消息内容。

由上述描述可知，对创建的初始消息进行标记，便于后续消息管理器对于消息的操作和管理。

所述步骤S2具体包括：

所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态；

若所述待处理消息的消息状态为消息冒泡，则判断所述消息管理器所在的节点信息是否为根节点，若是根节点，则将所述待处理消息的消息状态标记为消息分发，并将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器，若不是根节点，则将所述待处理消息发送至父节点的消息管理器；

若所述待处理消息的消息状态为消息分发，则将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器。

由上述描述可知，通过对消息状态的标记，使得消息管理器无需关心具体的技术细节，只需要根据消息状态就知道如何管理待处理消息，消息管理器根据待处理消息的消息状态和消息管理器所在的节点信息，从而将待处理消息进行消息冒泡或是消息发分，实现了跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性；另外，由于每个iframe都可以实现消息分发，使得上述提供的通信具备更好的抗灾能力。

进一步的，所述步骤S2中的业务模块获取所述待处理消息的消息名称，判断所述消息名称与当前iframe的名称是否一致，若是，则处理所述待处理消息，否则忽略所述待处理消息。

由上述描述可知，根据消息名称来判断该待处理消息是不是发送给自己，从而决定是否处理该消息。

进一步的，所述将所述待处理消息发送至父节点的消息管理器的步骤包括：

判断当前iframe的节点信息是否为根节点，若是，将所述待处理消息发送至当前iframe的消息管理器，否则将所述待处理消息发送至父节点的消息管理器。

由上述描述可知，通过考虑到根节点的特殊性，保证管理过程的全面覆盖性。

一种跨域web端通信终端，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S1、在web端上的每个iframe内创建一个消息管理器的类库；

S2、所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态，根据所述消息状态和所述消息管理器所在的节点信息来控制当前iframe与其它iframe的通信。

从上述描述可知，本发明的有益效果在于：通过消息管理器获取并判断待处理消息的消息状态和消息管理器所在的节点信息，从而对待处理消息进行统一操作和管理，实现跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性。

进一步的，所述步骤S1和步骤S2之间还包括步骤：

消息管理器接收当前iframe创建的初始消息，并将所述初始消息的消息状态标记为消息冒泡，生成待处理消息，并将所述待处理消息发送至父节点的消息管理器，所述初始消息包括消息名称、消息内容。

由上述描述可知，对创建的初始消息进行标记，便于后续消息管理器对于消息的操作和管理。

进一步的，所述步骤S2具体包括：

所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态；

若所述待处理消息的消息状态为消息冒泡，则判断所述消息管理器所在的节点信息是否为根节点，若是根节点，则将所述待处理消息的消息状态标记为消息分发，并将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器，若不是根节点，则将所述待处理消息发送至父节点的消息管理器；

若所述待处理消息的消息状态为消息分发，则将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器。

由上述描述可知，通过对消息状态的标记，使得消息管理器无需关心具体的技术细节，只需要根据消息状态就知道如何管理待处理消息，消息管理器根据待处理消息的消息状态和消息管理器所在的节点信息，从而将待处理信息进行消息冒泡或是消息发分，实现了跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性；另外，由于每个iframe都可以实现消息分发，使得上述提供的通信具备更好的抗灾能力。

进一步的，所述步骤S2中的业务模块获取所述待处理消息的消息名称，判断所述消息名称与当前iframe的名称是否一致，若是，则处理所述待处理消息，否则忽略所述待处理消息。

由上述描述可知，根据消息名称来判断该待处理消息是不是发送给自己，从而决定是否处理该消息。

进一步的，所述将所述待处理消息发送至父节点的消息管理器的步骤包括：

判断当前iframe的节点信息是否为根节点，若是，将所述待处理消息发送至当前iframe的消息管理器，否则将所述待处理消息发送至父节点的消息管理器。

由上述描述可知，通过考虑到根节点的特殊性，保证管理过程的全面覆盖性。

请参照图3，本发明的实施例一为：

其中，iframe-0为根节点，同时也是iframe-1-1、iframe-1-2的父节点，反过来说iframe-1-1、iframe-1-2是iframe-0的子节点；同时，iframe-1-2又是iframe-2-1、iframe-2-2的父节点，反过来说iframe-2-1、iframe-2-2是iframe-1-2的子节点。

其中，iframe-0、iframe-1-1、iframe-1-2、iframe-2-1、iframe-2-2内都引入有消息管理器，消息管理器是一个类库。

其中，初始消息遵守以下格式：

此时，若iframe-2-2要发送消息给iframe-1-1，则进行步骤如下：

S1、在web端上的iframe-0、iframe-1-1、iframe-1-2、iframe-2-1、iframe-2-2内均创建一个消息管理器的类库；

iframe-2-2内的消息管理器接收iframe-2-2创建的初始消息，并将初始消息的消息状态标记为消息冒泡，生成待处理消息，其中，初始消息包括消息名称(eventName)为：to-iframe-1-1、消息内容，判断iframe-2-2的节点信息是否为根节点，由于iframe-2-2不是根节点，则将待处理消息发送至iframe-1-2的消息管理器；

S2、iframe-1-2内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-1-2内的消息管理器接收到的待处理消息的消息状态为消息冒泡，且iframe-1-2不是为根节点，于是，iframe-1-2内的消息管理器将待处理消息发送至iframe-0的消息管理器；

S2-1、iframe-0内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-0内的消息管理器接收到的待处理消息的消息状态为消息冒泡，且iframe-0是为根节点，于是将待处理消息的消息状态标记为消息分发，并将待处理消息发送至iframe-0的业务模块以及iframe-1-1、iframe-1-2的消息管理器；

S2-2、iframe-1-1内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-1-1内的消息管理器接收到的待处理消息的消息状态为消息分发，于是，将待处理消息发送至iframe-1-1的业务模块；

S2-3、iframe-1-2内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-1-2内的消息管理器接收到的待处理消息的消息状态为消息分发，并将待处理消息发送至iframe-1-2的业务模块以及iframe-2-1、iframe-2-2的消息管理器；

S2-4、iframe-2-1内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-2-1内的消息管理器接收到的待处理消息的消息状态为消息分发，于是，将待处理消息发送至iframe-2-1的业务模块；

S2-5、iframe-2-2内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-2-2内的消息管理器接收到的待处理消息的消息状态为消息分发，于是，将待处理消息发送至iframe-2-2的业务模块；

iframe-1-1的业务模块获取待处理消息的消息名称：to-iframe-1-1，判断消息名称与iframe-1-1的名称是一致，于是，处理待处理消息，其它iframe的业务模块获取待处理消息的消息名称，判断消息名称与自己的名称不一致，则忽略待处理消息。

请参照图3，本发明的实施例二为：

与上述实施例相比，本实施例中iframe-0要发送消息给iframe-2-2，则进行步骤如下：

S1、在web端上的iframe-0、iframe-1-1、iframe-1-2、iframe-2-1、iframe-2-2内均创建一个消息管理器的类库；

iframe-0内的消息管理器接收iframe-0创建的初始消息，并将初始消息的消息状态标记为消息冒泡，生成待处理消息，其中，初始消息包括消息名称(eventName)为：to-iframe-2-2、消息内容，判断iframe-0的节点信息是否为根节点，由于iframe-0是根节点，则将待处理消息发送至iframe-0的消息管理器；

S2-1、iframe-0内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-0内的消息管理器接收到的待处理消息的消息状态为消息冒泡，且iframe-0是为根节点，于是将待处理消息的消息状态标记为消息分发，并将待处理消息发送至iframe-0的业务模块以及iframe-1-1、iframe-1-2的消息管理器；

S2-2、iframe-1-1内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-1-1内的消息管理器接收到的待处理消息的消息状态为消息分发，于是，将待处理消息发送至iframe-1-1的业务模块；

S2-3、iframe-1-2内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-1-2内的消息管理器接收到的待处理消息的消息状态为消息分发，并将待处理消息发送至iframe-1-2的业务模块以及iframe-2-1、iframe-2-2的消息管理器；

S2-4、iframe-2-1内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-2-1内的消息管理器接收到的待处理消息的消息状态为消息分发，于是，将待处理消息发送至iframe-2-1的业务模块；

S2-5、iframe-2-2内的消息管理器接收待处理消息，获取待处理消息的消息状态，iframe-2-2内的消息管理器接收到的待处理消息的消息状态为消息分发，于是，将待处理消息发送至iframe-2-2的业务模块；

iframe-2-2的业务模块获取待处理消息的消息名称：to-iframe-2-2，判断消息名称与iframe-2-2的名称是一致，于是，处理待处理消息，其它iframe的业务模块获取待处理消息的消息名称，判断消息名称与自己的名称不一致，则忽略待处理消息。

请参照图4，本发明的实施例二为：

一种跨域web端通信终端1，包括存储器2、处理器5以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现实施例一或实施例二中的步骤。

其中，存储器2包括iframe3，每个iframe3都包括一个消息管理器4的类库。

综上所述，本发明提供的一种跨域web端通信方法及终端，通过对消息状态的标记，使得消息管理器无需关心具体的技术细节，只需要根据消息状态就知道如何管理待处理消息，消息管理器根据待处理消息的消息状态和消息管理器所在的节点信息，从而将待处理消息进行消息冒泡或是消息发分，实现了跨站点、跨层级间iframe的标准化通信，既降低了技术难度，也提升了系统的稳定性和可维护性；另外，由于每个iframe都可以实现消息分发，使得上述提供的通信具备更好的抗灾能力。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种跨域web端通信方法，其特征在于，包括步骤：

S1、在web端上的每个iframe内创建一个消息管理器的类库；

S2、所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态，根据所述消息状态和所述消息管理器所在的节点信息来控制当前iframe与其它iframe的通信。

2.根据权利要求1所述的一种跨域web端通信方法，其特征在于，所述步骤S1和步骤S2之间还包括步骤：

消息管理器接收当前iframe创建的初始消息，并将所述初始消息的消息状态标记为消息冒泡，生成待处理消息，并将所述待处理消息发送至父节点的消息管理器，所述初始消息包括消息名称、消息内容。

3.根据权利要求2所述的一种跨域web端通信方法，其特征在于，所述步骤S2具体包括：

所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态；

若所述待处理消息的消息状态为消息冒泡，则判断所述消息管理器所在的节点信息是否为根节点，若是根节点，则将所述待处理消息的消息状态标记为消息分发，并将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器，若不是根节点，则将所述待处理消息发送至父节点的消息管理器；

若所述待处理消息的消息状态为消息分发，则将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器。

4.根据权利要求3所述的一种跨域web端通信方法，其特征在于，

所述步骤S2中的业务模块获取所述待处理消息的消息名称，判断所述消息名称与当前iframe的名称是否一致，若是，则处理所述待处理消息，否则忽略所述待处理消息。

5.根据权利要求2所述的一种跨域web端通信方法，其特征在于，所述将所述待处理消息发送至父节点的消息管理器的步骤包括：

判断当前iframe的节点信息是否为根节点，若是，将所述待处理消息发送至当前iframe的消息管理器，否则将所述待处理消息发送至父节点的消息管理器。

6.一种跨域web端通信终端，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

S1、在web端上的每个iframe内创建一个消息管理器的类库；

S2、所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态，根据所述消息状态和所述消息管理器所在的节点信息来控制当前iframe与其它iframe的通信。

7.根据权利要求6所述的一种跨域web端通信终端，其特征在于，所述步骤S1和步骤S2之间还包括步骤：

消息管理器接收当前iframe创建的初始消息，并将所述初始消息的消息状态标记为消息冒泡，生成待处理消息，并将所述待处理消息发送至父节点的消息管理器，所述初始消息包括消息名称、消息内容。

8.根据权利要求7所述的一种跨域web端通信终端，其特征在于，所述步骤S2具体包括：

所述消息管理器接收当前iframe发送的待处理消息，获取所述待处理消息的消息状态；

若所述待处理消息的消息状态为消息冒泡，则判断所述消息管理器所在的节点信息是否为根节点，若是根节点，则将所述待处理消息的消息状态标记为消息分发，并将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器，若不是根节点，则将所述待处理消息发送至父节点的消息管理器；

若所述待处理消息的消息状态为消息分发，则将所述待处理消息发送至当前iframe的业务模块以及子节点的消息管理器。

9.根据权利要求8所述的一种跨域web端通信终端，其特征在于，

所述步骤S2中的业务模块获取所述待处理消息的消息名称，判断所述消息名称与当前iframe的名称是否一致，若是，则处理所述待处理消息，否则忽略所述待处理消息。

10.根据权利要求7所述的一种跨域web端通信终端，其特征在于，所述将所述待处理消息发送至父节点的消息管理器的步骤包括：

判断当前iframe的节点信息是否为根节点，若是，将所述待处理消息发送至当前iframe的消息管理器，否则将所述待处理消息发送至父节点的消息管理器。