CN106372251A - 一种返回页面显示位置的方法和装置 - Google Patents

Abstract

本发明提供一种返回页面显示位置的方法和装置，能够使得在页面关闭后，重新打开该页面也能够加载到上次的浏览位置，并且可减少页面加载时的用户等待时间，使页面在第一时间返回上次浏览位置。本发明的返回页面显示位置的方法，包括：当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。

Description

一种返回页面显示位置的方法和装置

技术领域

本发明涉及计算机及其软件技术领域，特别地涉及一种返回页面显示位置的方法和装置。

背景技术

用户通过移动端访问篇幅较长的页面，例如商品详情页或是内嵌H5页面时，在浏览过程中，如果点击进入了下一个页面或是误关闭了该页面，如果想返回该页面并继续从先前浏览的位置继续浏览，通常需要花时间重新拖动页面或是加载到先前访问的位置，存在费力、耗时、用户体验较差等问题，尤其在移动端使用场景下，上述问题尤为明显。

目前解决上述问题的常见方案为：记录用户上一页面访问时垂直滚动条最后的停留位置，在返回该上一页面时，重新加载页面并设定滚动条到记录的位置。微信内置多应用使用该方案。该方案具体步骤包括：

页面js(Javascript)记录用户访问页面最后scrollTop值；

将scrollTop值数据存储在sessionStorage中；

用户触发返回上一页面动作后，重新加载上一页面，读取已存储的scrollTop值；

设置页面scrollTop值为读取的值；

加载完毕后，用户屏幕焦点定位到上次浏览位置。

然而，上述方案只适用于在当前页面打开其他页面的情况。由于数据存储在sessionStorage中，当前页面关闭后，重打开该页面浏览时，sessionStorage会自动清空，该返回效果无法使用。此外，由于该方案需要重新加载上一页面，如果页面中存在多次ajax(异步JavaScript和XML)加载内容时，重载页面时间较长，用户无法在第一时间被定位到上次浏览位置，而长时间停留在页面首屏，用户体验较差，特别是通过移动端访问页面，网络状况较差时该情况尤为明显。

发明内容

有鉴于此，本发明提供一种返回页面显示位置的方法和装置，使得在页面关闭后，重新打开该页面也能够加载到上次的浏览位置，并且可减少页面加载时的用户等待时间，使页面在第一时间返回上次浏览位置。

为实现上述目的，根据本发明的一个方面，提供了一种返回页面显示位置的方法。

一种返回页面显示位置的方法，包括：当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。

可选地，所述页面的显示位置信息和显示页面快照保存在浏览器的本地缓存中。

可选地，通过层叠样式表控制所述显示页面快照的显示，使得所述显示页面快照显示在页面顶层或者隐藏。

可选地，返回所述页面的显示位置之后，还包括：删除所述浏览器的本地缓存中保存的所述显示位置信息和所述显示页面快照。

可选地，所述结束页面显示的操作包括关闭当前页面的行为以及通过所述当前页面跳转到其他页面的行为，所述重新加载所述页面的操作包括重启所述当前页面的行为以及从所述跳转的其他页面返回所述当前页面的行为。

根据本发明的另一方面，提供了一种返回页面显示位置的装置。

一种返回页面显示位置的装置，包括：存储模块，用于当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；加载模块，用于当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。

可选地，存储模块还用于：将所述页面的显示位置信息和显示页面快照保存在浏览器的本地缓存中。

可选地，所述加载模块还用于：通过层叠样式表控制所述显示页面快照的显示，使得所述显示页面快照显示在页面顶层或者隐藏。

可选地，还包括删除模块，所述删除模块用于：在返回所述页面的显示位置之后，删除所述浏览器的本地缓存中保存的所述显示位置信息和所述显示页面快照。

可选地，所述结束页面显示的操作包括关闭当前页面的行为以及通过所述当前页面跳转到其他页面的行为，所述重新加载所述页面的操作包括重启所述当前页面的行为以及从所述跳转的其他页面返回所述当前页面的行为。

根据本发明的再一方面，提供了一种返回页面显示位置的装置。

一种返回页面显示位置的装置，包括：存储器和处理器，其中，所述存储器存储指令；所述处理器执行所述指令用于：当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。

根据本发明的技术方案，当监听到结束页面显示的操作时，保存页面的显示位置信息和显示页面快照，当监听到重新加载页面的操作时，读取显示页面快照并显示在页面顶层，并且根据显示位置信息加载页面，在页面加载完成后隐藏显示页面快照以返回页面的显示位置。使用本发明的技术方案，使得在页面关闭后，重新打开该页面也能够加载到上次的浏览位置，并且通过移动端访问页面或是多ajax内容加载时，可减少页面加载时的用户等待时间，使页面在第一时间返回上次浏览位置。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的返回页面显示位置的方法的主要步骤示意图；

图2是根据本发明实施例的返回页面显示位置的方法的优选流程示意图；

图3是根据本发明实施例的返回页面显示位置的装置的主要模块示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的返回页面显示位置的方法的主要步骤示意图。

根据本发明实施例的返回页面显示位置的方法主要包括如下的步骤S11至步骤S12。

步骤S11：当监听到结束页面显示的操作时，保存页面的显示位置信息和显示页面快照。

结束页面显示的操作包括关闭当前页面的行为以及通过当前页面跳转到其他页面的行为。具体地，关闭当前页面例如，用户通过当前页面A进入另一个页面B(页面B已将页面A更新掉)，并且之后将该页面B关闭的情况，或者，用户浏览当前页面A因操作失误等原因关闭了该页面A的情况。通过当前页面跳转到其他页面例如，用户通过当前页面A进入另一个页面B，而不关闭页面B的情况。

页面的显示位置信息和显示页面快照保存在浏览器的本地缓存中，例如缓存至当前浏览器的localStorage中。其中，页面的显示位置信息例如页面滚动条的位置信息，具体可以为scrollTop值。显示页面快照为用户当前浏览的显示页面的截屏。并且，对于上述显示页面快照的获取和保存，具体可以通过页面js(javascript)将用户当前浏览的显示页面截取为图片，并将得到的图片转换成base64编码格式的长字符串进行存储，也可以通过XML页面获取当前浏览的显示页面的所有片段，然后将这些片段以字符串的形式进行存储。

步骤S12：当监听到重新加载页面的操作时，读取显示页面快照并显示在页面顶层，并且根据显示位置信息加载页面，在页面加载完成后隐藏显示页面快照以返回页面的显示位置。

重新加载页面的操作包括重启当前页面的行为以及从跳转的其他页面返回当前页面的行为。具体地，重启当前页面例如上述用户通过当前页面A进入另一个页面B之后，用户关闭该页面B，再重启浏览器，重新打开页面B，并从从页面B返回页面A的情况，或者，用户浏览当前页面A因操作失误等原因关闭了该页面A，再重启浏览器打开页面A的情况。从跳转的其他页面返回当前页面例如，用户通过当前页面A进入另一个页面B，而不关闭页面B，再通过页面B返回页面A的情况。

读取显示页面快照时，可从本地缓存中取出保存的字符串形式的显示页面快照信息，由于浏览器具备支持将该字符串形式的显示快照信息转成图片的功能，从而能够将保存的显示页面快照以显示页面截屏等形式展示给用户。并且其中，通过层叠样式表(CSS)控制显示页面快照的显示，使得显示页面快照显示在页面顶层或者隐藏。具体地，可以在页面的JavaScript中注册一个控制显示页面快照的显示的函数，并在该函数中配置两个属性，分别表示是否显示该显示页面快照以及该显示页面快照的显示层级，当页面加载完成时，触发页面加载完成事件，并执行该函数，并根据该函数中的上述两个属性控制显示页面快照显示在页面顶层或者隐藏。

在控制显示页面快照的显示时，层叠样式表(CSS)还用于配置显示页面快照的显示样式以便将显示页面快照显示在合适的位置，配置显示页面快照的显示样式具体可以包括：配置显示页面快照的显示位置、显示的像素大小、将显示页面快照的图片设置到最高层(即页面顶层)、将显示页面快照的图片设置为平铺等。

返回页面的显示位置之后，还可以删除浏览器的本地缓存中保存的显示位置信息和显示页面快照，实现平滑切换，并且可以避免再次监听到重新加载页面的操作时，仍使用本次保存的显示位置信息和显示页面快照。

本发明实施例的返回页面显示位置的方法的优选流程示意图如图2所示。在JavaScript中通过行为监听的方式，监听是否有用户关闭当前页面的行为或者从当前页面跳转到其他页面的行为，若有，则将页面滚动条的位置信息保存在浏览器的本地缓存，同时将显示页面快照也保存在浏览器的本地缓存。同样，通过行为监听的方式，监听是否有用户重启当前页面的行为以及从跳转的其他页面返回当前页面的行为，若有，则从浏览器的本地缓存中读取显示页面快照并显示在页面顶层，然后，从该本地缓存中读取页面滚动条的位置信息，并根据该位置信息加载页面，在页面加载完成后隐藏显示页面快照，最后，删除该本地缓存中的滚动条位置信息和显示页面快照。

图3是根据本发明实施例的返回页面显示位置的装置的主要模块示意图。

如图3所示，本发明实施例的返回页面显示位置的装置30主要包括存储模块31和加载模块32。其中，存储模块31用于当监听到结束页面显示的操作时，保存页面的显示位置信息和显示页面快照；加载模块32用于当监听到重新加载页面的操作时，读取显示页面快照并显示在页面顶层，并且根据显示位置信息加载页面，在页面加载完成后隐藏显示页面快照以返回页面的显示位置。

其中，结束页面显示的操作包括关闭当前页面的行为以及通过当前页面跳转到其他页面的行为，重新加载页面的操作包括重启当前页面的行为以及从跳转的其他页面返回当前页面的行为。

存储模块31还可以用于将页面的显示位置信息和显示页面快照保存在浏览器的本地缓存中。

加载模块32还可以用于通过层叠样式表控制显示页面快照的显示，使得显示页面快照显示在页面顶层或者隐藏。

返回页面显示位置的装置30还可以包括删除模块，该删除模块用于在返回页面的显示位置之后，删除浏览器的本地缓存中保存的显示位置信息和显示页面快照。

本发明实施例的另一种返回页面显示位置的装置包括：存储器和处理器，其中，存储器存储指令；处理器执行指令用于：当监听到结束页面显示的操作时，保存页面的显示位置信息和显示页面快照；当监听到重新加载页面的操作时，读取显示页面快照并显示在页面顶层，并且根据显示位置信息加载页面，在页面加载完成后隐藏显示页面快照以返回页面的显示位置。

根据本发明实施例的技术方案，当监听到结束页面显示的操作时，保存页面的显示位置信息和显示页面快照，当监听到重新加载页面的操作时，读取显示页面快照并显示在页面顶层，并且根据显示位置信息加载页面，在页面加载完成后隐藏显示页面快照以返回页面的显示位置。使用本发明实施例的技术方案，使得在页面关闭后，重新打开该页面也能够加载到上次的浏览位置，并且通过移动端访问页面或是多ajax内容加载时，可减少页面加载时的用户等待时间，使页面在第一时间返回上次浏览位置。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (11)

1.一种返回页面显示位置的方法，其特征在于，包括：

当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；

当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。

2.根据权利要求1所述的方法，其特征在于，所述页面的显示位置信息和显示页面快照保存在浏览器的本地缓存中。

3.根据权利要求1所述的方法，其特征在于，通过层叠样式表控制所述显示页面快照的显示，使得所述显示页面快照显示在页面顶层或者隐藏。

4.根据权利要求3所述的方法，其特征在于，返回所述页面的显示位置之后，还包括：

删除所述浏览器的本地缓存中保存的所述显示位置信息和所述显示页面快照。

5.根据权利要求1所述的方法，其特征在于，所述结束页面显示的操作包括关闭当前页面的行为以及通过所述当前页面跳转到其他页面的行为，

所述重新加载所述页面的操作包括重启所述当前页面的行为以及从所述跳转的其他页面返回所述当前页面的行为。

6.一种返回页面显示位置的装置，其特征在于，包括：

存储模块，用于当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；

加载模块，用于当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。

7.根据权利要求6所述的装置，其特征在于，存储模块还用于：

将所述页面的显示位置信息和显示页面快照保存在浏览器的本地缓存中。

8.根据权利要求6所述的装置，其特征在于，所述加载模块还用于：

通过层叠样式表控制所述显示页面快照的显示，使得所述显示页面快照显示在页面顶层或者隐藏。

9.根据权利要求8所述的装置，其特征在于，还包括删除模块，所述删除模块用于：

在返回所述页面的显示位置之后，删除所述浏览器的本地缓存中保存的所述显示位置信息和所述显示页面快照。

10.根据权利要求6所述的装置，其特征在于，所述结束页面显示的操作包括关闭当前页面的行为以及通过所述当前页面跳转到其他页面的行为，

所述重新加载所述页面的操作包括重启所述当前页面的行为以及从所述跳转的其他页面返回所述当前页面的行为。

11.一种返回页面显示位置的装置，其特征在于，包括：存储器和处理器，其中，

所述存储器存储指令；

所述处理器执行所述指令用于：

当监听到结束页面显示的操作时，保存所述页面的显示位置信息和显示页面快照；

当监听到重新加载所述页面的操作时，读取所述显示页面快照并显示在页面顶层，并且根据所述显示位置信息加载所述页面，在所述页面加载完成后隐藏所述显示页面快照以返回所述页面的显示位置。