一种基于消息传输的跨域IFRAME高度自适应方法及其系统技术方案

本发明专利技术公开了一种基于消息传输的跨域IFRAME高度自适应方法及其系统，其中，所述的方法包括：检测当前页面是否为嵌入另一父页面的子页面，若是，则获取当前子页面的子页面内容高度值；将获取的子页面内容高度值以消息的形式发送给对应的父页面；父页面接收子页面内容高度消息，根据消息来源查找子页面在父页面中对应的IFRAME；父页面根据子页面内容高度消息中的子页面内容高度值，更新父页面中对应的IFRAME的高度值。本发明专利技术提供的方法，子页面直接向父页面以消息形式发送子页面内容高度值，父页面根据接收到的子页面内容高度值，更新对应的IFRAME的高度值，无需在子页面中增加作为信息中转的IFRAME，浏览器的内存占用低；本方案也不涉及到服务器，节省服务器资源。

【技术实现步骤摘要】

本专利技术涉及网页开发
，具体涉及一种基于消息传输的跨域IFRAME高度自适应方法及其系统。
技术介绍
现有技术主要是依靠在跨域IFRAME页面(B)中嵌入同域IFRAME页面(A2)，通过URL参数将页面B的高度传递给A2，然后A2页面再更新页面B所在IFRAME的高度，通常具体的做法为：通过在域A下设置一个中转页面a，嵌入被嵌套B域下的页面b中，而b页面又嵌入在域A下的主界面m中。当浏览器访问页面m时载入页面b，触发页面b的onload事件获取自身页面的高度，然后页面b载入页面a，并将其高度做为参数赋值给页面a的location对象，页面a就可以通过location.hash获取页面b的高度。使用上述方式主要有以下几个缺点：(1)使用嵌套IFRAME效率低，一个IFRAME相当于一个完整的页面，浏览器内存占用高；(2)每次设置高度都实际对后台服务器发出请求，IFRAME高度自适应属于前台的逻辑，这种不访问后端数据的请求属于浪费服务器资源；(3)需要在页面中配置A2页面的地址，一旦A域名发生变化，也需要同步修改页面B中的地址；(4)当有多个域的页面都需要嵌入B域页面时，需要针对每个域进行重新配置，并且会在B域页面中增加每个域的嵌入IFRAME，更加低效。
技术实现思路
本专利技术所要解决的技术问题是提供一种基于消息传输的跨域IFRAME高度自适应方法及其系统，能够克服现有技术中的缺陷。本专利技术解决上述技术问题的技术方案如下：一方面，本专利技术提供了一种基于消息传输的跨域IFRAME高度自适应方法，包括：S1、检测当前页面是否为嵌入另一父页面的子页面，若是，则获取当前子页面的子页面内容高度值；S2、将获取的子页面内容高度值以消息的形式发送给对应的父页面；S3、父页面接收子页面发送的子页面内容高度值消息，根据消息来源查找子页面在父页面中对应的内嵌框架IFRAME；S4、父页面根据子页面内容高度值消息中的子页面内容高度值，更新子页面在父页面中对应的IFRAME的高度值。另一方面，本专利技术提供了一种基于消息传输的跨域IFRAME高度自适应系统，包括：检测单元，用于检测当前页面是否为嵌入另一父页面的子页面；高度获取单元，用于若所述检测单元检测到当前页面为嵌入另一父页面的子页面，则获取当前子页面的子页面内容高度值；发送单元，用于将获取的子页面内容高度值以消息的形式发送给对应的父页面；接收单元，用于供父页面接收子页面发送的子页面内容高度值消息；查找单元，用于根据消息来源查找子页面在父页面中对应的IFRAME；更新单元，用于根据子页面内容高度值消息中的子页面内容高度值，更新子页面在父页面中对应的IFRAME的高度值。本专利技术提供的一种基于消息传输的跨域IFRAME高度自适应方法及其系统，子页面直接向父页面以消息形式发送子页面内容高度，父页面根据接
收到的子页面内容高度，更新对应的IFRAME高度值，无需在子页面中增加IFRMAME，浏览器的内存占用低；本方案也不涉及到服务器，节省服务器资源。附图说明图1为本专利技术实施例一的一种基于消息传输的跨域IFRAME高度自适应方法流程图；图2为本专利技术实施例二的一种基于消息传输的跨域IFRAME高度自适应系统示意图。具体实施方式以下结合附图对本专利技术的原理和特征进行描述，所举实例只用于解释本专利技术，并非用于限定本专利技术的范围。实施例一、一种基于消息传输的跨域IFRAME高度自适应方法。下面结合图1对本实施例提供的方法进行说明。参见图1，本实施例提供的方法包括：S1、检测当前页面是否为嵌入另一父页面的子页面，若是，则获取当前子页面的子页面内容高度值。具体的，由于本实施例提供的方法主要适用于具有网页嵌入场景的，因此，首先需要检测当前页面是否为嵌入另一父页面的子页面，如果不是，则本实施例提供的方法不适用。如果检测到当前页面确实为嵌入另一父页面的子页面时，即当前页面为另有父页面的嵌入页面，则获取当前子页面的子页面内容高度值。S2、将获取的子页面内容高度值以消息的形式发送给对应的父页面。具体的，当获取到子页面的子页面内容高度值后，将获取的子页面内容高度值以消息的形式发送给子页面对应的父页面。具体的发送过程为：当前
子页面采用浏览器内置的window.postMessage()接口将获取的子页面内容高度值以消息的形式发送给对应的父页面。其中，在将获取的子页面内容高度值发送给对应的父页面时，将子页面内容高度值封装成事件对象，并将封装后的事件对象发送给父页面，其中，事件对象中包含事件数据属性和事件来源属性，事件数据属性为字符串信息，事件来源属性为子页面的window对象。其中，子页面(即被嵌入的页面)的主要处理程序代码为：S3、父页面接收子页面发送的子页面内容高度消息，根据消息来源查找到该子页面在父页面中对应的内嵌框架IFRAME。具体的，在父页面中配置监听程序，监听是否有来自外部的事件对象，子页面将封装后的事件对象发送给父页面时，父页面监听到子页面发送的事件对象，根据事件来源属性，即子页面的window对象，查找该子页面在父页面中对应的IFRAME，其中，子页面的window对象与父页面中的IFRAME具有一一对应关系。S4、父页面根据子页面内容高度值消息中的子页面内容高度值，更新该子页面在父页面中对应的IFRAME的高度值。具体的，当父页面接收到子页面发送的事件对象时，并判断事件对象中的事件数据属性，即字符串信息是否为子页面内容高度值信息，比如，判断字符串信息的格式是否为子页面内容高度值信息的预定格式，若字符串信息是子页面内容高度值信息，则从该字符串信息中提取出子页面内容高度值。
根据该子页面内容高度值，更新该子页面在父页面中对应的IFRAME的高度值。其中，父页面的主要处理程序代码为：实施例二、一种基于消息传输的跨域IFRAME高度自适应系统。下面结合图2对本实施例提供的系统进行描述。本实施例提供的系统包括检测单元101、高度获取单元102、封装单元103、发送单元104、接收单元105、查找单元106、判断单元107和更新单元108。检测单元101，主要用于检测当前页面是否为嵌入另一父页面的子页面。高度获取单元102，主要用于若所述检测单元101检测到当前页面为嵌入另一父页面的子页面，则获取当前子页面的子页面内容高度值。发送单元104，主要用于将高度获取单元102获取的子页面内容高度值以消息的形式发送给对应的父页面。封装单元103，主要用于将子页面内容高度值消息封装成事件对象，其中，事件对象中包括事件数据属性和事件来源属性。所述发送单元104还用于将封装后的事件对象以消息的形式发送给对应的父页面。其中，发送单元104采用浏览器内置的window.postMessage()接口将封装后的事件对象发送给对应的父页面。接收单元105，主要用于接收发送单元104发送的子页面内容高度值消息。查找单元106，主要用于根据子页面内容高度值消息的消息来源查找子页面在父页面中对应的内嵌框架IFRAME。其中，接收单元105具体用于接收所述发送单元104发送的封装后的事件对象；查找单元106具体用于根据事件对象中的事件来源属性，即子页面的window对象查找该子页面在父页面中对应的I本文档来自技高网...

【技术保护点】
一种基于消息传输的跨域IFRAME高度自适应方法，其特征在于，包括：S1、检测当前页面是否为嵌入另一父页面的子页面，若是，则获取当前子页面的子页面内容高度值；S2、将获取的子页面内容高度值以消息的形式发送给对应的父页面；S3、父页面接收子页面发送的子页面内容高度消息，根据消息来源查找子页面在父页面中对应的内嵌框架IFRAME；S4、父页面根据子页面内容高度消息中的子页面内容高度值，更新子页面在父页面中对应的IFRAME的高度值。

【技术特征摘要】
1.一种基于消息传输的跨域IFRAME高度自适应方法，其特征在于，包括：S1、检测当前页面是否为嵌入另一父页面的子页面，若是，则获取当前子页面的子页面内容高度值；S2、将获取的子页面内容高度值以消息的形式发送给对应的父页面；S3、父页面接收子页面发送的子页面内容高度消息，根据消息来源查找子页面在父页面中对应的内嵌框架IFRAME；S4、父页面根据子页面内容高度消息中的子页面内容高度值，更新子页面在父页面中对应的IFRAME的高度值。2.如权利要求1所述的基于消息传输的跨域IFRAME高度自适应方法，其特征在于，所述步骤S2具体包括：当前子页面采用浏览器内置的window.postMessage()接口将获取的子页面内容高度值以消息的形式发送给对应的父页面。3.如权利要求2所述的基于消息传输的跨域IFRAME高度自适应方法，其特征在于，所述步骤S2还包括：将子页面内容高度值封装成事件对象，将封装后的事件对象以消息的形式发送给对应的父页面，其中，事件对象中包含事件数据属性以及事件来源属性。4.如权利要求3所述的基于消息传输的跨域IFRAME高度自适应方法，其特征在于，所述步骤S3还包括：父页面接收子页面发送的事件对象，根据事件来源属性，即子页面的window对象，查找该子页面在父页面中对应的IFRAME，其中，子页面的window对象与父页面中的IFRAME具有一一对应关系。5.如权利要求4所述的基于消息传输的跨域IFRAME高度自适应方法，其特征在于，所述步骤S4具体包括：S41、父页面接收子页面发送的事件对象；S42、判断事件对象中的事件数据属性，即字符串信息是否为子页面内容高度值信息，若是，则从该字符串信息中提取出子页面内容高度值，若不是，则结束；S43、根据提取出的所述子页面内容高度值，更新该子页面在父页面中对应的IFRAME的高度值。6.一种基于消息传输的跨域IFRAME高度自适应系统...

【专利技术属性】
技术研发人员：刘嘉华，
申请(专利权)人：北京思特奇信息技术股份有限公司，
类型：发明
国别省市：北京;11