界面显示方法、装置及服务器制造方法及图纸

技术编号:26689915 阅读:10 留言:0更新日期:2020-12-12 02:39
本申请提供一种界面显示方法、装置及服务器。通过该界面显示方法,该电子设备通过主页面对应的第一网页文件,将主界面中的滚动条的当前滚动距离传递给子界面对应的第二网页文件,使得第二网页文件获取预设的显示内容进行显示。即子页面中的显示内容是基于当前滚动距离进行选择,相较于一次性全部加载第二网页文件的数据,能够提高子页面显示时的流畅程度。

【技术实现步骤摘要】
界面显示方法、装置及服务器
本申请涉及计算机领域,具体而言,涉及一种界面显示方法、装置及服务器。
技术介绍
在网页前端,有时为例预设的需求,需要通过iframe标签把一个子页面和内容嵌入在一主页面中。其中,子页面对应一个单独的网页文件,主页面对应另外一个单独的网页文件。由于主页面与子页面相互独立,因此,主页面的交互逻辑并不会影响子页面。因此,目前在针对嵌入了子页面的网页请求,服务器会将子页面对应的网页文件在一次性全部发送给请求设备,使得子页面提供一套完整的网页功能。当子网页文件较大时,不仅会给服务器带来较大的数据请求压力,同时,会带来较长的加载时间。
技术实现思路
为了克服现有技术中的至少一个不足,本申请的目的之一在于提供一种界面显示方法,应用于电子设备,所述方法包括:显示一网页界面,所述网页界面包括主页面以及嵌入在所述主页面中的子页面,所述主页面对应第一网页文件,所述子页面对应第二网页文件;通过所述第一网页文件,将所述主页面中的滚动条的当前滚动距离记录到预设数据结构;通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容,所述预设的显示内容用于在所述子页面进行显示。可选地,各所述显示内容分别对应所述子页面中的不同显示板块,所述第二网页文件记录有不同当前滚动距离与不同显示板块的对应关系;所述通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容的步骤,包括:根据所述对应关系,确定所述当前滚动距离对应的目标显示板块;获取所述目标显示板块对应的目标显示内容;将所述目标显示内容显示到所述目标显示板块。可选地,所述预设数据结构为所述第二网页文件对应URL中的Hash值;所述通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容之前,所述方法还包括:通过所述第二网页文中的window.addEventListener方法获取所述Hash值;根据所述Hash值获得所述当前滚动距离。可选地,多个所述第二网页文件分别对应不同的子页面标识,所述多个子页面标识显示于所述主页面;所述方法还包括:根据选中的目标子页面标识,获取所述目标子页面标识对应的目标第二网页文件;将所述第二网页文件显示至所述子页面。可选地,所述方法还包括:第一次显示所述网页界面时,获取预设的初始第二网页文件;将所述初始第二网页文件显示至所述子页面。可选地,所述初始第二网页文件的子页面标识存储在数据结构Session中。本申请实施例的目的之二在于提供一种界面显示装置,应用于电子设备,所述界面显示装置包括:输出模块,用于显示一网页界面,所述网页界面包括主页面以及嵌入在所述主页面中的子页面,所述主页面对应第一网页文件,所述子页面对应第二网页文件;处理模块,用于通过所述第一网页文件,将所述主页面中的滚动条的当前滚动距离记录到预设数据结构;所述处理模块,还用于通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容。可选地,各所述显示内容分别对应所述子页面中的不同显示板块,所述第二网页文件记录有不同当前滚动距离与不同显示板块的对应关系;所述处理模块,具体根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容的方式包括:根据所述对应关系,确定所述当前滚动距离对应的目标显示板块;获取所述目标显示板块对应的目标显示内容。可选地,多个所述第二网页文件分别对应不同的子页面标识,所述多个子页面标识显示于所述主页面,所述处理模块还用于:根据选中的目标子页面标识,获取所述目标子页面标识对应的目标第二网页文件;将所述第二网页文件显示至所述子页面。本申请实施例的目的之三在于提供一种服务器,所述服务器存储有预设网页文件,当所述服务器获取到电子设备发送的获取请求时,将所述预设网页文件发送给所述电子设备,使得所述电子设备运行所述预设网页文件时,实现所述界面显示方法。相对于现有技术而言,本申请具有以下有益效果:本申请实施例提供一种界面显示方法、装置及服务器。通过该界面显示方法,该电子设备通过主页面对应的第一网页文件,将主界面中的滚动条的当前滚动距离传递给子界面对应的第二网页文件,使得第二网页文件获取预设的显示内容进行显示。即子页面中的显示内容是基于当前滚动距离进行选择,相较于一次性全部加载第二网页文件的数据,能够提高子页面显示时的流畅程度。附图说明为了更清楚地说明本申请实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本申请的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。图1为本申请实施例提供的主页面与子页面示意图;图2为本申请实施例提供的电子设备;图3为本申请实施例提供的界面显示方法的步骤流程示意图之一;图4为本申请实施例提供的界面显示方法的步骤流程示意图之二;图5为本申请实施例提供的子页面与显示板块示意图;图6为本申请实施例提供的界面显示方法的步骤流程示意图之三;图7为本申请实施例提供的网络统计信息显示页面示意图;图8为本申请实施例提供的界面显示装置的结构示意图。图标:50-第一界面,51-第一滚动条;60-第二界面;61-第二滚动条;100-电子设备;110-界面显示装置;120-存储器;130-处理器;140-通信单元;200-子页面;210-显示板块;1101-输出模块;1102-处理模块。具体实施方式为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此,以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围,而是仅仅表示本申请的选定实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。在本申请的描述中,术语“第一”、“第二”、“第三”等仅用于区分描述,而不能理解为指示或暗示相对重要性。在网页前端,有时为例预设的需求,需要通过iframe标签把一个子页面和内容嵌入在一主页面中。由于主页面与子页面相互独立,因此,主页面的交互逻辑并不会影响子页面。因此,目前在针对嵌入了子页面的网页请求,服务器会将子页面对应的网页文件在一次性本文档来自技高网...

【技术保护点】
1.一种界面显示方法,其特征在于,应用于电子设备,所述方法包括:/n显示一网页界面,所述网页界面包括主页面以及嵌入在所述主页面中的子页面,所述主页面对应第一网页文件,所述子页面对应第二网页文件;/n通过所述第一网页文件,将所述主页面中的滚动条的当前滚动距离记录到预设数据结构;/n通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容,所述预设的显示内容用于在所述子页面进行显示。/n

【技术特征摘要】
1.一种界面显示方法,其特征在于,应用于电子设备,所述方法包括:
显示一网页界面,所述网页界面包括主页面以及嵌入在所述主页面中的子页面,所述主页面对应第一网页文件,所述子页面对应第二网页文件;
通过所述第一网页文件,将所述主页面中的滚动条的当前滚动距离记录到预设数据结构;
通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容,所述预设的显示内容用于在所述子页面进行显示。


2.根据权利要求1所述的界面显示方法,其特征在于,各所述显示内容分别对应所述子页面中的不同显示板块,所述第二网页文件记录有不同当前滚动距离与不同显示板块的对应关系;
所述通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容的步骤,包括:
根据所述对应关系,确定所述当前滚动距离对应的目标显示板块;
获取所述目标显示板块对应的目标显示内容。


3.根据权利要求1所述的界面显示方法,其特征在于,所述预设数据结构为所述第二网页文件对应URL中的Hash值;所述通过所述第二网页文件,根据所述预设数据结构中的所述当前滚动距离获取预设的显示内容之前,所述方法还包括:
通过所述第二网页文中的window.addEventListener方法获取所述Hash值;
根据所述Hash值获得所述当前滚动距离。


4.根据权利要求1所述的界面显示方法,其特征在于,多个所述第二网页文件分别对应不同的子页面标识,所述多个子页面标识显示于所述主页面;所述方法还包括:
根据选中的目标子页面标识,获取所述目标子页面标识对应的目标第二网页文件;
将所述第二网页文件显示至所述子页面。


5.根据权利要求4所述的界面显示方法,其特征在于,所述方法还包括:
第一次显示所述网页界面时,获取预设的初始第二网页文件;
将所述初始第...

【专利技术属性】
技术研发人员:黄圣林
申请(专利权)人:成都知道创宇信息技术有限公司
类型:发明
国别省市:四川;51

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1