CN103399693B - 单页面整体刷新后菜单重新定位方法及系统 - Google Patents

Abstract

本发明公开了一种单页面整体刷新后菜单重新定位方法及系统，其中，方法包括：服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL，从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置。通过采用客户端浏览器的cookie保存刷新前菜单选取操作的状态数据，大大减小了服务器端的处理压力和内存消耗；同时，也解决了cookie的缓存问题，能够快速、准确的实现在单页面整体刷新后菜单重新定位。

Description

单页面整体刷新后菜单重新定位方法及系统

技术领域

本发明涉及网络技术领域，尤其涉及一种单页面整体刷新后菜单重新定位方法及系统。

背景技术

传统的web（网络）应用的设计是采用多页面技术，如通过HTML（HypertextMarkupLanguage，超文本标记语言）来实现布局，点击菜单，局部页面重新刷新，用户能够很明显看到这个刷新过程，体验感稍差。但是随着web2.0技术的演进，ajax技术的成熟，用户越来越喜欢单页面应用的方式，这更符合传统C/S桌面应用的使用习惯。

单页面应用是指用户通过浏览器加载独立的HTML页面并且无需离开此导航页面，这也是其独特的优势所在。菜单是单页面中的一个区域，称为菜单区域，菜单区域内菜单的选择必然会触发内容区域的更新，内容区域的更新有两种情况：一是内容区域的局部刷新；另一种情况是整体页面的刷新，其中，包括菜单区域。对于第一种情况，一般采用ajax（AsynchronousJavaScriptandXML）调用，刷新局部区域，而菜单区域不受影响。对于第二种情况，整体页面刷新，必然引发菜单选中状态的丢失，这是html协议决定了的。菜单区域滚动条位置重新滑动到初始端，用户无法知道上次菜单点击的确切位置和上次菜单的正确显示区域，而是恢复至初始位置，这样就会给用户造成很大的迷惑与困扰；而且，整个菜单区域随着每一次点击和刷新，菜单显示区域都存在跳动现象，用户体验感极差。

现有的解决方案是在服务器端保存每个用户在网页菜单区域的当前操作状态，及当前页面的数据信息，当用户刷新页面时，从服务器请求该用户的当前操作状态，及其当前页面的数据信息。但是，这需要服务器记录所有用户的当前操作状态，及其当前页面的数据信息，使服务器记录的数据信息极为庞大，导致网页更新慢，响应迟缓，增加了服务器内存的消耗。所以，如何在减少服务器内存消耗的基础上，快速、有效地确保页面刷新后，菜单仍旧保持上次操作的状态数据，即保持上次的点击菜单对象和滚动条位置，是一个急需解决的问题。

发明内容

基于上述问题，本发明提供了一种单页面整体刷新后菜单重新定位方法及系统，快速、有效地解决了单页面整体刷新后，菜单不能保持上次操作的状态数据的问题。

为实现本发明目的而提供的一种单页面整体刷新后菜单重新定位方法，包括以下步骤：

服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；

浏览器根据当前的URL（UniformResourceLocator，统一资源定位符即网页地址），读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；

所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置。

在其中一个实施例中，所述服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置，包括以下步骤：

给每个菜单项增加ID（Identity，身份标示号）属性，并在href（HypertextReference，即超文本引用）内增加menuID参数；

服务器解析用户请求，将所述当前被请求的单页面的菜单项的ID提取出来，在所述当前被请求的菜单项的ID对应的菜单项链接内添加class=’left_selected’标记，定位所述当前被请求的菜单项的位置。

在其中一个实施例中，所述浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中，包括以下步骤：

根据所述当前的URL信息按照预设算法计算key（验证码）；

读取所述滚动条位置数据，用所述key将所述滚动条位置数据保存至浏览器的cookie中。

在其中一个实施例中，所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后菜单项及滚动条位置，包括以下步骤：

根据所述html标记，计算刷新前的URL，根据所述刷新前的URL按照所述预设算法计算刷新前的key，从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据；

根据刷新时的URL按照所述预设算法计算刷新时的key，用所述刷新时的key将所述滚动条位置数据保存到所述cookie中；

定位刷新后的单页面中的所述菜单项及滚动条位置。

在其中一个实施例中，所述预设算法为：

去掉当前URL与其他URL中相重复的信息，对去掉重复信息后的字段进行动态分割，将分割后的字段进行组合，拼接成key。

相应地，本发明还提供了一种单页面整体刷新后菜单重新定位系统，包括服务器和浏览器；

所述服务器，用于在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；

所述浏览器，包括存储模块和读取模块；

所述存储模块，用于根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；

所述读取模块，用于在单页面被刷新时，根据所述标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置。

在其中一个实施例中，所述服务器，包括设置模块及定位模块；

所述设置模块，用于给每个菜单项增加ID属性，并在href内增加menuID参数；

所述定位模块，用于解析所述用户请求，将所述当前被请求的单页面的菜单项的ID提取出来，在所述当前被请求的菜单项的ID对应的菜单项链接内添加class=’left_selected’标记，定位所述当前被请求的菜单项的位置。

在其中一个实施例中，所述存储模块，包括第一计算子模块及第一存储子模块；

所述第一计算子模块，用于根据所述当前的URL信息按照预设算法计算key；

所述第一存储子模块，用于读取所述滚动条位置数据，用所述key将所述滚动条位置数据保存至浏览器的cookie中。

在其中一个实施例中，所述读取模块，包括第二计算子模块、第二存储子模块及更新子模块；

所述第二计算子模块，用于根据所述html标记，计算刷新前的URL，根据所述刷新前的URL按照所述预设算法计算刷新前的key，从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据；

所述第二存储子模块，用于根据刷新时的URL按照所述预设算法计算刷新时的key，用所述刷新时的key将所述滚动条位置数据保存到所述cookie中；

所述更新子模块，用于定位刷新后的单页面中的所述菜单项及滚动条位置。

在其中一个实施例中，所述预设算法为：

去掉当前URL与其他URL中相重复的信息，对去掉重复信息后的字段进行动态分割，将分割后的字段进行组合，拼接成key。

本发明的有益效果：本发明提供的一种单页面整体刷新后菜单重新定位方法及系统，通过服务器在当前被请求单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；浏览器根据当前的URL，读取当前菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；单页面被刷新时，浏览器根据所述html标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，更新菜单项及滚动条位置。上述方法，在服务器和客户端之间仅传递菜单项ID这一个参数，数据量小，服务器端处理逻辑也比较小，大大减小了服务器端的处理压力和内存消耗；同时，也解决了cookie的缓存问题，能够快速、准确的实现在单页面整体刷新后，菜单仍旧保持上次操作的状态数据，即上次点击的菜单对象及滚动条位置保持不变。

附图说明

图1为本发明单页面整体刷新后菜单重新定位方法的一个实施例的流程示意图；

图2为本发明单页面整体刷新后菜单重新定位系统的一个实施例的结构示意图。

具体实施方式

下面结合说明书附图，对本发明实施例中的单页面整体刷新后菜单重新定位方法及系统的具体实施方式进行说明。

本发明实施例提供了一种单页面整体刷新后菜单重新定位方法，如图1所示，包括以下步骤：

S100、服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；

具体为，后台菜单生成逻辑,通过请求request截获当前的URL信息，并在新生成的菜单项数据中增加html标记，页面输出后，前台javascript代码就可以分析这个特定的标记并定位上次菜单选取的位置，从而达到准确的菜单定位的目的。

S200、浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；

S300、单页面被刷新时，浏览器根据所述标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置。

本发明实施例中，菜单项ID和菜单滚动条位置数据这两项数据为菜单项选取操作的状态数据。

需要说明的是，采用cookie保存菜单滚动条位置数据的前提是客户端浏览器开启cookie功能。

本发明实施例中采取了浏览器根据当前的URL，读取当前菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；页面刷新时，浏览器根据所述标记以及刷新前的URL即刷新前菜单选取时的URL,从所述cookie中动态读取所述滚动条位置数据的方式来解决cookie的缓存问题，以下将对此进行具体说明。

较佳地，作为一种可实施方式，所述服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置，包括以下步骤：

S110、给每个菜单项增加ID属性，并在href内增加menuID参数；

S120、服务器解析所述用户请求，将所述当前被请求的菜单项的ID提取出来，在所述当前被请求的菜单项的ID对应的菜单项链接内添加class=’left_selected’标记，定位所述当前被请求的菜单项的位置。

较佳地，作为一种可实施方式，在生成菜单项的链接时给每个菜单项增加ID属性，并在href内增加menuID参数，

例如：<aid=2href=http://www.sample.com/index/1&menuID=2>

那么用户在点击菜单项的时候，浏览器请求URL内附加参数菜单项ID，服务器端在解析请求的时候，会将该菜单项ID提取出来，然后在菜单输出模块内将该ID对应菜单项的链接内添加class=’left_selected’标记，如：<aclass=’left_selected’>来定位菜单项。

进一步，在样式表内定义样式CSS如下：

a.left_selected{color:#FFFFFF;background-color:#0000FF;}经过浏览器对样式的渲染，就可以将菜单项显示为选中状态。采用上述方法，完全兼容现有的html标准，可以很容易的实现菜单项的定位。

较佳地，作为一种可实施方式，所述浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中，包括以下步骤：

S210、根据所述当前的URL信息按照预设算法计算key；

S220、读取所述滚动条位置数据，用所述key将所述滚动条位置数据保存至浏览器的cookie中；

浏览器根据当前的URL，计算出一个能够唯一标记当前URL的关键字key，然后读取当前的滚动条的位置数据，作为当前key所对应的Value保存至浏览器的cookie中。

较佳地，作为一种可实施方式，所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置，包括以下步骤：

S310、根据所述html标记，计算刷新前的URL，根据所述刷新前的URL按照所述预设算法计算刷新前的key，从cookie中读取所述刷新前的key对应的所述滚动条位置数据；

S320、根据刷新时的URL按照所述预设算法计算刷新时的key，用所述刷新时的key将所述滚动条位置数据保存到所述cookie中；

S330、更新刷新后页面中的菜单滚动条位置。

用户刷新页面后，首先根据所述html标记，调用刷新前的URL，根据所述刷新前的URL，与S210的计算原理同理计算出刷新前的key，获取对应的cookie中保存的刷新前的滚动条位置数据，然后，通过刷新时也就是当前的URL同理计算出刷新时的key,将刷新前的滚动条位置数据作为刷新时的key所对应的Value保存至浏览器的cookie中，更新刷新后页面中的菜单DIV（html中的区隔标记）滚动条位置。

较佳地，作为一种可实施方式，所述预设算法为：

去掉当前URL与其他URL中相重复的信息，对去掉重复信息后的字段采用'/'动态分割，将分割后的字段进行组合，拼接成key,以保证不同的URL对应不同的key，同时也减少了对cookie存储空间的占用。

本发明实施例中在定位了被请求的菜单项后，浏览器根据当前的URL，计算出一个能够唯一标记当前URL的关键字key，然后读取当前的滚动条的位置数据，作为当前key所对应的Value保存至浏览器的cookie中；单页面被刷新时，首先通过刷新前的URL同理计算出刷新前的key，获取对应的cookie中保存的刷新前的滚动条位置数据，然后，通过刷新时的URL同理计算出刷新时的key,将刷新前的滚动条位置数据作为刷新时的key所对应的Value保存至浏览器的cookie中。从而，避免了cookie的缓存问题。

下面用javascript代码为例，对上述方法的实现过程进行说明：

需要说明的是，本发明实施例提供的单页面整体刷新后菜单重新定位方法的使用前提是，用户客户端要开启cookie功能，否则本方案无法在客户端保存状态数据；而且，必须采取服务器端会话session来保存状态数据。

本发明实施例提供的单页面整体刷新后菜单重新定位方法，在服务器和客户端之间仅传递菜单项ID这一个参数，数据量小，服务器端处理逻辑也比较小，大大减小了服务器端的处理压力和内存消耗；同时，也解决了cookie的缓存问题，能够快速、准确的实现在单页面整体刷新后，菜单仍旧保持上次操作的状态数据。

基于同一发明构思，相应地本发明实施例还提供一种单页面整体刷新后菜单重新定位系统，由于此系统解决问题的原理与前述单页面整体刷新后菜单重新定位方法的实现原理相似，此系统的实施可以通过前述方法的具体过程实现，因此重复之处不再赘述。

本发明实施例提供的一种单页面整体刷新后菜单重新定位系统，如图2所示，包括服务器1和浏览器2；

所述服务器1，用于在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；

所述浏览器2，包括存储模块3和读取模块4；

所述存储模块3，用于根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；

所述读取模块4，用于在单页面被刷新时，根据所述html标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置。

较佳地，作为一种可实施方式，所述服务器1，包括设置模块11及定位模块12；

所述设置模块11，用于给每个菜单项增加ID属性，并在href内增加menuID参数；

所述定位模块12，用于解析所述用户请求，将所述当前被请求的单页面的菜单项的ID提取出来，在所述当前被请求的菜单项的ID对应的菜单项链接内添加class=’left_selected’标记，定位所述当前被请求的菜单项的位置。

较佳地，作为一种可实施方式，所述存储模块3，包括第一计算子模块31及第一存储子模块32；

所述第一计算子模块31，用于根据所述当前的URL信息按照预设算法计算key；

所述第一存储子模块32，用于读取所述滚动条位置数据，用所述key将所述滚动条位置数据保存至浏览器的cookie中。

较佳地，作为一种可实施方式，所述读取模块4，包括第二计算子模块41、第二存储子模块42及更新子模块43；

所述第二计算子模块41，用于根据所述html标记，计算刷新前的URL，根据所述刷新前的URL按照所述预设算法计算刷新前的key，从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据；

所述第二存储子模块42，用于根据刷新前时的URL按照所述预设算法计算刷新时的key，用所述刷新时的key将所述滚动条位置数据保存到所述cookie中；

所述更新子模块43，用于更新刷新后页面中的菜单滚动条位置。

较佳地，作为一种可实施方式，所述预设算法为：

去掉当前URL与其他URL中相重复的信息，对去掉重复信息后的字段进行动态分割，将分割后的字段进行组合，拼接成key。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种单页面整体刷新后菜单重新定位方法，其特征在于，包括以下步骤：

服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；

浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；

所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL，从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置；

其中，所述服务器在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置包括以下步骤：

给每个菜单项增加ID属性，并在href内增加menuID参数；

服务器解析用户请求，将所述当前被请求的单页面的菜单项的ID提取出来，在所述当前被请求的菜单项的ID对应的菜单项链接内添加class＝’left_selected’标记，定位所述当前被请求的菜单项的位置；

所述浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中时，通过根据所述当前的URL信息计算key，并用所述key将读取到的所述滚动条位置数据保存至浏览器的cookie中；

所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL，从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置时，通过根据所述html标记，计算刷新前的URL和刷新前的key，并从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据，根据刷新时的URL计算得到的刷新时的key，将所述滚动条位置数据保存到所述cookie中，定位刷新后的菜单项及滚动条位置。

2.根据权利要求1所述的单页面整体刷新后菜单重新定位方法，其特征在于，所述浏览器根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中，包括以下步骤：

根据所述当前的URL信息按照预设算法计算key；

读取所述滚动条位置数据，用所述key将所述滚动条位置数据保存至浏览器的cookie中。

3.根据权利要求1所述的单页面整体刷新后菜单重新定位方法，其特征在于，所述单页面被刷新时，浏览器根据所述html标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后菜单项及滚动条位置，包括以下步骤：

根据所述html标记，计算刷新前的URL，根据所述刷新前的URL按照预设算法计算刷新前的key，从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据；

根据刷新时的URL按照所述预设算法计算刷新时的key，用所述刷新时的key将所述滚动条位置数据保存到所述cookie中；

定位刷新后的单页面中的所述菜单项及滚动条位置。

4.根据权利要求2或3所述的单页面整体刷新后菜单重新定位方法，其特征在于，所述预设算法为：

去掉当前URL与其他URL中相重复的信息，对去掉重复信息后的字段进行动态分割，将分割后的字段进行组合，拼接成key。

5.一种单页面整体刷新后菜单重新定位系统，其特征在于，包括服务器和浏览器；

所述服务器，用于在当前被请求的单页面的菜单项链接中添加html标记，定位所述当前被请求的单页面的菜单项的位置；

所述浏览器，包括存储模块和读取模块；

所述存储模块，用于根据当前的URL，读取当前单页面的菜单项的菜单选取操作对应的滚动条位置数据，并将所述滚动条位置数据保存至浏览器的cookie中；

所述读取模块，用于在单页面被刷新时，根据所述标记以及刷新前的URL,从所述cookie中动态读取所述滚动条位置数据，定位刷新后的菜单项及滚动条位置；

其中，所述服务器，包括设置模块及定位模块；

所述设置模块，用于给每个菜单项增加ID属性，并在href内增加menuID参数；

所述定位模块，用于解析用户请求，将所述当前被请求的单页面的菜单项的ID提取出来，在所述当前被请求的菜单项的ID对应的菜单项链接内添加class＝’left_selected’标记，定位所述当前被请求的菜单项的位置；

所述存储模块，包括第一计算子模块及第一存储子模块；

所述第一计算子模块，用于根据所述当前的URL信息计算key；

所述第一存储子模块，用于用所述key将读取到的所述滚动条位置数据保存至浏览器的cookie中；

所述读取模块，用于根据所述html标记，计算刷新前的URL和刷新前的key，并从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据，根据刷新时的URL计算得到的刷新时的key，将所述滚动条位置数据保存到所述cookie中，定位刷新后的菜单项及滚动条位置。

6.根据权利要求5所述的单页面整体刷新后菜单重新定位系统，其特征在于，所述第一计算子模块，用于根据所述当前的URL信息按照预设算法计算key；

所述第一存储子模块，用于读取所述滚动条位置数据，用所述key将所述滚动条位置数据保存至浏览器的cookie中。

7.根据权利要求5所述的单页面整体刷新后菜单重新定位系统，其特征在于，所述读取模块，包括第二计算子模块、第二存储子模块及更新子模块；

所述第二计算子模块，用于根据所述html标记，计算刷新前的URL，根据所述刷新前的URL按照预设算法计算刷新前的key，从所述cookie中读取所述刷新前的key对应的所述滚动条位置数据；

所述第二存储子模块，用于根据刷新时的URL按照所述预设算法计算刷新时的key，用所述刷新时的key将所述滚动条位置数据保存到所述cookie中；

所述更新子模块，用于定位刷新后的单页面中的所述菜单项及滚动条位置。

8.根据权利要求6或7所述的单页面整体刷新后菜单重新定位系统，其特征在于，所述预设算法为：

去掉当前URL与其他URL中相重复的信息，对去掉重复信息后的字段进行动态分割，将分割后的字段进行组合，拼接成key。