CN113760149A - 页面分屏系统、方法和装置 - Google Patents
页面分屏系统、方法和装置 Download PDFInfo
- Publication number
- CN113760149A CN113760149A CN202110119533.1A CN202110119533A CN113760149A CN 113760149 A CN113760149 A CN 113760149A CN 202110119533 A CN202110119533 A CN 202110119533A CN 113760149 A CN113760149 A CN 113760149A
- Authority
- CN
- China
- Prior art keywords
- page
- document
- split
- block
- user
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种页面分屏系统、方法和装置,涉及计算机技术领域。该系统的一具体实施方式包括:页面区块选取工具,用于向用户提供在待分屏页面上选取页面区块的服务;文档生成单元,用于响应于用户的页面区块选取操作,生成页面文档,并将页面文档保存于文档片段缓存池;页面文档选取工具,用于向用户提供查看文档片段缓存池内的页面文档的可视化窗口以及通过可视化窗口选取目标页面文档的服务;页面渲染代理单元,用于响应于用户选取目标页面文档的操作,对目标页面文档进行渲染,得到目标页面,将目标页面拼接到待分屏页面中,以进行显示。该实施方式可以自定义划定和选取分屏展示内容,节省了展示空间;节省了流量消耗;避免重复交互行为。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种页面分屏系统、方法和装置。
背景技术
目前,网页内容越来越丰富,可能会出现网页内容长度或宽度超出屏幕视口的大小。当网页内容长度或宽度超出屏幕视口时,用户需要滑动翻页才能查看完整的网页内容。在一些特定的场合下,用户需要对比查看页面中两个距离较远的区块内容时,例如用户在页面底部填写报名表单的同时需要查看页面顶部的报名须知,这种情况下,由于软键盘的弹出进一步挤占了屏幕展示空间,用户不得不在狭小的展示空间中反复滑动页面来切换表单填写和须知阅读,存在很多不便。为了解决该问题,分屏显示技术应运而生,即将屏幕展示空间切分成两个视口区域,两个视口区域各自单独展示不同的页面。通过这种方式,可以将同一个页面重放两次,在第一个子区域内将页面滑动到顶部,第二个子区域将页面滑动到底部,实现同时查看页面的不同区块内容。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:两个视口区域逻辑关系上是平等的,因此常见的分屏技术是简单将屏幕展示空间平均分配。即使能够自定义划分视口区域占据屏幕的比例,用户需要查看或对比的内容往往只有页面的一部分,用整个页面做分屏展示,不仅挤占了多余的空间,而且造成内存的额外消耗;每次打开分屏功能,对单个页面来说,相当于额外重新打开一次页面,造成流量消耗。由于视口区域逻辑关系是平等的,因此两个视口可以独立的进行交互操作,例如每个视口区域都可以单独唤起软键盘进行输入,这种行为会造成用户的困惑。
发明内容
有鉴于此,本发明实施例提供一种页面分屏系统、方法和装置,能够自定义划定和选取分屏内容,不需要展示整个页面,节省了展示空间;分屏内容由文档片段缓存池中获取,不需要重新向服务器请求获取,节省了流量消耗;由于分屏内容是作为原始页面的一部分插入原始页面,所有的交互操作都在本页面进行,避免引发重复交互行为。
为实现上述目的,根据本发明实施例的一个方面,提供了一种页面分屏系统,所述系统包括:
页面区块选取工具,用于向用户提供在待分屏页面上选取页面区块的服务;
文档生成单元,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档,并将所述页面文档保存于文档片段缓存池;
页面文档选取工具,用于向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口以及通过所述可视化窗口选取目标页面文档的服务;
页面渲染代理单元,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
可选地,所述文档生成单元还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;根据所述位置信息,确定所述页面区块的渲染资源;根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
可选地,所述文档生成单元还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
可选地,所述文档生成单元还用于:确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
可选地,所述文档生成单元还用于:根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;解析所述DOM节点,确定所述页面区块的渲染资源。
可选地,所述文档生成模块还用于:根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
可选地,所述系统还包括标识生成单元,用于为所述文档片段缓存池内的页面文档生成标识信息。
可选地,所述系统还包括分屏开启单元,用于响应于用户的操作,开启分屏展示功能。
可选地,所述系统还包括调整单元,用于响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
可选地,所述页面渲染代理单元还用于利用隔离性的容器对所述目标页面文档进行渲染。
为实现上述目的,根据本发明实施例的另一个方面,提供了一种页面分屏方法,包括:
响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
可选地,响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档包括:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;
根据所述位置信息,确定所述页面区块的渲染资源;
根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
可选地,响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息包括:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;
根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
可选地,根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息包括:
确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;
根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
可选地,根据所述位置信息,确定所述页面区块的渲染资源包括:
根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;
解析所述DOM节点,确定所述页面区块的渲染资源。
可选地,根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点包括:
根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;
根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
可选地,在将所述页面文档存储于文档片段缓存池之后,所述方法还包括:为所述文档片段缓存池内的页面文档生成标识信息。
可选地,在响应于用户在待分屏页面上的页面区块选取操作之前,所述方法还包括:响应于用户的操作,开启分屏展示功能。
可选地,所述方法还包括响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
可选地,所述对所述目标页面文档进行渲染包括:利用隔离性的容器对所述目标页面文档进行渲染。
为实现上述目的,根据本发明实施例的又一个方面,提供了一种页面分屏装置,包括:
文档生成模块,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
缓存模块,用于将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
展示模块,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
可选地,所述文档生成模块还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;根据所述位置信息,确定所述页面区块的渲染资源;根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
可选地,所述文档生成模块还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
可选地,所述文档生成模块还用于:确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
可选地,所述文档生成模块还用于:根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;解析所述DOM节点,确定所述页面区块的渲染资源。
可选地,所述文档生成模块还用于:根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
可选地,在将所述页面文档存储于文档片段缓存池之后,所述装置还包括标识生成单元,用于为所述文档片段缓存池内的页面文档生成标识信息。
可选地,所述装置还包括分屏开启模块,用于响应于用户的操作,开启分屏展示功能。
可选地,所述装置还包括调整模块,用于响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
可选地,所述展示模块还用于:利用隔离性的容器对所述目标页面文档进行渲染。
为实现上述目的,根据本发明实施例的再一个方面,提供了一种电子设备,包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明实施例的页面分屏方法。
为实现上述目的,根据本发明实施例的再一个方面,提供了一种计算机可读介质,其上存储有计算机程序,所述程序被处理器执行时实现本发明实施例的页面分屏方法。
上述发明中的一个实施例具有如下优点或有益效果:因为采用页面区块选取工具,用于向用户提供在待分屏页面上选取页面区块的服务;文档生成单元,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档,并将所述页面文档保存于文档片段缓存池;页面文档选取工具,用于向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口以及通过所述可视化窗口选取目标页面文档的服务;页面渲染代理单元,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示的技术手段,所以能够自定义划定和选取分屏内容,不需要展示整个页面,节省了展示空间;分屏内容由文档片段缓存池中获取,不需要重新向服务器请求获取,节省了流量消耗;由于分屏内容是作为页面的一部分插入页面,所有的交互操作都在本页面进行,避免引发重复交互行为。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:
图1是本发明实施例的页面分屏系统的主要模块的示意图;
图2是本发明实施例的页面分屏系统的页面区块的示意图;。
图3是本发明实施例的页面分屏方法的主要流程的示意图;
图4是本发明实施例的页面分屏方法的子流程的示意图;
图5是本发明实施例的页面分屏装置的主要模块的示意图;
图6是本发明实施例可以应用于其中的示例性系统架构图;
图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
图1是本发明实施例的页面分屏系统100的主要模块的示意图。如图1所示,该系统100包括页面区块选取工具101、文档生成单元102、页面文档选取工具103和页面渲染代理单元104。
其中,页面区块选取工具101,用于向用户提供在待分屏页面上选取页面区块的服务。本实施例中的待分屏页面可以是WEB页面,本发明实施例在此不作限制。页面区块选取工具101可以向用户提供点击或划线等方式选取页面区块的服务。作为具体的示例,可以在显示屏幕上设置页面区块选取工具,通过该页面区块选取工具,用户可以灵活选取需要分屏展示的页面内容。在用户选取页面区块之后,可以在显示屏幕上显示确认弹框,以提示用户进行确认。
文档生成单元102,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档,并将所述页面文档保存于文档片段缓存池。在本实施例中,用户利用页面区块选取工具101提供的服务在待分屏的页面上划定需要分屏展示的内容,该文档生成单元102记录用户所选取的页面区块的位置和大小,并记录该页面区块的渲染资源,将该页面区块和该页面区块的渲染资源生成对应的页面文档,并将所述页面文档保存于文档片段缓存池。作为示例,页面区块的渲染资源可以包括图片资源、CSS资源、JS资源等。其中,CSS指层叠样式表(Cascading Style Sheets)。JS是JavaScript文件的扩展名,例如xx.js,JavaScript是一种程序语言,主要用于网页的特效、功能的脚本编程。CSS资源可以通过对CSS渲染树进行分析。JS资源可以通过析监听器和事件处理进行分析。图片资源可以通过对节点类型进行分析。
具体的,该文档生成单元102还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;根据所述位置信息,确定所述页面区块的渲染资源;根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
其中,文档生成单元102确定所述页面区块的位置信息的步骤包括:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。文档生成单元102根据所述位置信息,确定所述页面区块的渲染资源的步骤包括:根据所述页面区块的位置信息,确定包裹所述页面区块的最小层级的DOM节点;解析所述DOM节点,确定所述页面区块的渲染资源。其中,DOM(Document Object Model,文档对象模型)是一种基于树的API(ApplicationProgramming Interface,应用程序接口)文档,它要求在处理过程中整个文档都表示在存储器中。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个节点表示了一个HTML标签或标签内的文本项。在本实施例中,利用DOM的接口解析该最小层级的DOM节点的结构(如解析该DOM节点的父子关系、兄弟关系等)。
更具体的,文档生成单元102确定所述页面区块的渲染资源的步骤包括:确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息;根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点;解析所述DOM节点,确定所述页面区块的渲染资源。
作为具体的示例,如图2所示,在该图2中,椭圆形的区域为用户选取的页面区块,矩形区域为该页面区块最小外包矩形区域。文档生成单元102生成页面文档的过程包括:
(1)该最小外包矩形区域相对屏幕的偏移量为(left,top)以及该最小外包矩形区域本身的宽度和高度。如该最小外包矩形区域相对屏幕的偏移量为(left,top),该最小外包矩形区域本身的宽度为width,该最小外包矩形区域本身的高度为height。
(2)根据待分屏页面当前的滚动位置(scrollX,scrollY)和该最小外包矩形区域相对屏幕的偏移量(left,top),得到该页面区块相对DOM文档的位置。该页面区块相对DOM文档的偏移在垂直方向上为Y=top+scrollY,水平方向上为X=left+scrollX。
(3)解析DOM文档结构,根据页面区块相对DOM文档的偏移量(X,Y)以及最小外包矩形区域的宽高(width,height),定位到包裹该页面区块的最小层级的DOM节点,即用户选取的父节点。
(4)解析该最小层级的DOM节点,递归的分析渲染该最小层级的DOM节点所需的渲染资源,例如CSS、JS、图片资源等。
(5)将该页面区块和该页面区块的渲染资源作为一个整体的页面文档添加到文档片段缓存池中。
文档片段缓存池用于存储所述页面文档。用户选取的页面区块将以文档片段的方式添加至文档片段缓存池中。该文档片段缓存池用于存储和管理页面文档。
在可选的实施例中,该页面分屏系统100还包括标识生成单元,用于为所述文档片段缓存池内的页面文档生成标识信息,例如为页面文档生成唯一编号ID。
页面文档选取工具104,用于向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口以及通过所述可视化窗口选取目标页面文档的服务。用户可以通过该可视化窗口删除、查找和选取需要的页面文档。当用户需要使用文档片段缓存池中的页面文档时,就可以通过该可视化窗口从文档片段缓存池中选取1个或多个页面文档,作为后续分屏渲染的资源导入到页面渲染代理单元105中。
页面渲染代理单元105,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
页面渲染代理单元105在检测到用户通过所述可视化窗口选取目标页面文档的操作之后,向页面服务器请求获取原始的待分屏页面的渲染资源和数据,从文档片段缓存池中拉取用户所选取的目标页面文档的渲染资源,并分别进行渲染,将渲染得到的目标页面与待分屏页面进行拼接,然后返回给用户。相对于现有技术,本发明实施例页面分屏方法不需要向页面服务器拉取分屏页面的资源,因此节省了流量。
其中,目标页面与待分屏页面进行拼接的方式可以灵活设置,例如可以拼接在待分屏页面的顶端,待分屏页面向下滑动或翻页时,该目标页面依旧位于该待分屏页面的顶端。在其他可选的实施例中,目标页面还可以浮动在待分屏页面上面。
本发明实施例的页面分屏系统,通过页面区块选取工具,用于向用户提供在待分屏页面上选取页面区块的服务;文档生成单元,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档,并将所述页面文档保存于文档片段缓存池;页面文档选取工具,用于向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口以及通过所述可视化窗口选取目标页面文档的服务;页面渲染代理单元,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示的技术手段,实现了自定义划定和选取分屏内容,不需要展示整个页面,节省了展示空间;分屏内容由文档片段缓存池中获取,不需要重新向服务器请求获取,节省了流量消耗;由于分屏内容是作为页面的一部分插入页面,所有的交互操作都在本页面进行,避免引发重复交互行为。
在可选的实施例中,该页面分屏系统还包括调整单元,用于响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。为了防止分屏资源占据太多的屏幕,可以对目标页面的大小进行调整,例如对目标页面进行缩小或放大。
在可选的实施例中,为了保证分屏内容不对原始的待分屏页面的数据或布局造成干扰,所述页面渲染代理单元还用于利用隔离性的容器对所述目标页面文档进行渲染。作为示例,隔离性的容器可以为IFRAME。IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
图3是本发明实施例的一种页面分屏方法的主要流程的示意图。如图3所示,该方法包括:
步骤S301:响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
步骤S302:将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
步骤S303:响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
可选地,如图4所示,响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档的步骤包括:
步骤S401:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;
步骤S402:根据所述位置信息,确定所述页面区块的渲染资源;
步骤S403:根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
可选地,响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息包括:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;
根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
可选地,根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息包括:
确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;
根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
可选地,根据所述位置信息,确定所述页面区块的渲染资源包括:
根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;
解析所述DOM节点,确定所述页面区块的渲染资源。
可选地,根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点包括:
根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;
根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
可选地,在将所述页面文档存储于文档片段缓存池之后,所述方法还包括:为所述文档片段缓存池内的页面文档生成标识信息。
可选地,在响应于用户在待分屏页面上的页面区块选取操作之前,所述方法还包括:响应于用户的操作,开启分屏展示功能。
可选地,所述方法还包括响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
可选地,所述对所述目标页面文档进行渲染包括:利用隔离性的容器对所述目标页面文档进行渲染。
本发明实施例的页面分屏方法,通过响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示,实现了自定义划定和选取分屏内容,不需要展示整个页面,节省了展示空间;分屏内容由文档片段缓存池中获取,不需要重新向服务器请求获取,节省了流量消耗;由于分屏内容是作为页面的一部分插入页面,所有的交互操作都在本页面进行,避免引发重复交互行为。
图5是本发明实施例的一种页面分屏装置500的主要模块的示意图,如图5所示,该装置500包括:
文档生成模块501,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
缓存模块502,用于将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
展示模块503,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
可选地,所述文档生成模块501还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;根据所述位置信息,确定所述页面区块的渲染资源;根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
可选地,所述文档生成模块501还用于:响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
可选地,所述文档生成模块501还用于:确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
可选地,所述文档生成模块501还用于:根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;解析所述DOM节点,确定所述页面区块的渲染资源。
可选地,所述文档生成模块501还用于:根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
可选地,在将所述页面文档存储于文档片段缓存池之后,所述装置还包括标识生成单元,用于为所述文档片段缓存池内的页面文档生成标识信息。
可选地,所述装置还包括分屏开启模块,用于响应于用户的操作,开启分屏展示功能。
可选地,所述装置还包括调整模块,用于响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
可选地,所述展示模块503还用于:利用隔离性的容器对所述目标页面文档进行渲染。
本发明实施例的页面分屏装置,实现了自定义划定和选取分屏内容,不需要展示整个页面,节省了展示空间;分屏内容由文档片段缓存池中获取,不需要重新向服务器请求获取,节省了流量消耗;由于分屏内容是作为页面的一部分插入页面,所有的交互操作都在本页面进行,避免引发重复交互行为。
上述装置可执行本发明实施例所提供的方法,具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节,可参见本发明实施例所提供的方法。
图6示出了可以应用本发明实施例的页面分屏方法或页面分屏装置的示例性系统架构600。
如图6所示,系统架构600可以包括终端设备601、602、603,网络604和服务器605。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备601、602、603通过网络604与服务器605交互,以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用,例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备,包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器605可以是提供各种服务的服务器,例如对用户利用终端设备601、602、603所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理,并将处理结果(例如目标推送信息、产品信息)反馈给终端设备。
需要说明的是,本发明实施例所提供的页面分屏方法一般由服务器605执行,相应地,页面分屏装置一般设置于服务器605中。
应该理解,图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
下面参考图7,其示出了适于用来实现本发明实施例的终端设备的计算机系统700的结构示意图。图7示出的终端设备仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图7所示,计算机系统700包括中央处理单元(CPU)701,其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中,还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。
以下部件连接至I/O接口705:包括键盘、鼠标等的输入部分706;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707;包括硬盘等的存储部分708;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器710上,以便于从其上读出的计算机程序根据需要被安装入存储部分708。
特别地,根据本发明公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本发明公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分709从网络上被下载和安装,和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时,执行本发明的系统中限定的上述功能。
需要说明的是,本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的根据硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中,例如,可以描述为:一种处理器包括发送模块、获取模块、确定模块和第一处理模块。其中,这些模块的名称在某种情况下并不构成对该单元本身的限定,例如,发送模块还可以被描述为“向所连接的服务端发送图片获取请求的模块”。
作为另一方面,本发明还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的设备中所包含的;也可以是单独存在,而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该设备执行时,使得该设备包括:
响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
本发明实施例的技术方案,实现了自定义划定和选取分屏内容,不需要展示整个页面,节省了展示空间;分屏内容由文档片段缓存池中获取,不需要重新向服务器请求获取,节省了流量消耗;由于分屏内容是作为页面的一部分插入页面,所有的交互操作都在本页面进行,避免引发重复交互行为。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。
Claims (23)
1.一种页面分屏系统,其特征在于,所述系统包括:
页面区块选取工具,用于向用户提供在待分屏页面上选取页面区块的服务;
文档生成单元,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档,并将所述页面文档保存于文档片段缓存池;
页面文档选取工具,用于向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口以及通过所述可视化窗口选取目标页面文档的服务;
页面渲染代理单元,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
2.根据权利要求1所述的系统,其特征在于,所述文档生成单元还用于:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;
根据所述位置信息,确定所述页面区块的渲染资源;
根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
3.根据权利要求2所述的系统,其特征在于,所述文档生成单元还用于:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;
根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
4.根据权利要求3所述的系统,其特征在于,所述文档生成单元还用于:
确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;
根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
5.根据权利要求4所述的系统,其特征在于,所述文档生成单元还用于:
根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;
解析所述DOM节点,确定所述页面区块的渲染资源。
6.根据权利要求5所述的系统,其特征在于,所述文档生成模块还用于:
根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;
根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
7.根据权利要求1所述的系统,其特征在于,所述系统还包括标识生成单元,用于为所述文档片段缓存池内的页面文档生成标识信息。
8.根据权利要求1所述的系统,其特征在于,所述系统还包括分屏开启单元,用于响应于用户的操作,开启分屏展示功能。
9.根据权利要求1所述的系统,其特征在于,所述系统还包括调整单元,用于响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
10.根据权利要求1所述的系统,其特征在于,所述页面渲染代理单元还用于利用隔离性的容器对所述目标页面文档进行渲染。
11.一种页面分屏方法,其特征在于,包括:
响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
12.根据权利要求11所述的方法,其特征在于,响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档包括:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息;
根据所述位置信息,确定所述页面区块的渲染资源;
根据所述页面区块和所述页面区块的渲染资源,生成与所述页面区块对应的页面文档。
13.根据权利要求12所述的方法,其特征在于,响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的位置信息包括:
响应于用户在待分屏页面上的页面区块选取操作,确定所述页面区块的最小外包矩形区域;
根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息。
14.根据权利要求13所述的方法,其特征在于,根据所述页面区块的最小外包矩形区域,确定所述页面区块的位置信息包括:
确定所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置;
根据所述最小外包矩形区域的尺寸信息以及所述最小外包矩形区域相对显示屏幕的位置,确定所述页面区块的位置信息。
15.根据权利要求14所述的方法,其特征在于,根据所述位置信息,确定所述页面区块的渲染资源包括:
根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点;
解析所述DOM节点,确定所述页面区块的渲染资源。
16.根据权利要求15所述的方法,其特征在于,根据所述位置信息,确定包裹所述页面区块的最小层级的DOM节点包括:
根据所述最小外包矩形区域相对显示屏幕的位置和所述待分屏页面的滚动位置,确定所述页面区块相对所述待分屏页面对应的DOM文档的位置;
根据所述页面区块相对所述待分屏页面对应的DOM文档的位置和所述最小外包矩形区域的尺寸信息,确定包裹所述页面区块的最小层级的DOM节点。
17.根据权利要求11所述的方法,其特征在于,在将所述页面文档存储于文档片段缓存池之后,所述方法还包括:为所述文档片段缓存池内的页面文档生成标识信息。
18.根据权利要求11所述的方法,其特征在于,在响应于用户在待分屏页面上的页面区块选取操作之前,所述方法还包括:响应于用户的操作,开启分屏展示功能。
19.根据权利要求11所述的方法,其特征在于,所述方法还包括响应于用户的操作,调整显示在显示屏幕上的目标页面的尺寸。
20.根据权利要求11所述的方法,其特征在于,所述对所述目标页面文档进行渲染包括:利用隔离性的容器对所述目标页面文档进行渲染。
21.一种页面分屏装置,其特征在于,包括:
文档生成模块,用于响应于用户在待分屏页面上的页面区块选取操作,生成与所述页面区块对应的页面文档;
缓存模块,用于将所述页面文档存储于文档片段缓存池中,向用户提供查看所述文档片段缓存池内的页面文档的可视化窗口;
展示模块,用于响应于用户通过所述可视化窗口选取目标页面文档的操作,对所述目标页面文档进行渲染,得到目标页面,并将所述目标页面插入所述待分屏页面的可视区域内,以进行显示。
22.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求11-20中任一所述的方法。
23.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求11-20中任一所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110119533.1A CN113760149A (zh) | 2021-01-28 | 2021-01-28 | 页面分屏系统、方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110119533.1A CN113760149A (zh) | 2021-01-28 | 2021-01-28 | 页面分屏系统、方法和装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113760149A true CN113760149A (zh) | 2021-12-07 |
Family
ID=78786509
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110119533.1A Pending CN113760149A (zh) | 2021-01-28 | 2021-01-28 | 页面分屏系统、方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113760149A (zh) |
-
2021
- 2021-01-28 CN CN202110119533.1A patent/CN113760149A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110717120B (zh) | 一种网页列表显示方法和装置 | |
CN109683998A (zh) | 国际化实现方法、装置和系统 | |
CN110020304A (zh) | 一种加载页面的方法和装置 | |
CN113138827B (zh) | 展示数据的方法、装置、电子设备和介质 | |
CN110795649A (zh) | 目标页面展示方法、装置、系统及电子设备 | |
CN110874251A (zh) | 一种实现图片木桶布局的方法和装置 | |
CN111294395A (zh) | 一种终端页面传输方法、装置、介质和电子设备 | |
CN115470432A (zh) | 一种页面渲染方法、装置、电子设备及计算机可读介质 | |
CN113220381A (zh) | 一种点击数据展示方法和装置 | |
CN113553123B (zh) | 数据处理方法、装置、电子设备及存储介质 | |
CN112486783B (zh) | 一种进度条的显示方法和装置 | |
CN112947918A (zh) | 数据展示方法和装置 | |
CN113360106A (zh) | 一种网页打印方法和装置 | |
CN110647327B (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
CN113282852A (zh) | 编辑网页的方法和装置 | |
CN113784194A (zh) | 一种视频播放器的嵌入方法和装置 | |
CN104077292B (zh) | 网页信息的存储方法及设备 | |
CN113760149A (zh) | 页面分屏系统、方法和装置 | |
CN112101239B (zh) | 一种查找pdf文件中缺失字符的方法、装置和系统 | |
CN110020320A (zh) | 缓存页面图片的方法和装置 | |
CN114528510A (zh) | 网页数据处理的方法、装置、电子设备及介质 | |
CN113760205A (zh) | 一种图片的显示方法和装置 | |
CN109190097B (zh) | 用于输出信息的方法和装置 | |
CN113761415A (zh) | 一种页面展示方法和装置 | |
CN113688336A (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 |