CN112307384A - 页面快照展示方法、装置、电子设备及存储介质 - Google Patents
页面快照展示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN112307384A CN112307384A CN202011134853.6A CN202011134853A CN112307384A CN 112307384 A CN112307384 A CN 112307384A CN 202011134853 A CN202011134853 A CN 202011134853A CN 112307384 A CN112307384 A CN 112307384A
- Authority
- CN
- China
- Prior art keywords
- page
- node information
- snapshot
- time
- sequence
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 230000008859 change Effects 0.000 claims abstract description 101
- 230000015654 memory Effects 0.000 claims description 26
- 238000012545 processing Methods 0.000 claims description 17
- 238000004590 computer program Methods 0.000 claims description 8
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000006870 function Effects 0.000 description 12
- 230000008569 process Effects 0.000 description 12
- 238000004891 communication Methods 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 244000035744 Hura crepitans Species 0.000 description 2
- 230000008676 import Effects 0.000 description 2
- 238000012163 sequencing technique Methods 0.000 description 2
- 206010070245 Foreign body Diseases 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000035772 mutation Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请公开了一种页面快照展示方法、装置、电子设备及存储介质。该页面快照展示方法包括获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。本方案实现了将目标页面所有的节点和节点属性序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示，使得页面快照能够准确还原原页面，且样式展示完全，无页面模糊的情况。
Description
技术领域
本申请涉及页面快照展示领域，具体而言，涉及一种页面快照展示方法、装置、电子设备及存储介质。
背景技术
前端web页面是指使用超文本标记语言(Hyper Text Markup Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)和JavaScript技术生成的可访问可浏览可进行简单交互的页面。完整的保存前端web页面的某一时刻的情况用以查看就被称为页面快照的获取。
使用前端技术记录网页快照已成为获取页面快照的方式之一。现有的使用前端技术实现页面快照的方式是，可缩放矢量图形(Scalable Vector Graphics，SVG)内的foreignobject元素将页面文档对象模型(Document Object Model，DOM)以字符串的形式引入，并将整个SVG以字符串的形式生成统一资源定位符(Uniform Resource Locator，URL)后，将URL以img的形式绘制在canvas中。由于使用了SVG和canvas两种技术，这两种技术对CSS样式和HTML的支持程度使得对获取的页面快照的显示与原页面相比存在差异。
发明内容
为了解决上述问题，本申请实施例提供了一种页面快照展示方法、装置、电子设备及存储介质。
第一方面，本申请实施例提供了一种页面快照展示方法，所述方法包括：
获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；
获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
第二方面，本申请实施例提供了一种页面快照展示装置，所述装置包括：
第一获取模块，用于获取目标页面在第一时刻的全部第一节点信息，获取各所述节点信息对应的第一序列数组；
第二获取模块，用于获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
展示模块，用于在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面或第一方面的任意一种可能的实现方式提供的方法的步骤。
第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面或第一方面的任意一种可能的实现方式提供的方法。
在本申请一个或多个实施例中，用户终端获取第一时刻下目标页面全部节点的第一节点信息，并将第一节点信息转换为第一序列数组，接着用户终端获取目标页面从第一时刻到第二时刻发生变更的变更节点的第一变更节点信息，并将第一变更节点信息转换为第二序列数组，最后在用来展示页面快照的快照页面中插入内联框架，用第一变更节点信息结合初始的第一节点信息，生成变更时刻即第二时刻的完整的页面信息即页面快照。以此实现将目标页面所有的节点和节点信息序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示，不存在跨域问题，且不存在采用canvas绘制成图片导致的页面模糊问题。能够使得页面快照能够被准确还原并清晰展示，无页面模糊的情况。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例中所需使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的一种页面快照展示方法的流程示意图；
图2为本申请实施例提供的又一种页面快照展示方法的流程示意图；
图3为本申请实施例提供的又一种页面快照展示方法的流程示意图；
图4为本申请实施例提供的一种页面快照展示装置的结构示意图；
图5为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
在下述介绍中，术语“第一”、“第二”仅为用于描述的目的，而不能理解为指示或暗示相对重要性。下述介绍提供了本申请的多个实施例，不同实施例之间可以替换或者合并组合，因此本申请也可认为包含所记载的相同和/或不同实施例的所有可能组合。因而，如果一个实施例包含特征A、B、C，另一个实施例包含特征B、D，那么本申请也应视为包括含有A、B、C、D的一个或多个所有其他可能的组合的实施例，尽管该实施例可能并未在以下内容中有明确的文字记载。
下面的描述提供了示例，并且不对权利要求书中阐述的范围、适用性或示例进行限制。可以在不脱离本申请内容的范围的情况下，对描述的元素的功能和布置做出改变。各个示例可以适当省略、替代或添加各种过程或组件。例如所描述的方法可以以所描述的顺序不同的顺序来执行，并且可以添加、省略或组合各种步骤。此外，可以将关于一些示例描述的特征组合到其他示例中。
用户终端可以是具有显示屏的各种电子设备，包括但不限于智能手机、平板电脑等。具体的，用户终端可以为硬件也可以为软件。
可选的，当用户终端为软件时，可以是安装于上述所列举的电子设备中，其可以实现呈多个软件或软件模块(例如：用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不作具体限定。
可选的，当用户终端为硬件时，其上还可以安装有显示设备和摄像头，显示设备显示可以是各种能实现显示功能的设备，摄像头用于采集视频流。例如：显示设备可以是阴极射线管显示器(Cathode ray tubedisplay，简称CR)、发光二极管显示器(Light-emittingdiode display，简称LED)、电子墨水屏、液晶显示屏(Liquid crystal display，简称LCD)、等离子显示面板(Plasma displaypanel，简称PDP)等。用户可以利用终端上的显示设备，来查看显示的文字、图片、视频等信息。
下面将结合具体的实施例对本方案进行详细说明。
参见图1，图1是本申请实施例提供的一种页面快照展示方法的流程示意图。本实施例主要强调将原页面中的全部节点信息最终在内联框架中进行展示过程。在本申请实施例中，所述方法包括：
S101、获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组。
所述页面是用户终端屏幕上所显示的可访问可浏览可进行简单交互的页面。所述目标页面在本申请实施例中可以理解为用户终端屏幕上所显示的需要获取页面快照的页面。
所述第一时刻在本申请实施例中可以理解为目标页面开始获取第一节点信息时的初始时刻。
所述节点信息为页面上的节点所对应的页面相关信息(例如节点类型、节点属性等)。所述第一节点信息在本申请实施例中可以理解为第一时刻时目标页面上节点的节点信息。
所述序列数组为节点信息转换成的序列化字符串数组。所述第一序列数组在本申请实施例中可以理解为由第一节点信息转换而得到的序列数组。
在本申请实施例中，目前页面大多是HTML和XML形式的文档，由于文档对象模型DOM是HTML和XML文档的编程接口，且能够将HTML文档以面向对象的形式展示。故记录保存页面的DOM即可以记录完整的页面信息，并根据这些信息可以完成页面快照的获取。而页面上遍布有DOM节点，每个DOM节点在第一时刻均含有节点对应的第一节点信息，用户终端将获取目标页面上全部的第一节点信息，并将各第一节点信息转换为对应的第一序列数组，实现将页面初始状态下所有节点元素转换为统一的序列数组形式存储。
S102、获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组。
所述第二时刻在本申请实施例中可以理解为目标页面需要生成页面快照的时刻，需要生成页面快照的场景可以为目标页面发生页面错误时生成页面快照，也可以是经过预先设置好的快照生成时间间隔而生成页面快照。
所述变更节点信息为页面上发生变更的变更节点所对应的页面相关信息。所述第一变更节点信息在本申请实施例中可以理解为第一时刻到第二时刻时间段内发生变更的所有变更节点对应的变更节点信息。
所述第二序列数组在本申请实施例中可以理解为由第一变更节点信息转换而得到的序列数组。
在本申请实施例中，用户终端在获取了目标页面初始状态下的所有第一序列数组后，将监听获取目标页面在第一时刻到第二时刻之间发生变更的节点的第一变更节点信息，并将第一变更节点信息也转换为序列化字符串数组即第二序列数组进行存储。
S103、在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
所述快照页面在本申请实施例中可以理解为用户终端屏幕上展示页面快照的页面。
所述内联框架在本申请实施例中可以理解为由iframe元素创建的包含另外一个文档的iframe框架。
所述页面快照是搜索引擎在抓取网站页面数据的时候，对页面进行的一种缓存处理，方便用户遇到网站打不开的时候，也能正常查看网站的资料。在本申请实施例中页面快照可以理解为用户终端对目标页面的缓存处理。
在本申请实施例中，用户终端先在待展示页面快照的快照页面中插入iframe内联框架，再将前述步骤存储的各第一序列数组与各第二序列数组导入至内联框架中，通过目标页面第一时刻即初始状态下的节点信息对应的第一序列数组以及目标页面在第一时刻到第二时刻发生变更的变更节点信息对应的第二序列数组在内联框架中形成目标页面在第二时刻的页面快照。
通过上述步骤，用户终端获取第一时刻下目标页面全部节点的第一节点信息，并将第一节点信息转换为第一序列数组，接着用户终端获取目标页面从第一时刻到第二时刻发生变更的变更节点的第一变更节点信息，并将第一变更节点信息转换为第二序列数组，最后在用来展示页面快照的快照页面中插入内联框架，用第一变更节点信息结合初始的第一节点信息，生成变更时刻即第二时刻的完整的页面信息即页面快照。以此实现将目标页面所有的节点和节点信息序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示，不存在跨域问题，且不存在采用canvas绘制成图片导致的页面模糊问题。能够使得页面快照能够被准确还原并清晰展示，无页面模糊的情况。
参见图2，图2是本申请实施例的又一种页面快照展示方法的流程示意图。本实施例主要强调进入下一循环时更新第一序列数组的过程。如图2所示，所述方法包括：
S201、获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组。
具体过程如步骤S101所述，在此不再赘述。
S202、获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组。
具体过程如步骤S102所述，在此不再赘述。
S203、在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
具体过程如步骤S103所述，在此不再赘述。
S204、根据所述第一序列数组和所述第二序列数组生成更新序列数组。
所述更新序列数组在本申请实施例中可以理解为用户终端基于第二序列数组对第一序列数组进行更新后得到的序列数组。
在本申请实施例中，用户终端将根据其所存储的第一序列数组与第二序列数组生成更新序列数组，更新序列数组用于对用户终端存储的第一序列数组进行更新，以形成新的第一序列数组。
S205、获取所述目标页面从第二时刻到第三时刻的第二变更节点信息，获取所述第二变更节点信息对应的第三序列数组，所述第一时刻到所述第二时刻为当前周期，所述第二时刻到所述第三时刻为下一周期。
所述第三时刻在本申请实施例中可以理解为目标页面在第二时刻生成页面快照后，再次需要生成页面快照的时刻。需要生成页面快照的场景可以为目标页面发生页面错误时生成页面快照，也可以是经过预先设置好的快照生成时间间隔而生成页面快照。
所述第二变更节点信息在本申请实施例中可以理解为第二时刻到第三时刻时间段内发生变更的所以变更节点对应的变更节点信息。
所述第三序列数组在本申请实施例中可以理解为由第二变更节点信息转换而得到的序列数组。
在本申请实施例中，用户终端将获取目标页面上第二时刻到第三时刻发生变更的变更节点对应的第二变更节点信息，并将第二变更节点信息转换为第三序列数组进行存储。
S206、将所述更新序列数组作为所述第一序列数组，所述第三序列数组作为所述第二序列数组，并执行所述在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照的步骤。
在本申请实施例中，用户终端将触发获取页面快照到下一次触发获取页面快照作为一次循环，每进入下一次循环时，用户终端会上一次循环中第二序列数组对第一序列数组更新后生成的更新序列数组作为下一次循环的目标页面初始状态下的序列数组即第一序列数组，将第三序列数组作为下一次循环中的第二序列数组，并基于新的第一序列数组与新的第二序列数组生成新的页面快照。
通过上述步骤，用户终端获取第一时刻下目标页面全部节点的第一节点信息，并将第一节点信息转换为第一序列数组，接着用户终端获取目标页面从第一时刻到第二时刻发生变更的变更节点的第一变更节点信息，并将第一变更节点信息转换为第二序列数组，最后在用来展示快照的快照页面中插入内联框架，用第一变更节点信息结合初始的第一节点信息，生成变更时刻即第二时刻的完整的页面信息即页面快照。在形成页面快照后，将第二序列数组更新至第一序列数组中形成新的第一序列数组，将第二时刻到第三时刻的第三序列数组作为新的第二序列数组再次生成新的页面快照。以此实现将目标页面所有的节点和节点信息序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示。由于在内联框架中生成页面快照不存在跨域问题，生成的页面快照中跨域图片也可正常展示，且不存在采用canvas绘制成图片导致的页面模糊问题。能够使得页面快照能够被准确还原并清晰展示，无页面模糊的情况。还会对第一序列数组不断的进行更新，缓解内存序列数组相关信息的存储压力，且保证了需要生成页面快照时，用户终端能够快速地生成页面快照，不会由于第一序列数组没有更新过而在生成页面快照时需要不断的基于第二序列数组对第一序列数组更新而影响页面快照的生成效率。
参见图3，图3是本申请实施例的又一种页面快照展示方法的流程示意图。本申请实施例主要强调通过页面的错误触发获取页面快照的具体过程。如图3所示，所述方法包括：
S301、遍历目标页面所有的节点，获取各所述节点在第一时刻的第一节点信息。
在本申请实施例中，用户终端将遍历目标页面中的所有节点，并获取每一个节点在第一时刻的第一节点信息。第一节点信息可以包含记录的目标页面宽高的信息和节点样式属性。
S302、根据各所述节点的节点类型对所述第一节点信息序列化处理，得到各第一序列数组。
所述序列化处理在本申请实施例中可以理解为对第一节点信息序列化转换为字符串的过程。
在本申请实施例中，用户终端将根据节点的节点类型的不同而针对性将第一节点信息转换为序列化字符串。
可选的，节点的类型可以是文本节点、元素节点、文档节点等。用户终端将获取节点的节点类型对应的特殊信息，并将特殊信息序列化存储。例如，针对元素节点，用户终端将根据元素的tagName做不同的处理，以保证元素信息的完整。具体的，比如tagName为input、select等用户输入的类型，根据获取快照的隐私需要，将输入值以*替换；又比如对于audio、video元素节点，需要记录播放暂停状态信息，并将播放暂停状态信息转换为序列化字符串。
S303、生成各所述节点对应的节点标识，保存所述节点标识与所述第一序列数组。
所述节点标识在本申请实施例中可以理解为每个节点所独有的识别标识，每个节点的节点标识为互不相同的唯一值。根据节点标识即可识别出其对应的是哪一个节点。
在本申请实施例中，用户终端将生成各个节点对应的节点标识，并在保存第一序列数组的同时将节点标识保存。
S304、监听所述目标页面，获取所述目标页面从第一时刻到第二时刻发生变更的各变更节点对应的第一变更节点信息。
在本申请实施例中，用户终端将调用Mutation Observer函数对目标页面进行监听，以此监听目标页面中DOM的变动和click、scroll等页面的交互事件记录的交互变更，并获取第一时刻到第二时刻监听到的发生变更节点对应的第一变更节点信息。
S305、对各所述第一变更节点信息进行序列化处理，得到第二序列数组。
在本申请实施例中，用户终端对获取的各第一变更节点信息序列化处理，使第一变更节点信息转换为序列化字符串，即第二序列数组。
S306、对各所述变更节点对应的变更时间戳进行序列化处理，得到变更时间数组。
所述时间戳是是一份能够表示一份数据在一个特定时间点已经存在的完整的可验证的数据。所述变更时间戳在本申请实施例中可以理解为发生变更的变更节点的变更时间点数据。
在本申请实施例中，用户终端将变更节点对应的变更时间戳也进行序列化处理，使变更时间戳也转换为序列化字符串进行存储。
可选的，若在第一时刻到第二时刻之间，某一节点发生了多次变更，则用户终端将根据变更时间戳的时间点顺序由先到后依次根据第二序列数组对该节点的节点信息进行更新。
S307、检测到所述目标页面的错误触发信号时，在待展示的快照页面中插入内联框架。
所述错误触发信号在本申请实施例中可以理解为目标页面显示内容出现错误时用户终端所生成的提示信号。
在本申请实施例中，用户终端在检测到错误触发信号时，即认为此时目标页面出现错误，需要生成页面快照，进而在快照页面中插入内联框架。
S308、将各所述第一序列数组转化为各所述第一节点信息，将各所述第二序列数组转换成各所述第一变更节点信息。
在本申请实施例中，由于用户终端在先前步骤中将节点初始状态下的第一节点信息与第一时刻到第二时刻发生变更的变更节点的第一变更节点信息均转换为序列化字符串进行存储。故用户终端需要将各第一序列数组重新转化为第一节点信息，将各第二序列数组重新转化为第一变更节点信息，以此保证写入内联框架后能够准确还原页面。
S309、将各所述第一节点信息依次写入所述内联框架，并将各所述节点的外部式CSS样式转换为嵌入式CSS样式后写入所述内联框架。
在本申请实施例中，DOM节点包含有CSS样式，CSS样式可能为外部式CSS样式(即使用link标签引入的CSS样式)，也可能为嵌入式CSS样式。用户终端会将所有的外部式CSS样式以嵌入式CSS样式直接写入内联框架，节省程序且避免由于CSS样式不同而不完全显示的问题。
可能的，内联框架可以增加sandbox属性，sandbox属性可以设置内联框架内禁止脚本执行和表单提交等，保证内联框架为静止页面。
S310、根据各所述第一变更节点信息在所述内联框架中更新所述第一节点信息，生成并展示所述目标页面在所述第二时刻的页面快照。
在本申请实施例中，用户终端在将第一节点信息依次写入内联框架后，再根据第一变更节点信息对内联框架中的第一节点信息进行更新，以此生成目标页面在第二时刻的页面快照并展示。
通过上述步骤，用户终端获取第一时刻下目标页面全部节点的第一节点信息，并将第一节点信息转换为第一序列数组，接着用户终端获取目标页面从第一时刻到第二时刻发生变更的变更节点的第一变更节点信息，并将第一变更节点信息转换为第二序列数组，最后在用来展示快照的快照页面中插入内联框架，用第一变更节点信息结合初始的第一节点信息，生成变更时刻即第二时刻的完整的页面信息即页面快照，并将外部式CSS样式以嵌入式CSS样式写入。以此实现将目标页面所有的节点和节点信息序列化保存，将原页面中的全部节点信息最终在内联框架中进行展示。由于在内联框架中生成页面快照不存在跨域问题，生成的页面快照中跨域图片也可正常展示，且不存在采用canvas绘制成图片导致的页面模糊问题。能够使得页面快照能够被准确还原并清晰展示，无页面模糊的情况。通过外部式的CSS转成嵌入式的CSS样式直接内嵌入页面，且对节点的属性进行保存，因此样式未丢失且iframe内联框架中对CSS样式支持度高。
下面将结合附图4，对本申请实施例提供的页面快照展示装置进行详细介绍。需要说明的是，附图4所示的页面快照展示装置，用于执行本申请图1-图3所示实施例的方法，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请图1-图3所示的实施例。
请参见图4，图4是本申请实施例提供的一种页面快照展示装置的结构示意图。如图4所示，所述装置包括：
第一获取模块401，用于获取目标页面在第一时刻的全部第一节点信息，获取各所述节点信息对应的第一序列数组；
第二获取模块402，用于获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
展示模块403，用于在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
在一种可实施方式中，所述第一获取模块401包括：
遍历单元，用于遍历目标页面所有的节点，获取各所述节点在第一时刻的第一节点信息。
第一保存单元，用于获取并保存各所述第一节点信息对应的第一序列数组。
在一种可实施方式中，所述第一保存单元具体用于：
根据各所述节点的节点类型对所述第一节点信息序列化处理，得到各第一序列数组；
生成各所述节点对应的节点标识，保存所述节点标识与所述第一序列数组。
在一种可实施方式中，所述第二获取模块402包括：
监听单元，用于监听所述目标页面，获取所述目标页面从第一时刻到第二时刻发生变更的各变更节点对应的第一变更节点信息。
处理单元，用于对各所述第一变更节点信息进行序列化处理，得到各所述第一变更节点信息对应的第二序列数组。
在一种可实施方式中，所述处理单元具体用于：
对各所述第一变更节点信息进行序列化处理，得到第二序列数组；
对各所述变更节点对应得变更时间戳进行序列化处理，得到变更事件数组。
在一种可实施方式中，所述装置还包括：
更新模块，用于根据所述第一序列数组和所述第二序列数组生成更新序列数组；
第三获取模块，用于获取所述目标页面从第二时刻到第三时刻的第二变更节点信息，获取所述第二变更节点信息对应的第三序列数组；
处理模块，用于将所述更新序列数组作为所述第一序列数组，所述第三序列数组作为所述第二序列数组，并执行所述在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照的步骤。
在一种可实施方式中，所述展示模块403包括：
检测单元，用于检测到所述目标页面的错误触发信号时，在待展示的快照页面中插入内联框架。
导入单元，用于将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架，展示所述目标页面在所述第二时刻的页面快照。
在一种可实施方式中，所述导入单元包括：
转化元件，用于将各所述第一序列数组转化为各所述第一节点信息，将各所述第二序列数组转换成各所述第一变更节点信息；
写入元件，用于将各所述第一节点信息依次写入所述内联框架；
更新元件，用于根据各所述第一变更节点信息在所述内联框架中更新所述第一节点信息，生成并展示所述目标页面在所述第二时刻的页面快照。
在一种可实施方式中，所述写入元件具体用于：
将各所述第一节点信息依次写入所述内联框架，并将各所述节点的外部式CSS样式转换为嵌入式CSS样式后写入所述内联框架。
本领域的技术人员可以清楚地了解到本申请实施例的技术方案可借助软件和/或硬件来实现。本说明书中的“单元”和“模块”是指能够独立完成或与其他部件配合完成特定功能的软件和/或硬件，其中硬件例如可以是现场可编程门阵列(Field－ProgrammableGate Array，FPGA)、集成电路(Integrated Circuit，IC)等。
本申请实施例的各处理单元和/或模块，可通过实现本申请实施例所述的功能的模拟电路而实现，也可以通过执行本申请实施例所述的功能的软件而实现。
参见图5，其示出了本申请实施例所涉及的一种电子设备的结构示意图，该电子设备可以用于实施图1-图3所示实施例中的方法。如图5所示，电子设备500可以包括：至少一个中央处理器501，至少一个网络接口504，用户接口503，存储器505，至少一个通信总线502。
其中，通信总线502用于实现这些组件之间的连接通信。
其中，用户接口503可以包括显示屏(Display)、摄像头(Camera)，可选用户接口503还可以包括标准的有线接口、无线接口。
其中，网络接口504可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。
其中，中央处理器501可以包括一个或者多个处理核心。中央处理器501利用各种接口和线路连接整个终端500内的各个部分，通过运行或执行存储在存储器505内的指令、程序、代码集或指令集，以及调用存储在存储器505内的数据，执行终端500的各种功能和处理数据。可选的，中央处理器501可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable Logic Array，PLA)中的至少一种硬件形式来实现。中央处理器501可集成中央中央处理器(Central Processing Unit，CPU)、图像中央处理器(GraphicsProcessing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到中央处理器501中，单独通过一块芯片进行实现。
其中，存储器505可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器505包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器505可用于存储指令、程序、代码、代码集或指令集。存储器505可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器505可选的还可以是至少一个位于远离前述中央处理器501的存储装置。如图5所示，作为一种计算机存储介质的存储器505中可以包括操作系统、网络通信模块、用户接口模块以及程序指令。
在图5所示的电子设备500中，用户接口503主要用于为用户提供输入的接口，获取用户输入的数据；而处理器501可以用于调用存储器505中存储的页面快照展示应用程序，并具体执行以下操作：
获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；
获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
本申请还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述方法的步骤。其中，计算机可读存储介质可以包括但不限于任何类型的盘，包括软盘、光盘、DVD、CD-ROM、微型驱动器以及磁光盘、ROM、RAM、EPROM、EEPROM、DRAM、VRAM、闪速存储器设备、磁卡或光卡、纳米系统(包括分子存储器IC)，或适合于存储指令和/或数据的任何类型的媒介或设备。
需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些服务接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储器包括：U盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通进程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储器中，存储器可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(Random AccessMemory，RAM)、磁盘或光盘等。
以上所述者，仅为本公开的示例性实施例，不能以此限定本公开的范围。即但凡依本公开教导所作的等效变化与修饰，皆仍属本公开涵盖的范围内。本领域技术人员在考虑说明书及实践这里的公开后，将容易想到本公开的其实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未记载的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的范围和精神由权利要求限定。
Claims (12)
1.一种页面快照展示方法，其特征在于，包括：
获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组；
获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
2.根据权利要求1所述的方法，其特征在于，所述获取目标页面在第一时刻的全部第一节点信息，获取各所述第一节点信息对应的第一序列数组，包括：
遍历目标页面所有的节点，获取各所述节点在第一时刻的第一节点信息；
获取并保存各所述第一节点信息对应的第一序列数组。
3.根据权利要求2所述的方法，其特征在于，所述获取并保存各所述第一节点信息对应的第一序列数组，包括：
根据各所述节点的节点类型对所述第一节点信息序列化处理，得到各第一序列数组；
生成各所述节点对应的节点标识，保存所述节点标识与所述第一序列数组。
4.根据权利要求1所述的方法，其特征在于，所述获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组，包括：
监听所述目标页面，获取所述目标页面从第一时刻到第二时刻发生变更的各变更节点对应的第一变更节点信息；
对各所述第一变更节点信息进行序列化处理，得到各所述第一变更节点信息对应的第二序列数组。
5.根据权利要求4所述的方法，其特征在于，所述对各所述第一变更节点信息进行序列化处理，得到各所述第一变更节点信息对应的第二序列数组，包括：
对各所述第一变更节点信息进行序列化处理，得到第二序列数组；
对各所述变更节点对应的变更时间戳进行序列化处理，得到变更时间数组。
6.根据权利要求1所述的方法，其特征在于，所述在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照之后，还包括：
根据所述第一序列数组和所述第二序列数组生成更新序列数组；
获取所述目标页面从第二时刻到第三时刻的第二变更节点信息，获取所述第二变更节点信息对应的第三序列数组，所述第一时刻到所述第二时刻为当前周期，所述第二时刻到所述第三时刻为下一周期；
将所述更新序列数组作为所述第一序列数组，所述第三序列数组作为所述第二序列数组，并执行所述在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照的步骤。
7.根据权利要求1所述的方法，其特征在于，所述在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照，包括：
检测到所述目标页面的错误触发信号时，在待展示的快照页面中插入内联框架；
将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架，展示所述目标页面在所述第二时刻的页面快照。
8.根据权利要求7所述的方法，其特征在于，所述将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架，展示所述目标页面在所述第二时刻的页面快照，包括：
将各所述第一序列数组转化为各所述第一节点信息，将各所述第二序列数组转换成各所述第一变更节点信息；
将各所述第一节点信息依次写入所述内联框架；
根据各所述第一变更节点信息在所述内联框架中更新所述第一节点信息，生成并展示所述目标页面在所述第二时刻的页面快照。
9.根据权利要求8所述的方法，其特征在于，所述将各所述第一节点信息依次写入所述内联框架，包括：
将各所述第一节点信息依次写入所述内联框架，并将各所述节点的外部式CSS样式转换为嵌入式CSS样式后写入所述内联框架。
10.一种页面快照获取装置，其特征在于，包括：
第一获取模块，用于获取目标页面在第一时刻的全部第一节点信息，获取各所述节点信息对应的第一序列数组；
第二获取模块，用于获取所述目标页面从第一时刻到第二时刻的第一变更节点信息，获取各所述第一变更节点信息对应的第二序列数组；
展示模块，用于在待展示的快照页面中插入内联框架，将各所述第一序列数组以及各所述第二序列数组导入至所述内联框架中，展示所述目标页面在所述第二时刻的页面快照。
11.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-9任一项所述方法的步骤。
12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-9任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011134853.6A CN112307384B (zh) | 2020-10-21 | 2020-10-21 | 页面快照展示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011134853.6A CN112307384B (zh) | 2020-10-21 | 2020-10-21 | 页面快照展示方法、装置、电子设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112307384A true CN112307384A (zh) | 2021-02-02 |
| CN112307384B CN112307384B (zh) | 2024-05-03 |
Family
ID=74326904
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011134853.6A Active CN112307384B (zh) | 2020-10-21 | 2020-10-21 | 页面快照展示方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112307384B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113961858A (zh) * | 2021-10-18 | 2022-01-21 | 广州创乐出海科技有限公司 | 一种商品页面更新方法、装置、计算机设备和存储介质 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102841901A (zh) * | 2011-06-23 | 2012-12-26 | 腾讯科技（深圳）有限公司 | 一种网页显示的方法和装置 |
| CN103699600A (zh) * | 2013-12-13 | 2014-04-02 | 北京奇虎科技有限公司 | 网页快照的数据处理方法和浏览器 |
| CN105630843A (zh) * | 2014-11-17 | 2016-06-01 | 广州市动景计算机科技有限公司 | 网页变化监控方法及装置 |
| CN106202529A (zh) * | 2016-07-22 | 2016-12-07 | 浪潮(北京)电子信息产业有限公司 | 一种页面渲染方法及装置 |
| EP3104279A1 (en) * | 2015-06-12 | 2016-12-14 | Micro Focus IP Development Ltd | Testing interactive network systems |
| US20170357624A1 (en) * | 2016-06-10 | 2017-12-14 | International Business Machines Corporation | Generating a Document Object Model (DOM) Differential |
| US10083159B1 (en) * | 2016-07-13 | 2018-09-25 | Screen Share Technology Ltd. | Method for recording, editing and reproduction of web browser session |
| CN111309547A (zh) * | 2020-01-21 | 2020-06-19 | 北京百度网讯科技有限公司 | 网页信息获取方法、装置和电子设备 |
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
| CN111782999A (zh) * | 2020-06-29 | 2020-10-16 | 中国工商银行股份有限公司 | 一种页面展示方法、装置、设备及系统 |
-
2020
- 2020-10-21 CN CN202011134853.6A patent/CN112307384B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102841901A (zh) * | 2011-06-23 | 2012-12-26 | 腾讯科技（深圳）有限公司 | 一种网页显示的方法和装置 |
| CN103699600A (zh) * | 2013-12-13 | 2014-04-02 | 北京奇虎科技有限公司 | 网页快照的数据处理方法和浏览器 |
| CN105630843A (zh) * | 2014-11-17 | 2016-06-01 | 广州市动景计算机科技有限公司 | 网页变化监控方法及装置 |
| EP3104279A1 (en) * | 2015-06-12 | 2016-12-14 | Micro Focus IP Development Ltd | Testing interactive network systems |
| US20170357624A1 (en) * | 2016-06-10 | 2017-12-14 | International Business Machines Corporation | Generating a Document Object Model (DOM) Differential |
| US10083159B1 (en) * | 2016-07-13 | 2018-09-25 | Screen Share Technology Ltd. | Method for recording, editing and reproduction of web browser session |
| CN106202529A (zh) * | 2016-07-22 | 2016-12-07 | 浪潮(北京)电子信息产业有限公司 | 一种页面渲染方法及装置 |
| CN111309547A (zh) * | 2020-01-21 | 2020-06-19 | 北京百度网讯科技有限公司 | 网页信息获取方法、装置和电子设备 |
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
| CN111782999A (zh) * | 2020-06-29 | 2020-10-16 | 中国工商银行股份有限公司 | 一种页面展示方法、装置、设备及系统 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113961858A (zh) * | 2021-10-18 | 2022-01-21 | 广州创乐出海科技有限公司 | 一种商品页面更新方法、装置、计算机设备和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112307384B (zh) | 2024-05-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109101425B (zh) | 一种动态化的页面ab测试的指标埋点方法和装置 | |
| CN108399072B (zh) | 应用页面更新方法和装置 | |
| CN111818123A (zh) | 网络前端远程回放方法、装置、设备及存储介质 | |
| CN104765746B (zh) | 用于移动通讯终端浏览器的数据处理方法和装置 | |
| CN110909320A (zh) | 一种网页水印防篡改的方法、装置、介质和电子设备 | |
| CN111506844B (zh) | 页面处理方法、设备及计算机存储介质 | |
| CN111488244A (zh) | 一种编辑异常恢复方法、装置、电子设备及存储介质 | |
| US20240119223A1 (en) | Method, apparatus and electronic device for field merging | |
| CN113987393A (zh) | 一种网页操作记录器、系统、装置及方法 | |
| CN107426588B (zh) | 一种获取电视机配置信息方法、系统及存储装置 | |
| CN112307384B (zh) | 页面快照展示方法、装置、电子设备及存储介质 | |
| CN109240664B (zh) | 一种采集用户行为信息的方法及终端 | |
| CN108874373B (zh) | 向网页内插入信息的方法及装置、显示终端及存储介质 | |
| US9104573B1 (en) | Providing relevant diagnostic information using ontology rules | |
| CN106020616B (zh) | 桌面快链图标的更新方法和装置 | |
| CN115809056A (zh) | 组件复用实现方法、装置和终端设备、可读存储介质 | |
| KR101111956B1 (ko) | 컴퓨팅 장치의 모니터링 내용 제공 시스템 및 방법 | |
| CN115809390A (zh) | 用户反馈方法及其装置、设备、介质 | |
| CN111352917B (zh) | 信息录入方法、装置、电子设备及存储介质 | |
| CN101772196A (zh) | 处理移动终端发送的信息的方法和系统以及代理服务器 | |
| CN114048048A (zh) | 信息分享方法、装置、电子设备及存储介质 | |
| CN112051952A (zh) | 图片动态浏览方法、装置、电子设备及可读存储介质 | |
| CN103491234A (zh) | 一种数据处理的方法及一种电子设备 | |
| CN107656947B (zh) | 一种多媒体信息播放方法及装置 | |
| CN114579908A (zh) | 内容发布方法、装置、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |