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

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

【技术实现步骤摘要】
一种网页内容逆向渲染的方法及系统装置
本专利技术本专利技术涉及网页技术，特别涉及移动互联网领域的网页应用中，是基于浏览器技术的一种实现方案，主要的实现语言是超文本标记语言（HTML）、层叠样式表（CSS）、脚本语言（Javascript）。
技术介绍
网页是现在最普遍的信息载体，它被广泛的应用到各种手机软件、台式电脑软件中，而浏览器是阅读网页内容并让用户与这些文件交互的一种软件。浏览器在渲染一个网页时是按照「由上至下」顺序的渲染，所以我们在浏览网页时的操作都是从上至下来滚动网页查看内容。这种浏览方式主要是符合人们的阅读习惯，比如「由上至下」阅读文章等。如果能以网页的形式实现在浏览器中「由下至上」的逆向浏览方式，那么这种交互方式能帮助我们在网页中实现更多的产品形态。。
技术实现思路
本专利技术提供了一种网页内容逆向渲染的方法及系统装置，用于实现在浏览器中「由下至上」的逆向浏览方式，其具体技术方案如下所述：第一方面，一种网页内容逆向渲染的方法，其方法步骤如下：步骤一，启动浏览器，加载网页；步骤二，所述浏览器触发DOMContentLoaded事件，获取向上滚动预留高度值H3；步骤三，所述浏览器通过JavascriptscrollTop方法将滑条定位到距HTML文档顶部H3距离的位置；步骤四，所述浏览器通过Javascriptscroll事件监听模块监听向上滚动页面操作，所述监听模块监听到向上滚动页面操作，获取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。第三方面，一种网页内容逆向渲染的系统装置，所述装置包括：浏览器，所述浏览器用于加载页面，计算所述H1-H4的高度，根据所述scrollTop值S1判断是否创建文档对象模型DOM，调用内存变量D1、D2，加载服务器提供的展示内容至所述DOM，并插入到当前HTML文档的顶部，控制滑条位置，销毁所述DOM和H4，以及浏览器程序运行相关操作；监听装置，监听向上滚动页面操作，并根据所监听到的向上滚动页面操作生成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.所述浏览器通过JavascriptscrollTop方法将滑条定位到距HTML文档顶部H3距离的位置，因为步骤2、3是在网页加载过程中进行的，实施时间很短。所以用户不会感知到这两步操作，当网页加载完成时，滑条已定位完毕，可以直接监听响应向上滚动操作了；4.所述浏览器通过Javascript本文档来自技高网...

【技术保护点】
1.一种网页内容逆向渲染的方法，其特征在于所述方法步骤如下：步骤一，启动浏览器，加载网页；步骤二，所述浏览器触发 DOMContentLoaded 事件，获取向上滚动预留高度值H3；步骤三，所述浏览器通过 Javascript scrollTop 方法将滑条定位到距HTML文档顶部H3距离的位置；步骤四，所述浏览器通过 Javascript scroll 事件监听模块监听向上滚动页面操作，所述监听模块监听到向上滚动页面操作，获取scrollTop值S1；步骤五，所述浏览器获取到所述scrollTop 值S1为0时，创建一个新的文档对象模型DOM存储至浏览器内存变量 D1 中；步骤六，所述浏览器向服务器发起请求，所述浏览器获取服务器发送的展示内容装载到 所述DOM中；步骤七，所述浏览器计算所述DOM的高度值H4存储至内存变量 D2 中；步骤八，所述浏览器获取所述DOM插入到当前 HTML 文档的顶部，同时将滑条位置向下移动H4距离；步骤九，销毁所述DOM和H4，继续执行监听事件，循环步骤三至步骤八 。

【技术特征摘要】
1.一种网页内容逆向渲染的方法，其特征在于所述方法步骤如下：步骤一，启动浏览器，加载网页；步骤二，所述浏览器触发DOMContentLoaded事件，获取向上滚动预留高度值H3；步骤三，所述浏览器通过JavascriptscrollTop方法将滑条定位到距HTML文档顶部H3距离的位置；步骤四，所述浏览器通过Javascriptscroll事件监听模块监听向上滚动页面操作，所述监听模块监听到向上滚动页面操作，获取scrollTop值S1；步骤五，所述浏览器获取到所述scrollTop值S1为0时，创建一个新的文档对象模型DOM存储至浏览器内存变量D1中；步骤六，所述浏览器向服务器发起请求，所述浏览器获取服务器发送的展示内容装载到所述DOM中；步骤七，所述浏览器计算所述DOM的高度值H4存储至内存变量D2中；步骤八，所述浏览器获取所述DOM插入到当前HTML文档的顶部，同时将滑条位置向下移动H4距离；步骤九，销毁所述DOM和H4，继续执行监听事件，循环步骤三至步骤八。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所述一种网页内...

【专利技术属性】
技术研发人员：何嵩，
申请(专利权)人：武汉楚鼎信息技术有限公司，
类型：发明
国别省市：湖北,42