CN108595096A

CN108595096A - 一种网页内容逆向渲染的方法及系统装置

Info

Publication number: CN108595096A
Application number: CN201810359119.6A
Authority: CN
Inventors: 何嵩
Original assignee: Wuhan Ding Ting Information Technology Co Ltd
Current assignee: Wuhan Ding Ting Information Technology Co Ltd
Priority date: 2018-04-20
Filing date: 2018-04-20
Publication date: 2018-09-28

Abstract

本发明公开了一种网页内容逆向渲染的方法及系统装置，其所述方法步骤如下：启动浏览器，加载网页；触发DOMContentLoaded事件，获取向上滚动预留高度；通过Javascript scrollTop方法将滑条定位到预留高度的位置；通过Javascript scroll事件监听向上滚动页面操作，获取scrollTop值S1；创建一个新的文档对象模型DOM存储至浏览器内存变量D1中；获取服务器发送的展示内容装载到DOM中；计算所述DOM的高度存储至内存变量D2中；将所述DOM插入到当前HTML文档的顶部，同时将滑条位置向下移动；销毁所述DOM和H4，继续执行监听事件。本发明能实现在浏览器中「由下至上」的逆向浏览方式。通过逆向浏览交互查看以前的历史信息，相比现在大部分需要跳出页面的交互方式更符合时间轴的连续性，操作体验更为连贯。

Description

一种网页内容逆向渲染的方法及系统装置

技术领域

本发明本发明涉及网页技术，特别涉及移动互联网领域的网页应用中，是基于浏览器技术的一种实现方案，主要的实现语言是超文本标记语言（HTML）、层叠样式表（CSS）、脚本语言（Javascript）。

背景技术

网页是现在最普遍的信息载体，它被广泛的应用到各种手机软件、台式电脑软件中，而浏览器是阅读网页内容并让用户与这些文件交互的一种软件。

浏览器在渲染一个网页时是按照「由上至下」顺序的渲染，所以我们在浏览网页时的操作都是从上至下来滚动网页查看内容。这种浏览方式主要是符合人们的阅读习惯，比如「由上至下」阅读文章等。

如果能以网页的形式实现在浏览器中「由下至上」的逆向浏览方式，那么这种交互方式能帮助我们在网页中实现更多的产品形态。。

发明内容

本发明提供了一种网页内容逆向渲染的方法及系统装置，用于实现在浏览器中「由下至上」的逆向浏览方式，其具体技术方案如下所述：

第一方面，一种网页内容逆向渲染的方法，其方法步骤如下：

步骤一，启动浏览器，加载网页；

步骤二，所述浏览器触发 DOMContentLoaded 事件，获取向上滚动预留高度值H3；

步骤三，所述浏览器通过 Javascript scrollTop 方法将滑条定位到距HTML文档顶部H3距离的位置；

步骤四，所述浏览器通过 Javascript scroll 事件监听模块监听向上滚动页面操作，所述监听模块监听到向上滚动页面操作，获取scrollTop值S1；

步骤五，所述浏览器获取到所述scrollTop 值S1为0时，创建一个新的文档对象模型DOM存储至浏览器内存变量 D1 中。

步骤六，所述浏览器向服务器发起请求，所述浏览器获取服务器发送的展示内容装载到所述DOM中。

步骤七，所述浏览器计算所述DOM的高度值H4存储至内存变量 D2 中；

步骤八，所述浏览器获取所述DOM插入到当前 HTML 文档的顶部，同时将滑条位置向下移动H4距离；

步骤九，销毁所述DOM和H4，继续执行监听事件，循环步骤三至步骤八。

结合第一方面，在所述第一方面的第一种可能的实现方式中，所述步骤2还包括：所述浏览器触发 DOMContentLoaded 事件，计算网页内容高度值H1，计算viewport（浏览器显示页面内容的区域）高度值H2，当 H1 ＜ H2 + H3 时，将网页的最小高度min-height设置为 H2 + H3。

结合第一方面及第一方面的第一种可能的实现方式，在所述第一方面的第二种可能的实现方式中，步骤四还包括：若S1 ＞ 0时，创建一个计时器 T1；所述监听模块在所述计时器T1预设的监听时间内连续监听向上滚动页面操作，直至所述S1值为0且监听时间超过设定监听时间，销毁 T1。该步骤用于判断用户意图，当用户连续向上滚动时大部分是想查看上面的内容，这时到达页面顶部时就不做操作，而当用户到达页面顶部停顿一段时间再次向上滚动，即可判断用户是想加载更多内容。

结合第一方面及第一方面的第二种可能的实现方式，在所述第一方面的第三种可能的实现方式中,步骤五还包括：所述浏览器获取到所述scrollTop 值S1为0时，且所述计时器T1 销毁，所述监听模块再次监听到向上滚动页面操作，创建一个新的文档对象模型DOM存储至浏览器内存变量 D1 中。

结合第一方面的第三种可能的实现方式，在所述第一方面的第四种可能的实现方式中,所述HTML文档高度不足以支持向下移动H3，则使用 Javascript 增加HTML文档高度以至此预留空间设置。

结合第一方面的第四种可能的实现方式，在所述第一方面的第五种可能的实现方式中,所述浏览器读取本地 localstorage 中的记录的历史数据，所述浏览器获取本地localstorage 中的展示内容装载到所述DOM中。

第二方面，一种网页内容逆向渲染的系统，所述系统包括：

浏览器，所述浏览器用于加载页面，计算所述H1-H4的高度，根据所述scrollTop 值S1判断是否创建文档对象模型DOM，调用内存变量D1、D2，加载服务器提供的展示内容至所述DOM，并插入到当前 HTML 文档的顶部，控制滑条位置，销毁所述DOM和H4，以及浏览器程序运行相关操作；

监听模块，监听向上滚动页面操作，并根据所监听到的向上滚动页面操作生成scrollTop值S1，供所述浏览器调用；

内存变量，用于存储包括但不限于所述DOM和H4的数据；

服务器模块，用于向浏览器提供所需的数据，包括但不限于云端服务器或/和本地localstorage。

第三方面，一种网页内容逆向渲染的系统装置，所述装置包括：

监听装置，监听向上滚动页面操作，并根据所监听到的向上滚动页面操作生成scrollTop值S1，供所述浏览器调用；

内存装置，用于存储包括但不限于所述DOM和H4的数据；

服务器装置，用于向浏览器提供所需的数据，包括但不限于云端服务器或/和本地localstorage。

还包括处理器、存储器、总线，所述处理器同存储器通过总线进行数据连接，所述存储器内存有多条操作指令，所述处理器加载所述多条操作指令并执行，实现上述第一方面及第一方面的多种可能的实现方式中所述的方法。

有益效果：

实现在浏览器中「由下至上」的逆向浏览方式。逆向浏览方式可以应用到很多场景，特别适用于以信息流为展现形式的应用中，例如，浏览新闻列表时，可以查看之前点击过的新闻，对话流中，想查看之前发送的信息；通过逆向浏览交互查看以前的历史信息，相比现在大部分需要跳出页面的交互方式更符合时间轴的连续性，操作体验更为连贯。

实现用户无感知的逆向内容加载；

同时适用于 PC 鼠标滚轮和移动客户端手指滑动两种不同的交互操作。

附图说明

图1为本发明实施例一的方法流程图；

图2为本发明实施例一的HTML文档效果图；

图3为本发明实施例二的方法流程图；

图4为本发明实施例三的系统框架结构图。

具体实施方式

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

实施例一：

如图1所示，实施例1是在 PC 浏览器中实现浏览器逆向浏览，具体实施如下：

1. 启动PC端浏览器，加载网页。

2. 当网页加载并触发 DOMContentLoaded 事件时，所述浏览器计算网页内容高度值 H1，计算 viewport 高度值 H2，获取向上滚动预留高度值 H3，当 H1 小于 H2 + H3时，将网页的最小高度（min-height）设置为 H2 + H3，为触发向上滚动交互预留空间。

3. 所述浏览器通过 Javascript scrollTop 方法将滑条定位到距HTML文档顶部H3距离的位置，因为步骤 2、3 是在网页加载过程中进行的，实施时间很短。所以用户不会感知到这两步操作，当网页加载完成时，滑条已定位完毕，可以直接监听响应向上滚动操作了；

4. 所述浏览器通过 Javascript scroll 事件监听用户滚动页面操作，如果用户向上滚动，所述浏览器获取 scrollTop 值 S1，一旦如果 S1 大于 0 则创建一个计时器 T1，当用户在所述计时器 T1的设定监听时间300ms内执行向上滚动操作时，保持计时器 T1持续存在。

当用户停止滚动且时间超过设定监听时间300ms时就销毁 T1，该步骤用于判断用户意图，当用户连续向上滚动时大部分是想查看上面的内容，这时到达页面顶部时就不做操作，而当用户到达页面顶部停顿一段时间再次向上滚动，即可判断用户是想加载更多内容。

5. 当 scrollTop 值为 0 且 T1 被销毁，所述监听模块再次监听到向上滚动操作，则所述浏览器创建一个新的DOM（文档对象模型）存储至浏览器内存变量 D1 中。如图2所示，当用户执行页面向上滑动操作时，所述滑条向HTML文档的顶部移动，此时监听模块监听到的S1并创建计时器T1。当所述滑条到达顶部时，此时，HTML文档的顶部会出现方框中所述的“下滑加载历史”。此时若用户停止滑动且T1销毁，则所述浏览器并不会创建一个新的DOM，所述浏览器会认为用户仅想查看上面的内容；若用户停止滑动且T1销毁后又执行滑动操作，则所述浏览器才会创建一个新的DOM，所述浏览器会认为用户想要的加载更多内容。

6. 所述浏览器向服务器发起请求，将获取需要展示的内容装载到所述DOM中。

7. 所述浏览器计算DOM的高度值H4并储存到内存变量D2中。

8. 所述浏览器将所述DOM插入到当前HTML文档的最顶部，同时将滑条位置向下移动至H4距离的位置，该步骤的两项操作在浏览器中几乎是同时完成，所以用户无法感知页面顶部加载了新的内容并且重新定位了滑条。

9. 执行交互动画，提示用户内容加载完成。

10. 销毁 D1，H4 变量，继续执行监听事件，循环 3-9 步骤。

实施例二：

如图3所示，实施例二主要应用于移动客户端一个即时对话场景中加载对话历史的功能，所以事件的触发方式和处理时机于实施1有所不同，并且数据获取方式是直接读取本地数据，具体实施如下：

1. 启动PC端浏览器，加载网页。

2. 当网页加载并触发 DOMContentLoaded 事件时，获取向上滚动预留高度值H3=40像素，如果页面高度不足以支持向下移动 40 像素，则使用 Javascript 增加页面高度，为触发向上滚动交互预留空间。

3. 所述浏览器通过 Javascript scrollTop 方法将滑条定位到距HTML文档顶部40像素的位置。因为步骤 2、3 是在网页加载过程中进行的，实施时间很短。所以用户不会感知到这两步操作，当网页加载完成时，滑条已定位完毕，可以直接监听响应向上滚动操作了；

4. 所述浏览器通过 Javascript scroll 事件监听用户滚动页面操作，如果用户用手指在触屏上滑动致使滑条向上滚动，所述浏览器获取 scrollTop 值 S1，一旦如果 S1 大于 0 则创建一个计时器 T1，当用户在所述计时器 T1的设定监听时间300ms内执行向上滚动操作时，保持计时器 T1持续存在。

当用户停止滑动且时间超过设定监听时间300ms时就销毁 T1，该步骤用于判断用户意图，当用户连续向上滚动时大部分是想查看上面的内容，这时到达页面顶部时就不做操作，而当用户到达页面顶部停顿一段时间再次向上滚动，即可判断用户是想加载更多内容。

5.当 scrollTop 值为 0 且 T1 被销毁，所述监听模块再次监听到向上滚动操作，则所述浏览器创建一个新的DOM（文档对象模型）存储至浏览器内存变量 D1 中。也就是说，当用户执行向上滑动操作时，所述滑条向HTML文档的顶部移动，此时监听模块监听到的S1并创建计时器T1。当所述滑条到达顶部时，此时若用户停止滑动且T1销毁，则所述浏览器并不会创建一个新的DOM，所述浏览器会认为用户仅想查看上面的内容；若用户停止滑动且T1销毁后又执行滑动操作，则所述浏览器才会创建一个新的DOM，所述浏览器会认为用户想要的加载更多内容。

6. 所述浏览器读取本地 localstorage 中的记录的历史数据，将获取需要展示的内容装载到所述DOM中。

7. 所述浏览器计算DOM的高度值H4并储存到内存变量D2中。

8. 所述浏览器将所述DOM插入到当前HTML文档的最顶部，同时将滑条位置向下移动H4距离位置，该步骤的两项操作在浏览器中几乎是同时完成，所以用户无法感知页面顶部加载了新的内容并且重新定位了滑条。

9. 执行交互动画，提示用户内容加载完成。

10. 销毁 D1，H4 变量，继续执行监听事件，循环 3-9 步骤。

实施例三：

如图4所示，本发明基于上述方法提供了一种网页内容逆向渲染的系统，所述系统包括：

浏览器，所述浏览器用于加载页面，计算所述H1-H4的高度，根据所述scrollTop 值S1判断是否创建文档对象模型DOM，调用内存变量D1、D2，加载服务器提供的展示内容至所述DOM，并插入到当前 HTML 文档的顶部，控制滑条位置，销毁所述DOM和H4，以及浏览器程序运行相关操作。

监听模块，监听向上滚动页面操作，包括但不限于利用鼠标、语音、手部动作等实现的滑动操作。并根据所监听到的向上滚动页面操作生成scrollTop值S1，供所述浏览器调用。

内存变量，用于存储包括但不限于所述DOM和H4的数据；

基于上述系统，本发明还提供了一种网页内容逆向渲染的系统装置，所述装置包括：

监听装置，监听向上滚动页面操作，包括但不限于利用鼠标、语音、手部动作等实现的滑动操作。并根据所监听到的向上滚动页面操作生成scrollTop值S1，供所述浏览器调用。

内存装置，用于存储包括但不限于所述DOM和H4的数据；

还包括处理器、存储器、总线，所述处理器同存储器通过总线进行数据连接，所述存储器内存有多条操作指令，所述处理器加载所述多条操作指令并执行，实现上述说明书所述的方法。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所描述的装置实施例仅仅是示意性的，可以是设计成一体设备，也可以是组合成一套设备，也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件和必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims

1.一种网页内容逆向渲染的方法，其特征在于所述方法步骤如下：

步骤一，启动浏览器，加载网页；

步骤五，所述浏览器获取到所述scrollTop 值S1为0时，创建一个新的文档对象模型DOM存储至浏览器内存变量 D1 中；

步骤六，所述浏览器向服务器发起请求，所述浏览器获取服务器发送的展示内容装载到所述DOM中；

2.根据权利要求1所述一种网页内容逆向渲染的方法，其特征在于，所述步骤2还包括：所述浏览器触发 DOMContentLoaded 事件，计算网页内容高度值H1，计算浏览器显示页面内容的区域viewport的高度值H2，当 H1 ＜ H2 + H3 时，将网页的最小高度min-height设置为 H2 + H3。

3.根据权利要求1或2所述一种网页内容逆向渲染的方法，其特征在于，步骤四还包括：若S1 ＞ 0时，创建一个计时器 T1；所述监听模块在所述计时器T1预设的监听时间内连续监听向上滚动页面操作，直至所述S1值为0且监听时间超过设定监听时间，销毁 T1。

4.根据权利要求1或3所述一种网页内容逆向渲染的方法，其特征在于,步骤五还包括：所述浏览器获取到所述scrollTop 值S1为0时，且所述计时器T1销毁，所述监听模块再次监听到向上滚动页面操作，则创建一个新的文档对象模型DOM存储至浏览器内存变量 D1 中。

5.根据权利要求4所述一种网页内容逆向渲染的方法，其特征在于,所述HTML文档高度不足以支持向下移动H3，则使用 Javascript 增加HTML文档高度以至此预留空间设置。

6.根据权利要求5所述一种网页内容逆向渲染的方法，其特征在于,所述浏览器读取本地 localstorage 中的记录的历史数据，所述浏览器获取本地 localstorage 中的展示内容装载到所述DOM中。

7.一种网页内容逆向渲染的系统，其特征在于所述系统包括：

浏览器，所述浏览器用于加载页面，计算所述H1-H4的高度，根据所述scrollTop 值判断是否创建文档对象模型DOM，调用内存变量D1、D2，加载服务器提供的展示内容至所述DOM，并插入到当前 HTML 文档的顶部，控制滑条位置，销毁所述DOM和H4，以及浏览器程序运行相关操作；

监听模块，监听向上滚动页面操作，并根据所监听到的向上滚动页面操作生成scrollTop值，供所述浏览器调用；

内存变量，用于存储包括但不限于所述DOM和H4的数据；

8.一种网页内容逆向渲染的系统装置，其特征在于所述装置包括：

监听装置，监听向上滚动页面操作，并根据所监听到的向上滚动页面操作生成scrollTop值，供所述浏览器调用；

内存装置，用于存储包括但不限于所述DOM和H4的数据；

服务器装置，用于向浏览器提供所需的数据，包括但不限于云端服务器或/和本地localstorage；

还包括处理器、存储器、总线，所述处理器同存储器通过总线进行数据连接，所述存储器内存有多条操作指令，所述处理器加载所述多条操作指令并执行，实现上述权利要求1-6所述的方法。