CN108574709B - 跨域操作的实现方法和装置 - Google Patents

Abstract

本申请公开了一种跨域操作的实现方法和装置，方法包括：浏览器窗口的服务端在脚本加载完成后，向页面中各iframe中客户端发送页面初始化消息；服务端设于窗口顶层页面；页面初始化消息携带客户端需要注册的跨域监听事件；客户端根据页面初始化消息，注册相应跨域监听事件，向服务端发送响应消息，响应消息携带客户端所在iframe的页面状态属性；服务端根据响应消息设置相应iframe的页面状态；服务端监听到所述跨域监听事件发生时，向相应客户端发送相应事件触发请求消息，客户端根据该消息，执行相应事件处理脚本；当客户端和服务端之间需要传输数据时，将数据封装成消息进行传输。采用本发明，可以满足不同父域的域间跨域操作，还可以确保跨域操作的准确性。

Description

跨域操作的实现方法和装置

技术领域

本发明涉及计算机应用技术，特别是涉及一种跨域操作的实现方法和装置。

背景技术

目前，企业中通常有多个WEB系统，这些系统分别部署在不同的服务器中，具有不同的域名。系统集成最简单、耦合最低的方式是页面集成。但是，当需要把多个系统通过页面方式集成在一起的时候，不同域的页面脚本之间需要进行跨域交互，以确保集成后页面中的各部分组件的功能正常且页面整体显示具有美观性。

同源策略是浏览器最核心也最基本的安全功能，它是由Netscape提出的，它要求一个源的脚本只能访问来自同一站点的资源。每个html页面都有一个“源”，即该页面来自的服务器域名。两个页面同源时，它们的域名、协议和端口都必须相同。

通过内嵌框架(Iframe)可以实现跨域页面集成，但是，由于浏览器的“同源策略”，页面无法与其所属域之外的域进行通信。同时，浏览器基于安全考虑，js代码不允许跨域操作页面中属于其他域Iframe的内容，防止恶意钓鱼网站，窃取用户信息。具体的跨域操作包含两方面的内容，一方面是来自一个域的脚本获取另一个域的数据；另一方面是一个域的页面和不属于同一个域的Iframe之间的互相访问，包括传递消息、操作dom、响应事件等。

而在实际应用中，当多个页面跨域集成到一起时候，通常需要进行跨域通信，例如：让Iframe大小自适应内容高度，跨域响应事件，跨域切换皮肤或者交换数据。

针对上述两方面的跨域通信需要，目前的跨域操作实现方案是采用将两个不同的域分别升级为父域的方式。在该方案中，不同域的页面执行Document.domain＝“父域名”，使两者成为一个域。例如example1.jd.com和example2.jd.com两个不同域名的页面都执行document.domain＝jd.com则都升级为父域jd.com，如此，可以规避上述js代码不允许跨域操作的限制，从而可以满足集成页面中的跨域操作需要。

上述方法存在下述问题：

1、只能在具有相同父域的域之间进行跨域，因此，不能满足不同父域的域之间的跨域操作。

2、由于需要修改document.domain，因此，跨域操作需要在两个域均完成升级之后才能正常进行，而在实际应用中不同的页面加载时间不能控制，不能保证document.domain这行代码在跨域通信之前已经被执行，因此，无法确保跨域操作的顺利进行。

由此可见，现有的跨域操作实现方案存在一定的使用局限性，只能在具有相同父域的域之间进行跨域操作，同时，即使在相同父域的域之间进行跨域操作也无法确保跨域操作的准确性。

发明内容

有鉴于此，本发明的主要目的在于提供一种跨域操作的实现方法和装置，可以满足不同父域的域之间的跨域操作，同时还可以确保跨域操作的准确性。

为了达到上述目的，本发明提出的技术方案为：

一种跨域操作的实现方法，包括：

浏览器窗口的服务端在其脚本加载完成后，向所在页面中各iframe中的客户端发送页面初始化消息；所述服务端设于窗口顶层页面中；所述页面初始化消息携带客户端需要注册的跨域监听事件；

所述客户端根据所述页面初始化消息，注册相应的跨域监听事件，并向所述服务端发送响应消息，所述响应消息携带客户端所在iframe的页面状态属性；所述服务端根据所述响应消息，对相应iframe的页面状态进行设置；

当所述服务端监听到所述跨域监听事件发生时，向相应客户端发送相应的事件触发请求消息，所述客户端根据所述事件触发请求消息，执行相应的事件处理脚本；

当所述客户端和所述服务端之间需要传输数据时，将所述待传递的数据封装成消息进行所述传输。

一种跨域操作的实现装置，包括：

服务端模块，设于浏览器窗口顶层页面中，用于在本模块脚本加载完成后，向所在页面中各iframe中的客户端，发送页面初始化消息；所述页面初始化消息携带客户端需要注册的跨域监听事件；根据客户端模块针对所述页面初始化消息发送的响应消息，对相应iframe的页面状态进行设置；当监听到跨域监听事件发生时，向相应客户端模块发送相应的事件触发请求消息；将需要传输给客户端模块的数据封装成消息进行传输；

客户端模块，用于根据所述页面初始化消息，注册相应的跨域监听事件，并向所述服务端发送响应消息，所述响应消息携带客户端所在iframe的页面状态属性；根据所述事件触发请求消息，执行相应的事件处理脚本；将需要传输给服务端模块的数据封装成消息进行传输。

综上所述，本发明提出的跨域操作的实现方法和装置，通过引入服务端和客户端，由服务端触发各客户端进行跨域监听事件的注册，在发生跨域监听事件时，发送相应的消息给客户端，触发客户端执行相应事件的处理脚本，如此，可以满足不同父域的域之间的跨域操作，同时还可以确保跨域操作的准确性。

附图说明

图1为本发明实施例的方法流程示意图；

图2为本发明实施例的装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图及具体实施例对本发明作进一步地详细描述。

本发明的核心思想是：引入服务端和客户端两种JS组件，服务端组件部署到浏览器窗口的顶层页面，客户端组件部署到顶层页面包含的各个iframe中。其中顶层窗口是最外层窗口，每个组件提供页面之间跨域通信所需的全部基础功能。服务端先触发各客户端进行跨域监听事件的注册，然后，在发生跨域监听事件时，发送相应的消息给客户端，触发客户端执行相应事件的处理脚本，如此，可以满足不同父域的域之间的跨域操作，同时还可以确保跨域操作的准确性。通过引入跨域组件，使来自不用域的系统，通过配置方式实现集成，降低了系统间的耦合，同时各个系统像一个系统一样方便。

图1为本发明实施例的方法流程示意图，如图1所示，该实施例实现的跨域操作的实现方法主要包括：

步骤101、浏览器窗口的服务端在其脚本加载完成后，向所在页面中各iframe中的客户端发送页面初始化消息；所述服务端设于窗口顶层页面中；所述页面初始化消息携带客户端需要注册的跨域监听事件。

本步骤中，设于浏览器窗口顶层页面的服务端在本服务端的脚本加载完成后，向所在页面中各客户端发送页面初始化消息，该消息中将携带客户端需要注册的跨域监听事件，以触发客户端注册相应的跨域监听事件，这样，此后可以利用已注册的跨域监听事件，在监听到发生相应事件后，执行相应的函数，从而可以实现跨域事件的穿透。

较佳地，考虑到因为js加载时间的不确定性，服务端需要保证每个客户端组件能够一次且仅一次收到该页面初始化消息，可以采用下述方法发送页面初始化消息：

所述服务端在向所述客户端发送所述页面初始化消息之后，向相应的所述iframe的load事件注册事件处理函数，所述事件处理函数用于向iframe发送所述页面初始化消息。

上述方法中，服务端直接向客户端发送页面初始化消息。此时如果客户端已经初始化完毕，即iframe的load事件触发之后，则iframe会收到页面初始化消息；否则，iframe不会收到该消息，会通过下述方式发送页面初始化消息。

服务端向iframe的load事件注册“向iframe发送页面初始化消息”的事件处理函数。如果此时iframe已经初始化完毕，即load事件已经触发过，则该注册的事件不会触发，则通过上一段的方式成功发送页面初始化消息；如果iframe此时未初始化完毕，则load事件注册函数会按时触发，向iframe发送初始化消息。

通过以上“互斥”两个操作，能够保证iframe的客户端能够收到且仅一次收到页面初始化消息，从而可以确保了方式的可靠性。

在实际应用中，客户端需要注册的跨域监听事件具体可由本领域技术人员根据浏览器窗口的展示需要进行预设。

较佳地，考虑到实际应用中有对页面中集成的iframe“换肤”的功能需求，实现跨域更新样式的目的，所述跨域监听事件可以包括iframe样式更改消息。

例如，通过iframe样式更改消息，可以使相应客户端注册消息监听事件，以监听“更改样式”的消息请求。当此后外层页面的服务端监听到“更改样式”的命令后，会发送更改样式的消息到相应iframe的客户端，客户端则会根据收到的更改样式的消息改变当前的iframe样式。这样，通过外层页面的下拉框，即可为内嵌iframe更改样式，从而可以实现跨域更新样式。

较佳地，为了实现跨域事件穿透，所述跨域监听事件还可以包括预设的跨域监听函数，所述页面初始化消息携带将所述跨域监听函数的脚本进行序列化后的脚本序列。这样，当客户端收到关于已注册跨域监听事件的相应事件消息后，可以直接执行相应的脚本。这些跨域监听函数对应的跨域事件可以是跨域点击事件、滚动事件等，具体可由本领域技术人员根据实际需要进行设置。

例如，对于页面滚动事件需要传递到页面中iframe的情况，可以通过触发iframe的客户端注册响应事件滚动的方法，实现跨域事件穿透。此情况下，服务端需要封装一个“注册响应事件滚动的方法”，序列化该方法，将序列化的结果作为需要注册的跨域监听事件，通过页面初始化消息发送到相应iframe的客户端，这样，客户端收到消息后，解析消息，进行安全检查后，执行该方法，为滚动事件添加监听函数。当此后外层页面滚动事件发生后，发送消息给该客户端。由于该客户端之前已经注册了滚动事件的监听方法，收到消息后，就会执行所注册的相应函数，从而可以实现滚动事件的跨域穿透。

步骤102、所述客户端根据所述页面初始化消息，注册相应的跨域监听事件，并向所述服务端发送响应消息，所述响应消息携带客户端所在iframe的页面状态属性；所述服务端根据所述响应消息，对相应iframe的页面状态进行设置。

本步骤中，客户端收到服务端的页面初始化消息后，一方面需要注册相应的跨域监听事件，另一方面还需要将本客户端所在iframe的页面状态属性(包括页面大小等属性信息)通知给服务端，以便服务端可根据该页面状态属性对服务端的iframe边框大小进行设置，从而可以实现跨域页面大小的自适应。

步骤103、当所述服务端监听到所述跨域监听事件发生时，向相应客户端发送相应的事件触发请求消息，所述客户端根据所述事件触发请求消息，执行相应的事件处理脚本；当所述客户端和所述服务端之间需要传输数据时，将所述待传递的数据封装成消息进行所述传输。

这里，当所述客户端和所述服务端之间需要传输数据时，将所述待传递的数据封装成消息进行所述传输，这样，通过消息封装的方式，即可实现客户端和服务端之间的跨域数据传输。

在实际应用中，为了进一步确保系统的安全性，客户端接收到事件触发请求消息后，还可以对其安全性进行验证，确保消息来自可信任的域，对系统没有破坏行为。具体地，可以对跨域的消息来源(组件可以处理的域列表)，消息的行为(例如：是否有访问后台数据的ajax行为，可以通过正则表达式去匹配消息行为)，根据预先设定的安全规则(例如；来自哪些域，可以进行哪些操作等)进行安全检查，保证系统的安全。

图2为与上述方法相对应的跨域操作实现装置的结构示意图，如图2所示，该装置包括：

服务端模块，设于浏览器窗口顶层页面中，用于在本模块脚本加载完成后，向所在页面中各iframe中的客户端，发送页面初始化消息；所述页面初始化消息携带客户端需要注册的跨域监听事件；根据客户端模块针对所述页面初始化消息发送的响应消息，对相应iframe的页面状态进行设置；当监听到跨域监听事件发生时，向相应客户端模块发送相应的事件触发请求消息；将需要传输给客户端模块的数据封装成消息进行传输；

客户端模块，用于根据所述页面初始化消息，注册相应的跨域监听事件，并向所述服务端发送响应消息，所述响应消息携带客户端所在iframe的页面状态属性；根据所述事件触发请求消息，执行相应的事件处理脚本；将需要传输给服务端模块的数据封装成消息进行传输。

较佳地，所述服务端模块，用于在向所述客户端发送所述页面初始化消息之后，向相应的所述iframe的load事件注册事件处理函数，所述事件处理函数用于向iframe发送所述页面初始化消息。

较佳地，所述跨域监听事件包括预设的跨域监听函数，所述页面初始化消息携带将所述跨域监听函数的脚本进行序列化后的脚本序列。

较佳地，所述跨域监听事件包括iframe样式更改消息。

综上所述，以上仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种跨域操作的实现方法，其特征在于，包括：

浏览器窗口的服务端在其脚本加载完成后，向所在页面中各iframe中的客户端发送页面初始化消息；所述服务端设于窗口顶层页面中；所述页面初始化消息携带客户端需要注册的跨域监听事件；所述服务端为部署在浏览器窗口的顶层页面中的JS组件；所述客户端为部署在所述iframe中的JS组件；

所述客户端根据所述页面初始化消息，注册相应的跨域监听事件，并向所述服务端发送响应消息，所述响应消息携带客户端所在iframe的页面状态属性；所述服务端根据所述响应消息，对相应iframe的页面状态进行设置；

当所述服务端监听到所述跨域监听事件发生时，向相应客户端发送相应的事件触发请求消息，所述客户端根据所述事件触发请求消息，执行相应的事件处理脚本；

当所述客户端和所述服务端之间需要传输数据时，将待传递的数据封装成消息进行所述传输。

2.根据权利要求1所述的方法，其特征在于，所述发送页面初始化消息包括：

所述服务端在向所述客户端发送所述页面初始化消息之后，向相应的所述iframe的load事件注册事件处理函数，所述事件处理函数用于向iframe发送所述页面初始化消息。

3.根据权利要求1所述的方法，其特征在于，所述跨域监听事件包括预设的跨域监听函数，所述页面初始化消息携带将所述跨域监听函数的脚本进行序列化后的脚本序列。

4.根据权利要求1所述的方法，其特征在于，所述跨域监听事件包括iframe样式更改消息。

5.一种跨域操作的实现装置，其特征在于，包括：

服务端模块，设于浏览器窗口顶层页面中，用于在本模块脚本加载完成后，向所在页面中各iframe中的客户端，发送页面初始化消息；所述页面初始化消息携带客户端需要注册的跨域监听事件；根据客户端模块针对所述页面初始化消息发送的响应消息，对相应iframe的页面状态进行设置；当监听到跨域监听事件发生时，向相应客户端模块发送相应的事件触发请求消息；将需要传输给客户端模块的数据封装成消息进行传输；所述服务端为部署在浏览器窗口的顶层页面中的JS组件；所述客户端为部署在所述iframe中的JS组件；

客户端模块，用于根据所述页面初始化消息，注册相应的跨域监听事件，并向所述服务端发送响应消息，所述响应消息携带客户端所在iframe的页面状态属性；根据所述事件触发请求消息，执行相应的事件处理脚本；将需要传输给服务端模块的数据封装成消息进行传输。

6.根据权利要求5所述的装置，其特征在于，所述服务端模块，用于在向所述客户端发送所述页面初始化消息之后，向相应的所述iframe的load事件注册事件处理函数，所述事件处理函数用于向iframe发送所述页面初始化消息。

7.根据权利要求5所述的装置，其特征在于，所述跨域监听事件包括预设的跨域监听函数，所述页面初始化消息携带将所述跨域监听函数的脚本进行序列化后的脚本序列。

8.根据权利要求5所述的装置，其特征在于，所述跨域监听事件包括iframe样式更改消息。

Images