显示页面内容的方法及装置制造方法及图纸

本申请公开了显示页面内容的方法及装置，所述方法包括：获取待显示内容的描述数据，所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量，以及页面显示样式信息；确定待显示内容所占的总页面高度；确定各个内容段落的高度；在浏览器窗口中展现待显示内容，并在浏览器窗口的可视区域内显示导航条；按照各个内容段落之间的高度比例对导航条进行分段，并显示分段标识；当操作焦点移动到导航条上的某位置时，根据页面高度与导航条的长度之间的比例，映射到页面中的目标位置，将页面滚动到所述目标位置处进行展现。通过本申请，能够提高页面内容的定位精度。

【技术实现步骤摘要】

本申请涉及网页显示
，特别是涉及显示页面内容的方法及装置。
技术介绍
在Web网页显示的过程中，在需要对查询到的大量数据进行显示时，现有技术中经常以列表的形式进行分页显示。例如，用户在某电商网站中查询某商品时，会将数据库中所有符合查询条件的商品记录信息读入到内存中，然后通过分页机制进行分页处理，然后根据用户的指示，每次分别从符合条件的记录中将规定数目的记录读取出来，并按照一定的顺序对商品记录信息进行显示。下面以返回可滚动的记录集来描述分页算法：(1)先假定每页显示的记录数pageSize＝10；(2)再获取满足条件的记录总数total＝rs.getRows()；(3)计算出总页数pageNumber＝total/pageSize；(4)当页面加载时，设定当前页为currentPage＝1，取记录的开始索引startIndex＝0，循环向后取pageSize个记录进行显示；(5)当使用导航条上的“首页”、“上一页”、“下一页”、“末页”、“转到第[n]页”时，按照以下规则进行定位：●首页：startIndex＝0，循环向后取pageSize个记录进行显示；●上一页：startIndex＝(currentPage-1)×pageSize，循环向后取pageSize个记录进行显示；●下一页：startIndex＝(currentPage+1)×pageSize，循环向后取pageSize个记录进行显示；●末页：startIndex＝(pageNumber-1)×pageSize，循环向后取total-startIndex个记录进行显示；●转到第[n]页：n的取值范围在1到pageNumber之间，startIndex＝(n-1)×pageSize，循环向后取pageSize个记录进行显示。这种分页显示的方式能够方便用户对浏览对象进行定位，但是在定位的精度上只能做到“页”的级别，因此，还有待进一步提高。
技术实现思路
本申请提供了显示页面内容的方法及装置，能够提高页面内容的定位精度。本申请提供了如下方案：一种显示页面内容的方法，包括：获取待显示内容的描述数据，所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量，以及页面显示样式信息；根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度；根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度；在浏览器窗口中展现待显示内容，并在浏览器窗口的可视区域内显示导航条；按照各个内容段落之间的高度比例对导航条进行分段，并显示分段标识；其中，每个分段分别对应一个内容段落，各个分段之间的长度比例与对应的内容段落之间的高度比例相同；当操作焦点移动到导航条上的某位置时，根据页面高度与导航条的长度之间的比例，映射到页面中的目标位置，将页面滚动到所述目标位置处进行展现。一种显示页面内容的装置，包括：描述数据获取单元，用于获取待显示内容的描述数据，所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量，以及页面显示样式信息；页面总高度确定单元，用于根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度；内容段落高度确定单元，用于根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度；导航条显示单元，用于在浏览器窗口中展现待显示内容，并在浏览器窗口的可视区域内显示导航条；导航条分段单元，用于按照各个内容段落之间的高度比例对导航条进行分段，并显示分段标识；其中，每个分段分别对应一个内容段落，各个分段之间的长度比例与对应的内容段落之间的高度比例相同；页面滚动单元，用于当操作焦点移动到导航条上的某位置时，根据页面高度与导航条的长度之间的比例，映射到页面中的目标位置，将页面滚动到所述目标位置处进行展现。根据本申请提供的具体实施例，本申请公开了以下技术效果：通过本申请，能够将所有的待显示内容显示在同一个页面内，并显示出导航条，在导航条中可以按照待显示内容所具有的内容段落数量以及各个内容段落在页面中所占的实际高度，对导航条进行分段，使得导航条上的每个分段分别对应一个内容段落，各个分段之间的长度比例与对应的内容段落之间的高度比例相同。这样，当操作焦点移动到导航条上的某位置时，可以根据页面高度与导航条的长度之间的比例，映射到页面中的目标位置，并将页面滚动到所述目标位置处进行展现。通过这种方式相当于实现了一种连续锚点的导航，对于浏览网页的用户而言，可以根据导航条上的段落标识，精确定位到页面的某位置处；对于页面的设计者而言，不必再对待显示内容进行分页，导航设计的过程也变得容易。进一步地，在导航条上显示段落标识时，还可以将各个内容段落的名称作为各自的段落标识，这种段落标识可以是预先人为设定的，或者可以是根据各个内容段落中的标题等信息进行自然语义分析后得到的，总之，可以起到对段落内容进行提示的作用，进一步方便了用户的浏览。另外，同样的待显示内容，可能能够从多个维度进行内容段落的划分，因此，也可以分别获取待显示内容在各个维度上的描述数据，在显示导航条时，分别显示各个维度对应的导航条，用户可以根据自己的需求选择任一导航条进行导航。当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本申请实施例提供的方法的流程图；图2是本申请实施例提供的导航条显示方式示意图；图3是本申请实施例提供的另一导航条显示方式示意图；图4是本申请实施例提供的装置的示意图。具体实施方式下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。参见图1，本申请实施例提供的显示页面内容的方法可运行于本文档来自技高网...

【技术保护点】
一种显示页面内容的方法，其特征在于，包括：获取待显示内容的描述数据，所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量，以及页面显示样式信息；根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度；根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度；在浏览器窗口中展现待显示内容，并在浏览器窗口的可视区域内显示导航条；按照各个内容段落之间的高度比例对导航条进行分段，并显示分段标识；其中，每个分段分别对应一个内容段落，各个分段之间的长度比例与对应的内容段落之间的高度比例相同；当操作焦点移动到导航条上的某位置时，根据页面高度与导航条的长度之间的比例，映射到页面中的目标位置，将页面滚动到所述目标位置处进行展现。

【技术特征摘要】
1.一种显示页面内容的方法，其特征在于，包括：
获取待显示内容的描述数据，所述描述数据包括待显示内容中包含的内容
元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落
包含的内容元素的数量，以及页面显示样式信息；
根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的
总页面高度；
根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定
各个内容段落的高度；
在浏览器窗口中展现待显示内容，并在浏览器窗口的可视区域内显示导航
条；
按照各个内容段落之间的高度比例对导航条进行分段，并显示分段标识；
其中，每个分段分别对应一个内容段落，各个分段之间的长度比例与对应的内
容段落之间的高度比例相同；
当操作焦点移动到导航条上的某位置时，根据页面高度与导航条的长度之
间的比例，映射到页面中的目标位置，将页面滚动到所述目标位置处进行展现。
2.根据权利要求1所述的方法，其特征在于，所述描述数据还包括：各
个内容段落的名称；
所述显示分段标识包括：
将各个分段对应的内容段落的名称作为各个分段的标识显示在所述导航
条上。
3.根据权利要求2所述的方法，其特征在于，通过以下方式获取各个内
容段落包含的内容元素的数量：
对各个内容元素的标签进行自然语义分析，根据分析结果与各个内容段落
名称的匹配程度，将各个内容元素划分到所属的内容段落中；
统计出各个内容段落包含的内容元素的数量。
4.根据权利要求1所述的方法，其特征在于，所述导航条上带有拖拽浮
标，所述当操作焦点移动到导航条上的某位置时，根据页面高度与导航条的长
度之间的比例，映射到页面中的目标位置包括：
当所述拖拽浮标被拖拽到导航条上的某位置时，根据页面高度与导航条的
长度之间的比例，映射到页面中的目标位置。
5.根据权利要求4所述的方法，其特征在于，还包括：
当用户滚动页面时，持续监听页面滚动后的页面位置，并反向计算出拖拽
浮标的相应位置，在导航条中显示拖拽浮标位置的变化。
6.根据权利要求1所述的方法，其特征在于，所述预置维度为多个，所
述在浏览器窗...

【专利技术属性】
技术研发人员：赵巍，於振华，刘洋洋，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY