页面快照展示方法、装置、电子设备及存储介质制造方法及图纸

本申请公开了一种页面快照展示方法、装置、电子设备及存储介质。该页面快照展示方法包括获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。本方案实现了将目标页面所有的节点和节点属性序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示，使得页面快照能够准确还原原页面，且样式展示完全，无页面模糊的情况。无页面模糊的情况。无页面模糊的情况。

【技术实现步骤摘要】
页面快照展示方法、装置、电子设备及存储介质


[0001]本申请涉及页面快照展示领域，具体而言，涉及一种页面快照展示方法、装置、电子设备及存储介质。

技术介绍

[0002]前端web页面是指使用超文本标记语言(Hyper Text Markup Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)和JavaScript技术生成的可访问可浏览可进行简单交互的页面。完整的保存前端web页面的某一时刻的情况用以查看就被称为页面快照的获取。
[0003]使用前端技术记录网页快照已成为获取页面快照的方式之一。现有的使用前端技术实现页面快照的方式是，可缩放矢量图形(Scalable Vector Graphics，SVG)内的foreignobject元素将页面文档对象模型(Document Object Model，DOM)以字符串的形式引入，并将整个SVG以字符串的形式生成统一资源定位符(Uniform Resource Locator，URL)后，将URL以img的形式绘制在canvas中。由于使用了SVG和canvas两种技术，这两种技术对CSS样式和HTML的支持程度使得对获取的页面快照的显示与原页面相比存在差异。

技术实现思路

[0004]为了解决上述问题，本申请实施例提供了一种页面快照展示方法、装置、电子设备及存储介质。
[0005]第一方面，本申请实施例提供了一种页面快照展示方法，所述方法包括：
[0006]获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；
[0007]获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
[0008]在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
[0009]第二方面，本申请实施例提供了一种页面快照展示装置，所述装置包括：
[0010]第一获取模块，用于获取目标页面在第一时刻的全部第一节点信息，获取各所述节点信息对应的第一序列数组；
[0011]第二获取模块，用于获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
[0012]展示模块，用于在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
[0013]第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方
面或第一方面的任意一种可能的实现方式提供的方法的步骤。
[0014]第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面或第一方面的任意一种可能的实现方式提供的方法。
[0015]在本申请一个或多个实施例中，用户终端获取第一时刻下目标页面全部节点的第一节点信息，并将第一节点信息转换为第一序列数组，接着用户终端获取目标页面从第一时刻到第二时刻发生变更的变更节点的第一变更节点信息，并将第一变更节点信息转换为第二序列数组，最后在用来展示页面快照的快照页面中插入内联框架，用第一变更节点信息结合初始的第一节点信息，生成变更时刻即第二时刻的完整的页面信息即页面快照。以此实现将目标页面所有的节点和节点信息序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示，不存在跨域问题，且不存在采用canvas绘制成图片导致的页面模糊问题。能够使得页面快照能够被准确还原并清晰展示，无页面模糊的情况。
附图说明
[0016]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例中所需使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0017]图1为本申请实施例提供的一种页面快照展示方法的流程示意图；
[0018]图2为本申请实施例提供的又一种页面快照展示方法的流程示意图；
[0019]图3为本申请实施例提供的又一种页面快照展示方法的流程示意图；
[0020]图4为本申请实施例提供的一种页面快照展示装置的结构示意图；
[0021]图5为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
[0022]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
[0023]在下述介绍中，术语“第一”、“第二”仅为用于描述的目的，而不能理解为指示或暗示相对重要性。下述介绍提供了本申请的多个实施例，不同实施例之间可以替换或者合并组合，因此本申请也可认为包含所记载的相同和/或不同实施例的所有可能组合。因而，如果一个实施例包含特征A、B、C，另一个实施例包含特征B、D，那么本申请也应视为包括含有A、B、C、D的一个或多个所有其他可能的组合的实施例，尽管该实施例可能并未在以下内容中有明确的文字记载。
[0024]下面的描述提供了示例，并且不对权利要求书中阐述的范围、适用性或示例进行限制。可以在不脱离本申请内容的范围的情况下，对描述的元素的功能和布置做出改变。各个示例可以适当省略、替代或添加各种过程或组件。例如所描述的方法可以以所描述的顺序不同的顺序来执行，并且可以添加、省略或组合各种步骤。此外，可以将关于一些示例描述的特征组合到其他示例中。
[0025]用户终端可以是具有显示屏的各种电子设备，包括但不限于智能手机、平板电脑等。具体的，用户终端可以为硬件也可以为软件。
[0026]可选的，当用户终端为软件时，可以是安装于上述所列举的电子设备中，其可以实现呈多个软件或软件模块(例如：用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不作具体限定。
[0027]可选的，当用户终端为硬件时，其上还可以安装有显示设备和摄像头，显示设备显示可以是各种能实现显示功能的设备，摄像头用于采集视频流。例如：显示设备可以是阴极射线管显示器(Cathode ray tubedisplay，简称CR)、发光二极管显示器(Light-emitting diode display，简称LED)、电子墨水屏、液晶显示屏(Liquid crystal display，简称LCD)、等离子显示面板(Plasma displaypanel，简称PDP)等。用户可以利用终端上的显示设备，来查看显示的文字、图片、视频等信息。
[0028]下面将结合具体的实施例对本方案进行详细说明。
[0029]参见图1，图1是本申请实施例提供的一种页面快照展示方法的流程示意图。本实施例主要强调将原页面中的全部节点信息最终在内联框架中进行本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面快照展示方法，其特征在于，包括：获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。2.根据权利要求1所述的方法，其特征在于，所述获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组，包括：遍历目标页面所有的节点，获取各所述节点在第一时刻的第一节点信息；获取并保存各所述第一节点信息对应的第一序列数组。3.根据权利要求2所述的方法，其特征在于，所述获取并保存各所述第一节点信息对应的第一序列数组，包括：根据各所述节点的节点类型对所述第一节点信息序列化处理，得到各第一序列数组；生成各所述节点对应的节点标识，保存所述节点标识与所述第一序列数组。4.根据权利要求1所述的方法，其特征在于，所述获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组，包括：监听所述目标页面，获取所述目标页面从第一时刻到第二时刻发生变更的各变更节点对应的第一变更节点信息；对各所述第一变更节点信息进行序列化处理，得到各所述第一变更节点信息对应的第二序列数组。5.根据权利要求4所述的方法，其特征在于，所述对各所述第一变更节点信息进行序列化处理，得到各所述第一变更节点信息对应的第二序列数组，包括：对各所述第一变更节点信息进行序列化处理，得到第二序列数组；对各所述变更节点对应的变更时间戳进行序列化处理，得到变更时间数组。6.根据权利要求1所述的方法，其特征在于，所述在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照之后，还包括：根据所述第一序列数组和所述第二序列数组生成更新序列数组；获取所述目标页面从第二时刻到第三时刻的第二变更节点信息，获取所述第二变更节点信息对应的第三序列数组，所述第一时刻到所述第二时刻为当前周期，所述第二时刻到所述第三时刻为下一周期；将所述更新序列数组作为所述第一序列数组...

【专利技术属性】
技术研发人员：冯哲荟子，
申请(专利权)人：OPPO广东移动通信有限公司，
类型：发明
国别省市：