CN108073627A - 一种跨域网页的JavaScript函数调用方法以及装置 - Google Patents

Abstract

本发明公开了一种跨域网页的JavaScript函数调用方法以及装置，方法包括：S1、主页面调用嵌入页面的JavaScript函数：主页面将主页面参数通过IFRAME标签中的URL的锚传递到嵌入页面中，嵌入页面监听从锚中提取的主页面参数，并在主页面参数的数值改变时基于主页面参数调用嵌入页面的JavaScript函数；S2、嵌入页面调用主页面的JavaScript函数：在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，嵌入页面基于嵌入页面参数修改IFRAME标签中的URL的查询参数，辅助页面刷新后从查询参数提取出嵌入页面参数，并基于嵌入页面参数调用主页面的JavaScript函数。本发明实现了在主页面和嵌入页面无需刷新情况下实现参数传递与方法调用。

Description

一种跨域网页的JavaScript函数调用方法以及装置

技术领域

本发明涉及通信领域，尤其涉及一种跨域网页的JavaScript函数调用方法以及装置。

背景技术

现在越来越多的应用系统开始采用BS架构，在WEB应用层产生了系统之间直接交互的需求也越来越多。例如某应用系统的页面A通过iframe标签内嵌GIS地图系统页面B的操作来响应页面A的事件。这些系统之间多为内网应用，一般极少采用域名访问，多用IP地址代替。

出于安全考虑，浏览器对JavaScript脚本进行了同源策略限制，不允许跨域网页间对象的直接调用。同源策略要求“协议+域名+端口”完全一致，即使是主域相同的不同子域，也是不可直接跨域通讯的。因此，要实现WEB应用层页面的交互，就必然要解决iframe跨域网页的JavaScript跨域调用的问题。

为此，现有技术的第一种方案是，使用相同的主域名作为document对象的域名实现跨域调用。例如，主域名相同(假设为xxx.com)而子域不同的两个页面A(假设来自域a.xxx.com)和B(假设来自域b.xxx.com)之间使用iframe嵌套，然后在A和B两个页面中设置“document.domain＝‘xxx.com’”。这种做法可以“欺骗”两个页面的对象以为在同一个域。但是这种方法的缺陷是，只能用于主域相同的两个子域间的调用，如果两个域主域不同时(例如域直接使用IP)，修改document.domain会报错；另外，修改document.domain可能影响页面基于document.domain属性的原有功能。

现有技术的第二种方案是，使用window.name实现的跨域数据传输。例如，页面A.html(假设来自www.aaa.com)使用iframe内嵌页面B.html(假设来自www.bbb.com)，并监听用iframe的onload事件,在B页面加载完立即处理B页面的window.name的值。这种方法具有以下缺陷：一是，传递参数必须通过刷新加载页面来实现，这种方式无法保持B页面的状态；二是，这种方式只实现数据的跨域传递，未实现JavaScript函数的调用；三是，这种方式只能单向的，从主页面A到内嵌页面B，不能反向传递数据。

发明内容

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种跨域网页的JavaScript函数调用方法以及装置。

本发明解决其技术问题所采用的技术方案是：构造一种跨域网页的JavaScript函数调用方法，包括：

S1、主页面调用嵌入页面的JavaScript函数：

主页面将主页面参数通过嵌入页面的IFRAME标签中的URL的锚传递到嵌入页面中，嵌入页面监听从锚中提取的主页面参数，并在主页面参数的数值改变时基于主页面参数调用嵌入页面的JavaScript函数；

S2、嵌入页面调用主页面的JavaScript函数：

在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，嵌入页面基于嵌入页面参数修改辅助页面的IFRAME标签中的URL的查询参数，辅助页面刷新后从查询参数提取出嵌入页面参数，并基于嵌入页面参数调用主页面的JavaScript函数。

在本发明所述的跨域网页的JavaScript函数调用方法中，所述步骤S1具体包括：

S11、主页面事件触发，在事件中收集主页面参数；

S12、将主页面参数转换成第一字符串；

S13、修改主页面中的嵌入页面的IFRAME标签，将所述第一字符串作为URL的锚；

S14、嵌入页面注册定时控制事件，每隔预设时间从URL的锚中提取出主页面参数；

S15、如果检测到主页面参数的数值改变，将主页面参数作为函数参数调用嵌入页面的JavaScript函数。

在本发明所述的跨域网页的JavaScript函数调用方法中，所述步骤S12中具体为：将主页面参数和一个新的GUID/随机数共同组合形成第一字符串。

在本发明所述的跨域网页的JavaScript函数调用方法中，所述步骤S2具体包括：

S21、嵌入页面事件触发，在事件中收集嵌入页面参数；

S22、将嵌入页面参数转换为第二字符串；

S23、修改嵌入页面中的辅助页面的IFRAME标签，将所述第二字符串作为URL的查询参数；

S24、辅助页面重新加载，并从URL的查询参数中提取出嵌入页面参数；

S25、在辅助页面中以嵌入页面参数作为函数参数，通过window.parent.parent调用主页面的JavaScript函数。

在本发明所述的跨域网页的JavaScript函数调用方法中，所述步骤S22中具体为：将嵌入页面参数和一个新的GUID/随机数共同组合形成第二字符串。

本发明还公开了一种跨域网页的JavaScript函数调用装置，包括：

第一调用装置，用于将主页面参数通过嵌入页面的IFRAME标签中的URL的锚传递到嵌入页面中，以及用于嵌入页面监听从锚中提取的主页面参数，并在主页面参数的数值改变时基于主页面参数调用嵌入页面的JavaScript函数；

第二调用装置，用于在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，以及用于基于嵌入页面参数修改辅助页面的IFRAME标签中的URL的查询参数，以及在辅助页面刷新后从查询参数提取出嵌入页面参数，并基于嵌入页面参数调用主页面的JavaScript函数。

在本发明所述的跨域网页的JavaScript函数调用装置中，所述第一调用装置包括：

第一参数收集单元，用于在主页面事件触发后在事件中收集主页面参数；

第一参数转换单元，用于将主页面参数转换成第一字符串；

第一参数传递单元，用于修改主页面中的嵌入页面的IFRAME标签，将所述第一字符串作为URL的锚；

第一参数提取单元，用于在嵌入页面注册定时控制事件，每隔预设时间从URL的锚中提取出主页面参数；

第一函数调取单元，用于在检测到主页面参数的数值改变时，将主页面参数作为函数参数调用嵌入页面的JavaScript函数。

在本发明所述的跨域网页的JavaScript函数调用装置中，第一参数转换单元还用于将主页面参数和一个新的GUID/随机数共同组合形成第一字符串。

在本发明所述的跨域网页的JavaScript函数调用装置中，第二调用装置包括：

第二参数收集单元，用于在嵌入页面事件触发后在事件中收集嵌入页面参数；

第二参数转换单元，用于将嵌入页面参数转换为第二字符串；

第二数传递单元，用于修改嵌入页面中的辅助页面的IFRAME标签，将所述第二字符串作为URL的查询参数；

第二参数提取单元，用于在辅助页面重新加载后，从URL的查询参数中提取出嵌入页面参数；

第二函数调取单元，用于在辅助页面中以嵌入页面参数作为函数参数，通过window.parent.parent调用主页面的JavaScript函数。

在本发明所述的跨域网页的JavaScript函数调用装置中，第二参数转换单元还用于将嵌入页面参数和一个新的GUID/随机数共同组合形成第二字符串。

实施本发明的跨域网页的JavaScript函数调用方法以及装置，具有以下有益效果：本发明从主页面传递过来的参数是以锚的方式添加到IFRAME标签中的URL中，保证在主页面调用嵌入页面的JavaScript函数的过程中，嵌入页面不刷新；在嵌入页面调用主页面的JavaScript函数时，借助嵌入在嵌入页面中的与主页面同域的辅助页面的加载，在主页面和嵌入页面无需刷新情况下实现参数传递与方法调用；进一步地，为了保证每次调用都会执行成功，避免相同的参数导致的失败，可在参数传递时添加GUID或随机数。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1是主页面调用嵌入页面的JavaScript函数的流程图；

图2是嵌入页面调用主页面的JavaScript函数的流程图。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图详细说明本发明的具体实施方式。

在介绍本发明之前，首先介绍IFRAME标签中的URL，URL由以下几个部分组成：http://{host}:{port}/{path}？{params}#{anchor}，例如，http://www.szlanyou.com/oa/a.html？key1＝value1&key2＝value2#content3。

其中，“？”后面、"#"之前的部分，即params，称之为URL参数，也即查询参数，以一个或多个键值对组成，键值对之间用"＝"连接，多个键值对之间使用"&"连接，修改该URL参数(查询参数)会导致页面的刷新(重新加载)。

其中，URL"#"之后部分，即anchor，称之为“锚”，是页面的内容定位，能够定位到页面的具体部分。修改URL的anchor部分，不会导致页面的刷新(重新加载)。

下面介绍本发明的跨域网页的JavaScript函数调用方法，方法包括：

S1、主页面调用嵌入页面的JavaScript函数：

主页面将主页面参数paramsA通过IFRAME标签中的URL的锚(即#之后的部分)传递到嵌入页面中，嵌入页面监听从锚中提取的主页面参数paramsA，并在主页面参数paramsA的数值改变时基于主页面参数paramsA调用嵌入页面的JavaScript函数；

S2、嵌入页面调用主页面的JavaScript函数：

在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，嵌入页面基于嵌入页面参数ParamsB修改IFRAME标签中的URL的查询参数(即“？”后面、"#"之前的部分)，辅助页面刷新后从查询参数提取出嵌入页面参数ParamsB，并基于嵌入页面参数ParamsB调用主页面的JavaScript函数。

需要明确的是，上述步骤S1和S2并不存在先后关系，仅仅代表两种情况。

下面具体介绍步骤S1和S2。

参考图1，步骤S1具体包括：

S11、主页面事件触发，在事件中收集主页面参数paramsA；网页中的触发事件有多种，此处并不做限制。

S12、将主页面参数paramsA转换成第一字符串str1；

S13、修改主页面中的嵌入页面的IFRAME标签，将所述第一字符串str1作为URL的锚；

S14、嵌入页面注册定时控制事件，每隔预设时间，例如100ms，从URL的锚中提取出主页面参数paramsA；

S15、如果检测到主页面参数paramsA的数值改变，将主页面参数paramsA作为函数参数调用嵌入页面的JavaScript函数。

例如，假如将主页面记为A.html，简称A页面，将嵌入页面记为B.html，简称B页面，辅助页面记为C.html，简称C页面。A页面使用IFRAME内嵌B页面，B页面使用IFRAME内嵌C页面。A页面的IFRAME的ID为aFrame，B页面的IFRAME的ID为bFrame，C页面的IFRAME的ID为cFrame。假设，A页面和C页面的服务器所在域名为www.aaa.com，B页面的服务器所在域名为www.bbb.com。

假如一种具体的应用情况是，在A页面中点击按钮实现在B页面弹窗显示A页面传递的参数。则A页面可以通过script脚本语言将paramsA转换得到的str1写入bFrame的URL的#之后，例如：触发事件发生后，修改bFrame：<iframe id＝”bFrame”href＝”http://www.bbb.com/B.html#str1”/>；然后，B页面中通过location.hash取出str1。由于参数放在#之后，所以不会刷新B页面。为了实时监听该参数，可以通过setInterval函数实现定时器功能，每隔100ms对str1的值(location.hash的值)进行判断，如果该值发生变化，则将str1作为函数参数，调用相应的函数：function onExecute(str1){alert(str1)；}。

优选的，所述步骤S12中具体为：将主页面参数和一个新的GUID/随机数共同组合形成第一字符串。

由于在传递的参数相同的情况下，判断不出参数变化，也就无法保证函数调用的执行了，所以在每次传递参数时，可以绑定一个新的GUID/随机数，以确保每次调用都会执行成功，避免相同的参数导致的失败。

参考图2，所述步骤S2具体包括：

S21、嵌入页面事件触发，在事件中收集嵌入页面参数ParamsB；

S22、将嵌入页面参数ParamsB转换为第二字符串str2；

S23、修改嵌入页面中的辅助页面的IFRAME标签，将所述第二字符串作为URL的查询参数；

S24、辅助页面重新加载，并从URL的查询参数中提取出嵌入页面参数ParamsB，此部分代码可以在onload中实现；

S25、在辅助页面中以嵌入页面参数ParamsB作为函数参数，通过window.parent.parent调用主页面的JavaScript函数。

假如在B页面中点击按钮实现在A页面弹窗显示B页面传递的参数。则B页面可以通过script脚本语言将paramsB转换得到的str2写入cFrame的URL的？之后。例如：B页面触发事件发生后，修改cFrame：<iframe id＝"cFrame"style＝"display:none；"src＝"http://www.aaa.com/C.html？query＝value"/>；由于修改了查询参数，导致C页面重新加载，C页面加载时触发onload事件，在C页面的onload事件中解析location.href中的？之后的部分，从中提取出str2(即paramC)，在C页面中以str2作为函数参数，通过window.parent.parent.onExcute(str2)调用A页面相应的函数：functiononExecute(str2){alert(str2)；}。

同理，为了确保每次调用都会执行成功，避免相同的参数导致的失败。优选的，所述步骤S22中具体为：将嵌入页面参数和一个新的GUID/随机数共同组合形成第二字符串。

相应于上述方法，本发明还公开了一种跨域网页的JavaScript函数调用装置，包括：

第一调用装置，用于将主页面参数通过IFRAME标签中的URL的锚传递到嵌入页面中，以及用于嵌入页面监听从锚中提取的主页面参数，并在主页面参数的数值改变时基于主页面参数调用嵌入页面的JavaScript函数；

第二调用装置，用于在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，以及用于基于嵌入页面参数修改IFRAME标签中的URL的查询参数，以及在辅助页面刷新后从查询参数提取出嵌入页面参数，并基于嵌入页面参数调用主页面的JavaScript函数。

其中，所述第一调用装置具体包括：

第一参数收集单元，用于在主页面事件触发后在事件中收集主页面参数；

第一参数转换单元，用于将主页面参数转换成第一字符串；

第一参数传递单元，用于修改主页面中的嵌入页面的IFRAME标签，将所述第一字符串作为URL的锚；

第一参数提取单元，用于在嵌入页面注册定时控制事件，每隔预设时间从URL的锚中提取出主页面参数；

第一函数调取单元，用于在检测到主页面参数的数值改变时，将主页面参数作为函数参数调用嵌入页面的JavaScript函数。

优选的，第一参数转换单元还用于将主页面参数和一个新的GUID/随机数共同组合形成第一字符串。

其中，第二调用装置包括：

第二参数收集单元，用于在嵌入页面事件触发后在事件中收集嵌入页面参数；

第二参数转换单元，用于将嵌入页面参数转换为第二字符串；

第二数传递单元，用于修改嵌入页面中的辅助页面的IFRAME标签，将所述第二字符串作为URL的查询参数；

第二参数提取单元，用于在辅助页面重新加载后，从URL的查询参数中提取出嵌入页面参数；

第二函数调取单元，用于在辅助页面中以嵌入页面参数作为函数参数，通过window.parent.parent调用主页面的JavaScript函数。

优选的，第二参数转换单元还用于将嵌入页面参数和一个新的GUID/随机数共同组合形成第二字符串。

综上所述，实施本发明的跨域网页的JavaScript函数调用方法以及装置，具有以下有益效果：本发明从主页面传递过来的参数是以锚的方式添加到IFRAME标签中的URL中，保证在主页面调用嵌入页面的JavaScript函数的过程中，嵌入页面不刷新；在嵌入页面调用主页面的JavaScript函数时，借助嵌入在嵌入页面中的与主页面同域的辅助页面的加载，在主页面和嵌入页面无需刷新情况下实现参数传递与方法调用；进一步地，为了保证每次调用都会执行成功，避免相同的参数导致的失败，可在参数传递时添加GUID或随机数。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。

Claims (10)

1.一种跨域网页的JavaScript函数调用方法，其特征在于，包括：

S1、主页面调用嵌入页面的JavaScript函数：

主页面将主页面参数通过嵌入页面的IFRAME标签中的URL的锚传递到嵌入页面中，嵌入页面监听从锚中提取的主页面参数，并在主页面参数的数值改变时基于主页面参数调用嵌入页面的JavaScript函数；

S2、嵌入页面调用主页面的JavaScript函数：

在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，嵌入页面基于嵌入页面参数修改辅助页面的IFRAME标签中的URL的查询参数，辅助页面刷新后从查询参数提取出嵌入页面参数，并基于嵌入页面参数调用主页面的JavaScript函数。

2.根据权利要求1所述的跨域网页的JavaScript函数调用方法，其特征在于，所述步骤S1具体包括：

S11、主页面事件触发，在事件中收集主页面参数；

S12、将主页面参数转换成第一字符串；

S13、修改主页面中的嵌入页面的IFRAME标签，将所述第一字符串作为URL的锚；

S14、嵌入页面注册定时控制事件，每隔预设时间从URL的锚中提取出主页面参数；

S15、如果检测到主页面参数的数值改变，将主页面参数作为函数参数调用嵌入页面的JavaScript函数。

3.根据权利要求2所述的跨域网页的JavaScript函数调用方法，其特征在于，所述步骤S12中具体为：将主页面参数和一个新的GUID/随机数共同组合形成第一字符串。

4.根据权利要求1所述的跨域网页的JavaScript函数调用方法，其特征在于，所述步骤S2具体包括：

S21、嵌入页面事件触发，在事件中收集嵌入页面参数；

S22、将嵌入页面参数转换为第二字符串；

S23、修改嵌入页面中的辅助页面的IFRAME标签，将所述第二字符串作为URL的查询参数；

S24、辅助页面重新加载，并从URL的查询参数中提取出嵌入页面参数；

S25、在辅助页面中以嵌入页面参数作为函数参数，通过window.parent.parent调用主页面的JavaScript函数。

5.根据权利要求4所述的跨域网页的JavaScript函数调用方法，其特征在于，所述步骤S22中具体为：将嵌入页面参数和一个新的GUID/随机数共同组合形成第二字符串。

6.一种跨域网页的JavaScript函数调用装置，其特征在于，包括：

第一调用装置，用于将主页面参数通过嵌入页面的IFRAME标签中的URL的锚传递到嵌入页面中，以及用于嵌入页面监听从锚中提取的主页面参数，并在主页面参数的数值改变时基于主页面参数调用嵌入页面的JavaScript函数；

第二调用装置，用于在嵌入页面中嵌入与主页面同域且隐藏显示的辅助页面，以及用于基于嵌入页面参数修改辅助页面的IFRAME标签中的URL的查询参数，以及在辅助页面刷新后从查询参数提取出嵌入页面参数，并基于嵌入页面参数调用主页面的JavaScript函数。

7.根据权利要求6所述的跨域网页的JavaScript函数调用装置，其特征在于，所述第一调用装置包括：

第一参数收集单元，用于在主页面事件触发后在事件中收集主页面参数；

第一参数转换单元，用于将主页面参数转换成第一字符串；

第一参数传递单元，用于修改主页面中的嵌入页面的IFRAME标签，将所述第一字符串作为URL的锚；

第一参数提取单元，用于在嵌入页面注册定时控制事件，每隔预设时间从URL的锚中提取出主页面参数；

第一函数调取单元，用于在检测到主页面参数的数值改变时，将主页面参数作为函数参数调用嵌入页面的JavaScript函数。

8.根据权利要求7所述的跨域网页的JavaScript函数调用装置，其特征在于，第一参数转换单元还用于将主页面参数和一个新的GUID/随机数共同组合形成第一字符串。

9.根据权利要求6所述的跨域网页的JavaScript函数调用装置，其特征在于，第二调用装置包括：

第二参数收集单元，用于在嵌入页面事件触发后在事件中收集嵌入页面参数；

第二参数转换单元，用于将嵌入页面参数转换为第二字符串；

第二数传递单元，用于修改嵌入页面中的辅助页面的IFRAME标签，将所述第二字符串作为URL的查询参数；

第二参数提取单元，用于在辅助页面重新加载后，从URL的查询参数中提取出嵌入页面参数；

第二函数调取单元，用于在辅助页面中以嵌入页面参数作为函数参数，通过window.parent.parent调用主页面的JavaScript函数。

10.根据权利要求9所述的跨域网页的JavaScript函数调用装置，其特征在于，第二参数转换单元还用于将嵌入页面参数和一个新的GUID/随机数共同组合形成第二字符串。