CN103207863A - 页面跨域交互方法及终端 - Google Patents

Abstract

本发明公开了一种页面跨域交互方法及终端，涉及页面操作领域，能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。本发明的方法包括：将框架页载入内页，并在该框架页的参数中携带该框架页的URL，以便该内页通过该参数获取该框架页的URL；确定浏览器是否支持postmessage功能；若浏览器支持postmessage功能，则通过调用postmessage发送数据，实现该框架页和该内页之间的数据传输；若浏览器不支持postmessage功能，则通过URL的hash参数携带发送数据，实现该框架页和该内页之间的数据传输。本发明实施例主要用于页面跨域交互的过程中。

Description

页面跨域交互方法及终端

技术领域

本发明涉及页面操作领域，尤其涉及一种页面跨域交互方法及终端。

背景技术

在实际站内应用中，平台提供者需要通过iframe嵌入第三方应用的页面；而平台框架会为第三方应用提供部分功能接口，以支持第三方应用的需求，如邀请好友、购买游戏币、购买道具等功能。随之而来的就是，当第三方应用获取到平台框架的Cookies后，便可以恶意模拟用户发起请求、恶意盗取用户身份验证数据等。为了避免第三方应用恶意模拟用户发起请求、恶意盗取用户身份验证数据，目前由平台框架提供的页面在第三方发起邀请、购买等应用请求时来提交请求，并在提交的请求中附加一个值，该值是根据Cookies中的某个字段计算出来的值，这样，第三方的页面便无法获取这个值，也就无法模拟用户发起请求了，从而有效的避免了跨站请求伪造(Cross-site request forgery，CSRF)攻击。

但是上述方法中为第三方应用使用了和平台框架非同源的域名。非同源的域名带来的问题就是第三方应用与平台框架跨域了，两者之间无法进行JavaScript的交互。目前的解决方法是，当需要上述两者做交互的时候，将整个第三方应用跳转到由平台框架提供的页面，此时该跳转后的页面和平台框架即为同源，便可以正常进行JavaScript交互，保证了交互的安全性。

该应用完全跳转的方式实现第三方应用与平台框架的交互，虽然安全性有了保障，但该种方法需要在完成交互后再次跳转回第三方应用，并且在每次交互完毕后都需要重新加载第三方应用，浪费了用户大量的时间，并且使得用户体验不够连贯。

发明内容

本发明的实施例提供一种页面跨域交互方法及终端，能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。

为达到上述目的，本发明的实施例采用如下技术方案：

一种页面跨域交互方法，包括：

将框架页载入内页，并在所述框架页的参数中携带所述框架页的统一资源定位符URL，以便所述内页通过所述参数获取所述框架页的URL；

确定浏览器是否支持跨域消息接口postmessage功能；

若浏览器支持postmessage功能，则通过调用postmessage发送数据，实现所述框架页和所述内页之间的数据传输；

若浏览器不支持postmessage功能，则通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输。

一种终端，包括：

加载单元，用于将框架页载入内页，并在所述框架页的参数中携带所述框架页的统一资源定位符URL，以便所述内页通过所述参数获取所述框架页的URL；

确定单元，用于确定浏览器是否支持跨域消息接口postmessage功能；

第一交互单元，用于在确定所述浏览器支持postmessage功能时，通过调用postmessage发送数据，实现所述框架页和所述内页之间的数据传输；

第二交互单元，用于在所述浏览器不支持postmessage功能时，通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输。

本发明实施例提供的页面跨域交互方法及终端，在将框架页载入内页后，根据浏览器是否支持postmessage功能，选择通过调用跨域消息接口发送数据或通过URL的hash参数携带发送数据，实现框架页和内页之间的数据传输；由于过调用跨域消息接口发送数据或通过URL的hash参数携带发送数据，都不需要进行页面的真实跳转，所以能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例1中页面跨域交互方法的流程图；

图2为本发明实施例2中通过调用跨域消息接口发送数据，实现页面跨域交互方法的流程图；

图3为本发明实施例3中通过URL的hash参数携带发送数据，实现页面跨域交互方法的流程图；

图4为本发明实施例4中一种终端的组成框图；

图5为本发明实施例4中另一种终端的组成框图；

图6为本发明实施例4中另一种终端的组成框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

本发明实施例提供一种页面跨域交互方法，如图1所述，该方法包括：

101、将框架页载入内页，并在所述框架页的参数中携带所述框架页的统一资源定位符(Uniform/Universal Resource Locator，URL)，以便所述内页通过所述参数获取所述框架页的URL。

需要说明的是，在实际应用中，框架页通过iframe对象的src属性可以知道内页的URL，而内页通常情况无法知道框架页的URL，所以需要框架页在载入iframe时即将框架页自己的URL通过内页URL中的location.search或location.hash参数告诉内页。其中，该内页为第三方应用对应的页面，第三方应用通过其对应的内页与框架页进行交互。

102、确定浏览器是否支持跨域消息接口(postmessage)功能；若浏览器支持postmessage功能，则执行步骤103；若浏览器不支持postmessage功能，则执行步骤104。

需要说明的是，postmessage是文本标记语言(Hypertext MarkupLanguage，HTML5)中提出的一个新标准，对于两个跨域的窗口，其中一个窗口可以调用另一个窗口的postmessage，其将在目标窗口上引发一个消息(message)事件。通过postmessage发送数据时，第一个参数为要传递数据的字符串内容，第二个参数为目标窗口的域名，其形式可以为http://api.platform.com/。message事件被引发时，该事件对象包括data属性和origin属性，其中origin属性为该消息来源域名，如http://app123.app.com，可以通过该属性做一定的校验或分来源处理，而data属性则为传入跨域页的数据字符串。

103、通过调用postmessage发送数据，实现所述框架页和所述内页之间的数据传输。

其中，通过调用跨域消息接口发送数据，实现所述框架页和所述内页之间的数据传输，可以通过以下的方法实现，该方法中的框架页和内页可分别互为发送方和接收方，即：当接收方为内页时，发送方为框架页；或者当接收方为框架页时，发送方为内页。这样既可以实现框架页向内页发送数据，也可以实现内页向框架页发送数据，便可完成页面的跨域交互功能。该方法具体包括：

发送方调用接收方的postmessage将数据发送给所述接收方；

所述接收方接收所述发送方发送的数据，并对所述数据进行解析处理；

所述接收方将解析处理后的结果通过发送方的postmessage发送给所述发送方。

需要说明的是，在执行上述方法时，需要在页面初始化时，由组建绑定message事件。

104、通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输。

需要说明的是，对于跨域的两个窗口，即框架页和iframe内页非同源的时候，iframe内页可以修改框架页的URL，即location.href对象，当然这里只能做只写的修改，不能有任何读操作，也不能写location的其他对象，否则会因为跨域导致JavaScript报错。类似地，框架页也可以通过修改iframe对象的src属性修改内页的URL，更进一步，我们可以在iframe中再嵌入iframe，而此时外层iframe和内层iframe都可以彼此修改URL。基于这个原理，我们可以通过修改框架页和内页的URL的hash参数，而保证URL其他内容相同的方式来实现框架页和内页之间的数据的交互，同时可以避免页面产生真正的跳转。

其中，通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输，可以通过以下的方法实现，该方法中的框架页和内页可分别互为发送方和接收方，即：当接收方为内页时，发送方为框架页；或者当接收方为框架页时，发送方为内页。这样既可以实现框架页向内页发送数据，也可以实现内页向框架页发送数据，便可完成页面的跨域交互功能。该方法具体包括：

发送方将数据携带在接收方URL的hash参数中发送给所述接收方；

所述接收方检测所述发送方发送的接收方URL的hash参数是否变更；

若变更，则所述接收方从所述述hash参数中获取所述数据，并对所述数据进行解析处理；

所述接收方将对所述数据解析处理后的结果携带在所述发送方URL的hash参数中发送给所述发送方。

本发明实施例提供的页面跨域交互方法及终端，在将框架页载入内页后，根据浏览器是否支持postmessage功能，选择通过调用跨域消息接口发送数据或通过URL的hash参数携带发送数据，实现框架页和内页之间的数据传输；由于过调用跨域消息接口发送数据或通过URL的hash参数携带发送数据，都不需要进行页面的真实跳转，所以能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。

实施例2

本发明实施例提供一种页面跨域交互方法，本发明实施例以浏览器支持postmessage功能，通过调用跨域消息接口发送数据，实现所述框架页和所述内页之间的数据传输为例，进行具体阐述。如图2所示，该方法包括：

201、在页面初始化时，由组建绑定消息(message)事件。

202、框架页载入内页，并在所述框架页的参数中携带所述框架页的URL。

203、所述内页通过所述参数获取所述框架页的URL。

204、当所述内页需要向所述框架页发送数据时，调用所述框架页的postmessage将数据发送给所述框架页。

需要说明的是，在调用所述框架页的postmessage时，将步骤203获取的所述框架页的URL作为校验参数对调用的框架页的postmessage进行校验，只有当校验通过后，才通过调用的所述框架页的postmessage将数据发送给所述框架页。

205、所述框架页接收所述内页发送的数据，并响应message事件，即确认该数据的发送方为内页后，对所述数据进行解析处理。

206、对所述数据进行解析处理完毕后，所述框架页调用内容的postmessage，将解析处理后的结果发送给所述框架页。

本发明实施例中，当浏览器支持postmessage功能时，通过调用跨域消息接口发送数据，实现框架页和内页之间的数据传输；由于过调用跨域消息接口发送数据，不需要进行页面的真实跳转，所以能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。

实施例3

本发明实施例提供一种页面跨域交互方法，本发明实施例以不浏览器支持postmessage功能，通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输为例，进行具体阐述。如图3所示，该方法包括：

301、框架页载入内页，并在所述框架页的参数中携带所述框架页的URL。

302、所述内页通过所述参数获取所述框架页的URL。

303、当所述内页需要向所述框架页发送数据时，修改框架页的URL，即将数据携带在框架页的URL的hash参数中，并发送给所述框架页。

304、所述框架页按照所述定时器定时记录所述方法方发送的所述hash参数，并定时检测所述内页发送的框架页URL的hash参数是否变更；若变更则执行步骤305；若不变更，则执行步骤304。

需要说明的是，在页面初始化时，在接收方启动setInterval定时器。具体的，本发明实施例的接收方为框架页，因此，在页面初始化时，在框架页启动setInterval定时器。

305、所述框架页从所述述hash参数中获取所述数据，并对所述数据进行解析处理。

306、在框架页对所述数据进行解析处理完毕后，修改内页的src属性，并将对所述数据解析处理后的结果携带在所述框架页URL的hash参数中发送给所述框架页。

本发明实施例中，当浏览器不支持postmessage功能时，通过URL的hash参数携带发送数据，实现框架页和内页之间的数据传输；由于通过URL的hash参数携带发送数据，不需要进行页面的真实跳转，所以能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。

实施例4

本发明实施例提供一种终端，如图4所示，该终端包括：加载单元41、确定单元42、第一交互单元43和/或第二交互单元44。其中，当终端的浏览器不支持postmessage功能时，该终端仅能包好第二交互单元44；当终端的浏览器支持postmessage功能时，该终端可以仅包含第一交互单元43，也可以包含第一交互单元43和第二交互单元44，具体的本发明实施例对此不进行限制。

加载单元41，用于将框架页载入内页，并在所述框架页的参数中携带所述框架页的统一资源定位符URL，以便所述内页通过所述参数获取所述框架页的URL。

确定单元42，用于确定浏览器是否支持postmessage功能。

第一交互单元43，用于在确定所述浏览器支持postmessage功能时，通过调用跨域消息接口发送数据，实现所述框架页和所述内页之间的数据传输。

第二交互单元44，用于在所述浏览器不支持postmessage功能时，通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输。

进一步的，当通过调用跨域消息接口发送数据，实现所述框架页和所述内页之间的数据传输时，可以通过以下的方案实现，该档案中的框架页和内页可分别互为发送方和接收方，即：当接收方为内页时，发送方为框架页；或者当接收方为框架页时，发送方为内页。这样既可以实现框架页向内页发送数据，也可以实现内页向框架页发送数据，便可完成页面的跨域交互功能。具体的，如图5所示，所述第一交互单元43包括：第一发送模块431、第一接收模块432、第一处理模块433、第二发送模块434。

第一发送模块431，用于发送方调用接收方的postmessage将数据发送给所述接收方。

第一接收模块432，用于所述接收方接收所述发送方发送的数据。

第一处理模块433，用于对所述数据进行解析处理。

第二发送模块434，用于所述接收方将解析处理后的结果通过发送方的postmessage发送给所述发送方。

当通过调用跨域消息接口发送数据，实现所述框架页和所述内页之间的数据传输时，如图5所示，该终端还包括：绑定单元45。

绑定单元45，用于在页面初始化时，由组建绑定消息message事件。

进一步的，当通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输时，可以通过以下的方案实现，该方案中的框架页和内页可分别互为发送方和接收方，即：当接收方为内页时，发送方为框架页；或者当接收方为框架页时，发送方为内页。这样既可以实现框架页向内页发送数据，也可以实现内页向框架页发送数据，便可完成页面的跨域交互功能。具体的，如图6所示，所述第二交互单元44包括：第三发送模块441、检测模块442、第二处理模块443、第四发送模块444。

第三发送模块441，用于发送方将数据携带在接收方URL的hash参数中发送给所述接收方；第二处理模块443、第四发送模块444。

检测模块442，用于检测所述发送方发送的接收方URL的hash参数是否变更。

第二处理模块443，用于在检测到变更时，所述接收方从所述述hash参数中获取所述数据，并对所述数据进行解析处理。

第四发送模块444，用于所述接收方将对所述数据解析处理后的结果携带在所述发送方URL的hash参数中发送给所述发送方。

当通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输时，如图6所示，该终端还包括：启动单元46。

启动单元46，用于在页面初始化时，在接收方启动setInterval定时器；

所述检测模块442还用于，按照所述定时器定时记录所述发送方发送的所述hash参数，并定时检测所述发送方发送的接收方URL的hash参数是否变更。

需要说明的是，本发明实施例提供的终端所包含的各功能模块的其他描述，可以参考实施例1、实施例2和实施例3中的相关描述，本发明实施例此处将不再赘述。

本发明实施例中，在将框架页载入内页后，根据浏览器是否支持postmessage功能，选择通过调用跨域消息接口发送数据或通过URL的hash参数携带发送数据，实现框架页和内页之间的数据传输；由于过调用跨域消息接口发送数据或通过URL的hash参数携带发送数据，都不需要进行页面的真实跳转，所以能够在每次交互完毕后无需再次重新加载应用，并且使得每次调用平台功能时无需中断，节约了用户时间，使得用户体验的连贯性好。

通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在可读取的存储介质中，如计算机的软盘，硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (12)

1.一种页面跨域交互方法，其特征在于，包括：

将框架页载入内页，并在所述框架页的参数中携带所述框架页的统一资源定位符URL，以便所述内页通过所述参数获取所述框架页的URL；

确定浏览器是否支持跨域消息接口postmessage功能；

若浏览器支持postmessage功能，则通过调用postmessage发送数据，实现所述框架页和所述内页之间的数据传输；

若浏览器不支持postmessage功能，则通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输。

2.根据权利要求1所述的方法，其特征在于，所述通过调用跨域消息接口发送数据，实现所述框架页和所述内页之间的数据传输，包括：

发送方调用接收方的postmessage将数据发送给所述接收方；

所述接收方接收所述发送方发送的数据，并对所述数据进行解析处理；

所述接收方将解析处理后的结果通过发送方的postmessage发送给所述发送方。

3.根据权利要求2所述的方法，其特征在于，还包括：

在页面初始化时，由组建绑定消息message事件。

4.根据权要求1所述的方法，其特征在于，所述通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输，包括：

发送方将数据携带在接收方URL的hash参数中发送给所述接收方；

所述接收方检测所述发送方发送的接收方URL的hash参数是否变更；

若变更，则所述接收方从所述述hash参数中获取所述数据，并对所述数据进行解析处理；

所述接收方将对所述数据解析处理后的结果携带在所述发送方URL的hash参数中发送给所述发送方。

5.根据权利要求4所述的方法，其特征在于，还包括：

在页面初始化时，在接收方启动setInterval定时器；

所述接收方按照所述定时器定时记录所述方法方发送的所述hash参数，并定时检测当所述送方发送的接收方URL的hash参数是否变更。

6.根据权利要求2-5任一项所述的方法，其特征在于，

所述接收方为内页，所述发送方为框架页；或者

所述接收方为框架页，所述发送方为内页。

7.一种终端，其特征在于，包括：

加载单元，用于将框架页载入内页，并在所述框架页的参数中携带所述框架页的统一资源定位符URL，以便所述内页通过所述参数获取所述框架页的URL；

确定单元，用于确定浏览器是否支持跨域消息接口postmessage功能；

第一交互单元，用于在确定所述浏览器支持postmessage功能时，通过调用postmessage发送数据，实现所述框架页和所述内页之间的数据传输；

第二交互单元，用于在所述浏览器不支持postmessage功能时，通过URL的hash参数携带发送数据，实现所述框架页和所述内页之间的数据传输。

8.根据权利要求7所述的终端，其特征在于，所述第一交互单元包括：

第一发送模块，用于发送方调用接收方的postmessage将数据发送给所述接收方；

第一接收模块，用于所述接收方接收所述发送方发送的数据；

第一处理模块，用于对所述数据进行解析处理；

第二发送模块，用于所述接收方将解析处理后的结果通过发送方的postmessage发送给所述发送方。

9.根据权利要求8所述的终端，其特征在于，还包括：

绑定单元，用于在页面初始化时，由组建绑定消息message事件。

10.根据权要求7所述的终端，其特征在于，所述第二交互单元包括：

第三发送模块，用于发送方将数据携带在接收方URL的hash参数中发送给所述接收方；

检测模块，用于检测所述发送方发送的接收方URL的hash参数是否变更；

第二处理模块，用于在检测到变更时，所述接收方从所述述hash参数中获取所述数据，并对所述数据进行解析处理；

第四发送模块，用于所述接收方将对所述数据解析处理后的结果携带在所述发送方URL的hash参数中发送给所述发送方。

11.根据权利要求10所述的终端，其特征在于，还包括：

启动模块，用于在页面初始化时，在接收方启动setInterval定时器；

所述检测模块还用于，按照所述定时器定时记录所述发送方发送的所述hash参数，并定时检测所述发送方发送的接收方URL的hash参数是否变更。

12.根据权利要求8-11任一项所述的终端，其特征在于，

所述接收方为内页，所述发送方为框架页；或者

所述接收方为框架页，所述发送方为内页。

Images