CN104050274A - 一种html页面嵌套方法及装置 - Google Patents

Abstract

本发明实施例提供一种HTML页面嵌套方法及装置，其中方法包括：在第一层设置主窗口，所述主窗口为原生视图，所述第一层对应帧布局；在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。本发明实施例实现页面嵌套的速度更快，效率更高，同时所安装的文件量较小。

Description

一种HTML页面嵌套方法及装置

技术领域

本发明涉及HTML(HyperText Markup language，超级文本标记语言)技术领域，更具体地说，涉及一种HTML页面嵌套方法及装置。

背景技术

随着互联网的蓬勃发展，在web开发中为了更细粒度的控制HTML页面的功能，通常需要使用frameset或者iframe来实现HTML页面的嵌套，HTML页面嵌套是指多个HTML页面之间可以任意的覆盖；iframe为HTML标签，iframe元素会创建包含另外一个文档的内联框架。

目前，实现HTML页面嵌套的方式主要是通过ajax技术(AsynchronousJavascript+XML，创建交互式网页应用的网页开发技术)达到在页面中嵌套子页面的效果，然而这种方式需要电子设备内装载与ajax技术相应的，且容量较大的脚本和文件，在进行HTML页面嵌套时，解析对应的脚本和文件，才可完成页面布局，实现HTML页面的嵌套；这种方式页面嵌套的速度较慢，效率较低，且需安装容量较大的文件。

发明内容

有鉴于此，本发明实施例提供一种HTML页面嵌套方法及装置，以解决现有技术所存在的实现HTML页面嵌套的速度较慢，效率较低，且需安装容量较大的文件的问题。

为实现上述目的，本发明实施例提供如下技术方案：

一种HTML页面嵌套方法，包括：

在第一层设置主窗口，所述主窗口为原生Native视图，所述第一层对应FrameLayout帧布局；

在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。

其中，所述采用帧布局方式在所述第二层之上设置与所述主页面相嵌套的页面包括：

在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部；

和/或，所述采用帧布局方式在所述第一层之上设置与所述主页面相嵌套的页面包括：

在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

其中，所述与所述主页面相嵌套的页面包括设置在所述第二层的浮动页面，所述主页面和所述浮动页面均为网络视图WebView组件；所述方法还包括：

在检测到弹动响应事件时，通过所述主页面和所述浮动页面所在的WebView组件与所述第一层之间的LinearLayout线性布局节点，实现主页面和浮动页面的弹动。

其中，所述与所述主页面相嵌套的页面包括设置在所述第二层的浮动页面，所述方法还包括：

采用动画方式打开或关闭所述主页面和浮动页面。

其中，所述方法还包括：

将预定页面控制方法封装成原生插件，并将Native接口转化为JS接口，以便所述原生插件的调用。

其中，所述方法还包括：

在显示页面时，全屏显示所述Native视图和主页面。

本发明实施例还提供一种HTML页面嵌套装置，包括：

第一设置模块，用于在第一层设置主窗口，所述主窗口为原生Native视图，所述第一层对应FrameLayout帧布局；

第二设置模块，用于在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

第三设置模块，用于在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。

其中，所述第二设置模块包括：

顶页面和底页面设置单元，用于在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部；

和/或，浮动页面设置单元，用于在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

其中，所述与所述主页面相嵌套的页面包括设置在所述第二层的浮动页面，所述主页面和所述浮动页面均为网络视图WebView组件；所述装置还包括：

弹动模块，用于在检测到弹动响应事件时，通过所述主页面和所述浮动页面所在的WebView组件与所述第一层之间的LinearLayout线性布局节点，实现主页面和浮动页面的弹动；

和/或，动画模块，用于采用动画方式打开或关闭所述主页面和浮动页面。

其中，所述装置还包括：

封装转化模块，用于将预定页面控制方法封装成原生插件，并将Native接口转化为JS接口，以便所述原生插件的调用。

基于上述技术方案，本发明实施例提供的HTML页面嵌套方法，在第一层设置主窗口，并且所述第一层对应帧布局，采用帧布局的方式，则可在第一层之上覆盖第二层，并在第二层设置主页面；同时，采用帧布局的方式可在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面，实现页面的相互嵌套。本发明实施例提供的HTML页面嵌套方法采用帧布局的方式实现了页面嵌套，相比于现有采用ajax技术实现页面嵌套的方式，本发明实施例采用原生布局，按照帧布局方式依次在各层设置页面，不需要通过解析ajax对应的脚本和文件实现页面布局，实现页面嵌套的速度更快，效率更高，同时所安装的文件量较小。

附图说明

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

图1为本发明实施例提供的HTML页面嵌套方法的流程图；

图2为本发明实施例提供的HTML页面嵌套方法的另一流程图；

图3为本发明实施例提供的HTML页面嵌套方法的再一流程图；

图4为本发明实施例提供的页面布局示意图；

图5为本发明实施例提供的HTML页面嵌套方法的又一流程图；

图6为本发明实施例提供的页面布局的另一示意图；

图7为本发明实施例提供的HTML页面嵌套装置的结构框图；

图8为本发明实施例提供的第三设置模块的结构框图；

图9为本发明实施例提供的第三设置模块的另一结构框图；

图10为本发明实施例提供的HTML页面嵌套装置的另一结构框图；

图11为本发明实施例提供的HTML页面嵌套装置的再一结构框图；

图12为本发明实施例提供的HTML页面嵌套装置的又一结构框图。

具体实施方式

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

图1为本发明实施例提供的HTML页面嵌套方法的流程图，应用方法可应用于电子设备，特别是移动设备中，参照图1，该方法可以包括：

步骤S100、在第一层设置主窗口，所述主窗口为Native视图，所述第一层对应帧布局；

可选的，第一层可以为Window层，在本发明实施例中，Window层可对应帧布局(FrameLayout)，帧布局即为可以一层一层往上覆盖的布局，如子view是覆盖在父View之上的。

可选的，主窗口可为Native(原生)视图。

步骤S110、在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

主页面(main页面)可对应一个HTML页面；

可选的，在进行页面的显示时，本发明实施例可控制主窗口所对应的Native视图和主页面全屏展示。

步骤S120、在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。

可选的，与主页面相嵌套的页面可以是设置在第二层，也可以是设置在第三层(第三层可采用帧布局方式覆盖于第二层之上)，具体可视应用情况而定。

本发明实施例提供的HTML页面嵌套方法，在第一层设置主窗口，并且所述第一层对应帧布局，采用帧布局的方式，则可在第一层之上覆盖第二层，并在第二层设置主页面；同时，采用帧布局的方式可在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面，实现页面的相互嵌套。本发明实施例提供的HTML页面嵌套方法采用帧布局的方式实现了页面嵌套，相比于现有采用ajax技术实现页面嵌套的方式，本发明实施例采用原生布局，按照帧布局方式依次在各层设置页面，不需要通过解析ajax对应的脚本和文件实现页面布局，实现页面嵌套的速度更快，效率更高，同时所安装的文件量较小。

本发明实施例提供的HTML页面嵌套方法不会影响已有的HTML标签及JS(javascript，一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言)方法的使用，用户仍可使用标准的页面跳转及切换方式，仅需在原来的API(Application ProgrammingInterface，应用程序编程接口)基础之上提供一套与帧布局的窗口管理相关的API即可。

可选的，本发明提供的HTML页面嵌套方法可通过frame和frameset标签定义HTML页面，并且可基于混合应用(Hybrid App)的场景。混合应用，是指同时使用网页语言与程序语言开发介于Web应用和移动原生应用之间的应用。

可选的，本发明实施例可在第二层之上设置顶页面(Top页面)和底页面(Bottom页面)，实现与主页面的嵌套，顶页面和底页面均可对应一个HTML页面，可对应相同的HTML页面，也可对应不同的HTML页面；在进行页面显示时，顶页面可作为主页面的头部工具栏进行展示，底页面可作为主页面的底部工具栏进行展示。图2示出了本发明实施例提供的HTML页面嵌套方法的另一流程图，参照图2，该方法可以包括：

步骤S200、在第一层设置主窗口，所述主窗口为Native视图，所述第一层对应帧布局；

步骤S210、在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

步骤S220、在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部。

可选的，本发明实施例可在第一层之上设置浮动页面，实现与主页面的嵌套，浮动页面可对应一个HTML页面，在进行页面显示时，浮动页面可在设定位置显示，设定位置可以为任意位置，具体可视实际情况而定。图3示出了本发明实施例提供的HTML页面嵌套方法的再一流程图，参照图3，该方法可以包括：

步骤S300、在第一层设置主窗口，所述主窗口为Native视图，所述第一层对应帧布局；

步骤S310、在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

步骤S320、在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

可选的，顶页面，底页面和浮动页面可同时设置，对应的，图4示出了页面布局示意图，可进行参照。

对应的，图5示出了本发明实施例提供的HTML页面嵌套方法的又一流程图，参照图5，该方法可以包括：

步骤S400、在第一层设置主窗口，所述主窗口为Native视图，所述第一层对应帧布局；

步骤S410、在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

步骤S420、在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部；

步骤S430、在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

值得注意的是，步骤S420和步骤S430之间没有明显的先后顺序。

本发明实施例中，主窗口所在的第一层对应FrameLayout布局，通过FrameLayout布局可保证主窗口的子节点(主页面、顶页面、底页面、浮动页面)可以依次覆盖在下一层，实现页面的嵌套。

可选的，在本发明实施例中，主页面和浮动页面可支持弹动效果，即支持“上拉加载更多”和“下拉刷新”事件；至于加载和刷新的具体内容可视具体的业务而定，这种弹动通常用于列表，如浏览新闻列表时通常会有上拉和下拉事件。在本发明实施例中，可设置主页面和浮动页面支持弹动效果，当监听到上拉和下拉操作之后将隐藏的视图展示出来，展示的同时刷新当前页面数据。

具体的，在主页面和浮动页面弹动效果的实现上，主页面和浮动页面可以为WebView(网络视图)组件，主页面和浮动页面所在的WebView组件并不是第一层的直接子节点，主页面和浮动页面所在的WebView组件与第一层之间可具有LinearLayout(线性布局)节点，在检测到弹动响应事件时，可通过主页面和浮动页面所在的WebView组件与第一层之间的LinearLayout节点，实现主页面和浮动页面的弹动；其中，LinearLayout可以实现WebView组件的水平排列和垂直排列。对应的，图6示出了页面布局的另一示意图，可进行参照。

可选的，在本发明实施例中，主页面和浮动页面的打开或关闭可支持动画效果，并且采用原生视图动画实现，包括旋转、平移、缩放、透明度改变等动画效果；由于在原生开发中原生视图展示时是可以通过setAnimation和startAnimation等方法设置窗口的打开动画，原生API中直接提供了动画的实现方式，设定该方法的调用方式即可采用动画方式打开或关闭所述主页面和浮动页面。

在完成页面嵌套的布局后，本发明实施例可将与页面控制相关的方法(主要包括打开、关闭页面以及页面通信等方法)封装成原生插件，并将Native(原生)接口转化为JS接口，以便前端开发人员调用所述原生插件，实现页面的控制。

本发明实施例提供的页面嵌套方法至少具有如下优点：

可以灵活定义页面窗口布局，从而灵活控制页面，并且页面打开、关闭动画由原生动画实现，有较好的用户体验；

用户不需要编写大量代码就可以快速实现页面的弹动效果(页面刷新和下载机制)；

使用原生布局来实现页面管理，不用靠浏览器内核解析ajax对应的脚本和文件实现页面布局，实现页面嵌套的速度更快，效率更高，同时所安装的文件量较小，页面嵌套的实现更为简便。

下面对本发明实施例提供的HTML页面嵌套装置进行介绍，下文描述的HTML页面嵌套装置与上文描述的HTML页面嵌套方法可相互对应参照。

图7为本发明实施例提供的HTML页面嵌套装置的结构框图，该装置可应用于电子设备，特别是移动设备，参照图7，该装置可以包括：

第一设置模块100，用于在第一层设置主窗口，所述主窗口为Native视图，所述第一层对应帧布局；

第二设置模块200，用于在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

第三设置模块300，用于在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。

本发明实施例提供的HTML页面嵌套装置，在第一层设置主窗口，并且所述第一层对应帧布局，采用帧布局的方式，则可在第一层之上覆盖第二层，并在第二层设置主页面；同时，采用帧布局的方式可在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面，实现页面的相互嵌套。本发明实施例提供的HTML页面嵌套装置采用帧布局的方式实现了页面嵌套，相比于现有采用ajax技术实现页面嵌套的方式，本发明实施例采用原生布局，按照帧布局方式依次在各层设置页面，不需要通过解析ajax对应的脚本和文件实现页面布局，实现页面嵌套的速度更快，效率更高，同时所安装的文件量较小。

本发明实施例提供的HTML页面嵌套装置不会影响已有的HTML标签及JS(javascript，一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言)方法的使用，用户仍可使用标准的页面跳转及切换方式，仅需在原来的API(Application ProgrammingInterface，应用程序编程接口)基础之上提供一套与帧布局的窗口管理相关的API即可。

可选的，本发明实施例可在第二层之上设置顶页面和底页面，实现与主页面的嵌套；对应的，图8示出了本发明实施例提供的第三设置模块300的一种可选结构，参照图8，第三设置模块300可以包括：

顶页面和底页面设置单元310，用于在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部。

可选的，本发明实施例可在第一层之上设置浮动页面，实现与主页面的嵌套；对应的，图9示出了本发明实施例提供的第三设置模块300的另一种可选结构，参照图9，第三设置模块300可以包括：

浮动页面设置单元320，用于在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

可选的，图9所示第三设置模块300也可包括顶页面和底页面设置单元310，即顶页面，底页面和浮动页面可同时设置。

可选的，主页面和浮动页面可支持弹动效果，且主页面和浮动页面均为WebView组件。即主页面和浮动页面可支持“上拉加载更多”和“下拉刷新”事件；至于加载和刷新的具体内容可视具体的业务而定，这种弹动通常用于列表，如浏览新闻列表时通常会有上拉和下拉事件。在本发明实施例中，可设置主页面和浮动页面支持弹动效果，当监听到上拉和下拉操作之后将隐藏的视图展示出来，展示的同时刷新当前页面数据。对应的，图10示出了本发明实施例提供的HTML页面嵌套装置的另一结构框图，结合7和图10所示，该装置还可以包括：

弹动模块400，用于在检测到弹动响应事件时，通过所述主页面和所述浮动页面所在的WebView组件与所述第一层之间的线性布局节点，实现主页面和浮动页面的弹动。

可选的，主页面和浮动页面可采用动画方式打开或关闭；对应的，图11示出了本发明实施例提供的HTML页面嵌套装置的再一结构框图，结合7和图11所示，该装置还可以包括：

动画模块500，用于采用动画方式打开或关闭所述主页面和浮动页面。

可选的，图11所示装置还可以包括弹动模块400。

可选的，在完成页面嵌套的布局后，本发明实施例可实现对页面的控制。对应的，图12示出了本发明实施例提供的HTML页面嵌套装置的又一结构框图，结合7和图12所示，该装置还可以包括：

封装转化模块600，用于将预定页面控制方法封装成原生插件，并将Native接口转化为JS接口，以便所述原生插件的调用。

本发明实施例提供的HTML页面嵌套装置实现页面嵌套的速度更快，效率更高，同时所安装的文件量较小，页面嵌套的实现更为简便。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种HTML页面嵌套方法，其特征在于，包括：

在第一层设置主窗口，所述主窗口为原生Native视图，所述第一层对应FrameLayout帧布局；

在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。

2.根据权利要求1所述的HTML页面嵌套方法，其特征在于，所述采用帧布局方式在所述第二层之上设置与所述主页面相嵌套的页面包括：

在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部；

和/或，所述采用帧布局方式在所述第一层之上设置与所述主页面相嵌套的页面包括：

在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

3.根据权利要求1所述的HTML页面嵌套方法，其特征在于，所述与所述主页面相嵌套的页面包括设置在所述第二层的浮动页面，所述主页面和所述浮动页面均为网络视图WebView组件；所述方法还包括：

在检测到弹动响应事件时，通过所述主页面和所述浮动页面所在的WebView组件与所述第一层之间的LinearLayout线性布局节点，实现主页面和浮动页面的弹动。

4.根据权利要求1所述的HTML页面嵌套方法，其特征在于，所述与所述主页面相嵌套的页面包括设置在所述第二层的浮动页面，所述方法还包括：

采用动画方式打开或关闭所述主页面和浮动页面。

5.根据权利要求1所述的HTML页面嵌套方法，其特征在于，所述方法还包括：

将预定页面控制方法封装成原生插件，并将Native接口转化为JS接口，以便所述原生插件的调用。

6.根据权利要求1-5任一项所述的HTML页面嵌套方法，其特征在于，所述方法还包括：

在显示页面时，全屏显示所述Native视图和主页面。

7.一种HTML页面嵌套装置，其特征在于，包括：

第一设置模块，用于在第一层设置主窗口，所述主窗口为原生Native视图，所述第一层对应FrameLayout帧布局；

第二设置模块，用于在第二层设置主页面，所述第二层采用帧布局方式覆盖于所述第一层之上；

第三设置模块，用于在设置完成所述主页面后，采用帧布局方式在所述第一层或所述第二层之上设置与所述主页面相嵌套的页面。

8.根据权利要求7所述的HTML页面嵌套装置，其特征在于，所述第二设置模块包括：

顶页面和底页面设置单元，用于在第三层上设置顶页面和底页面，所述第三层采用帧布局方式覆盖于所述第二层之上，并在显示页面时，控制所述顶页面显示于所述主页面的顶部，控制所述底页面显示于所述主页面的底部；

和/或，浮动页面设置单元，用于在所述第二层设置浮动页面，并在显示页面时，控制所述浮动页面显示于设定位置。

9.根据权利要求7所述的HTML页面嵌套装置，其特征在于，所述与所述主页面相嵌套的页面包括设置在所述第二层的浮动页面，所述主页面和所述浮动页面均为网络视图WebView组件；所述装置还包括：

弹动模块，用于在检测到弹动响应事件时，通过所述主页面和所述浮动页面所在的WebView组件与所述第一层之间的LinearLayout线性布局节点，实现主页面和浮动页面的弹动；

和/或，动画模块，用于采用动画方式打开或关闭所述主页面和浮动页面。

10.根据权利要求7所述的HTML页面嵌套装置，其特征在于，所述装置还包括：

封装转化模块，用于将预定页面控制方法封装成原生插件，并将Native接口转化为JS接口，以便所述原生插件的调用。