CN111506848A - 网页处理方法、装置、设备及可读存储介质 - Google Patents

网页处理方法、装置、设备及可读存储介质 Download PDF

Info

Publication number
CN111506848A
CN111506848A CN201910093053.5A CN201910093053A CN111506848A CN 111506848 A CN111506848 A CN 111506848A CN 201910093053 A CN201910093053 A CN 201910093053A CN 111506848 A CN111506848 A CN 111506848A
Authority
CN
China
Prior art keywords
target
webpage
component
web page
target webpage
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
Application number
CN201910093053.5A
Other languages
English (en)
Inventor
刘凌凌
易旭昕
李海翔
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201910093053.5A priority Critical patent/CN111506848A/zh
Publication of CN111506848A publication Critical patent/CN111506848A/zh
Pending legal-status Critical Current

Links

Images

Abstract

本发明公开了一种网页处理方法、装置、设备及可读存储介质。该方法包括:识别待展示的目标网页是否包括目标网页元素,目标网页元素与可嵌入目标网页的目标组件唯一对应;当目标网页包括目标网页元素时,获取与目标网页元素对应的目标组件;将与目标网页对应的目标网页视图以及目标组件,混合渲染到目标窗口,通过目标窗口展示嵌入有目标组件的目标网页。

Description

网页处理方法、装置、设备及可读存储介质
技术领域
本发明涉及网络技术领域,更具体地,涉及一种网页处理方法、装置、设备及可读存储介质。
背景技术
通过访问网页获取网页展示的信息,已经成为人们日常获取信息的重要途径。网页能展示丰富多样的网页内容以及绚烂多变的视觉效果,给予人们较好的信息获取体验。
而随着用户对网页展示的需求日趋多样化,用户期望网页能实现一些更复杂的功能(例如添加一个地图),如果借助网页所基于的标准HTML(超文本标记语言)和JS(直译式脚本语言)等技术实现,需要重新进行开发,实现比较复杂并且展现效率不高,如果为了避免重新进行开发,在网页上使用现行的例如Flash插件等插件机制实现,必须按照对应的插件所规定的标准实现,实现效率较低并且性能较差,始终都不能与基于操作系统提供的Native(原生)组件实现的性能媲美,但是,目前的网页却不能嵌入Native组件使用。
发明内容
本发明的一个目的是提供一种用于处理网页的新技术方案。
根据本发明的第一方面,提供了一种网页处理方法,其中,包括:
识别待展示的目标网页是否包括目标网页元素,所述目标网页元素与可嵌入所述目标网页的目标组件唯一对应;
当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件;
将与所述目标网页对应的目标网页视图以及所述目标组件,混合渲染到目标窗口,通过所述目标窗口展示嵌入有所述目标组件的所述目标网页。
可选地,所述目标网页元素是符合预设元素类型并设置有预设元素属性的网页元素;
所述识别用户访问的目标网页是否包括目标网页元素的步骤包括:
识别所述目标网页包括的每个网页元素的元素类型以及元素属性;
当在所述目标网页中识别到所述元素类型符合所述预设元素类型、并且所述元素属性符合所述预设元素属性的网页元素时,将该网页元素识别为所述目标网页元素,以确定所述目标网页包括所述目标网页元素。
可选地,所述目标组件是原生用户界面组件;
所述当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件的步骤包括:
通过预设的组件接口,获取对应的操作系统所支持的所述目标组件。
可选地,将与所述目标网页对应的目标网页视图以及所述目标组件混合渲染到目标窗口的步骤包括:
根据获取的组件绘制次序,依次将所述目标组件以及所述目标网页视图绘制到目标窗口上,以实现所述混合渲染。
可选地,所述方法还包括:
通过所述目标窗口接收到用户操作时,确定与所述用户操作对应的操作位置;
当所述操作位置在目标窗口区域中时,将与所述用户操作对应的操作事件传递到所述目标组件,触发所述目标组件处理所述操作事件,所述目标窗口区域是所述目标窗口中与所述目标组件对应的窗口区域。
可选地,所述方法还包括:
通过所述目标窗口接收到屏幕滑动操作时,获取与所述屏幕滑动操作对应的滑动操作信息,所述滑动操作信息至少包括所述滑动距离以及滑动方向;
根据所述滑动操作信息,设置所述目标组件跟随所述目标网页视图在所述目标窗口中移动展示。
可选地,所述方法还包括:
将与所述目标组件对应的所述目标网页元素设置在网页页面中,生成所述包括目标网页元素的所述目标网页。
根据本发明的第二方面,提供一种网页处理装置,其中,包括:
目标识别单元,用于识别待展示的目标网页是否包括目标网页元素,所述目标网页元素与可嵌入所述目标网页的目标组件唯一对应;
组件获取单元,用于当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件;
混合渲染单元,用于将与所述目标网页对应的目标网页视图以及所述目标组件,混合渲染到目标窗口,通过所述目标窗口展示嵌入有所述目标组件的所述目标网页。
根据本发明的第三方面,提供一种网页处理设备,其中,包括:
显示装置;
存储器,用于存储可执行的指令;
处理器,用于根据所述可执行的指令的控制,运行所述网页处理设备执行如本发明的第一方面所述的网页处理方法。
根据本发明的第四方面,提供一种可读存储介质,其中,所述可读存储介质中存储有可被计算机读取执行的计算机程序,所述计算机程序用于在被计算机读取运行时,执行如本发明的第一方面所述的网页处理方法。
根据本公开的一个实施例,通过识别到待展示的目标网页包括与可嵌入目标网页的目标组件唯一对应的目标网页元素时,获取与目标网页元素对应的目标组件,将与目标网页对应的目标网页视图以及目标组件混合渲染到目标窗口上,通过目标窗口展示嵌入有目标组件的目标网页,通过将目标组件转化为目标网页的一个网页元素实现将目标组件嵌入目标网页中使用,以此突破现有的网页插件机制所规定的标准的限制,实现效率较高,并且,可以通过网页所基于的标准网页技术(例如HTML/CSS/JS等)控制目标组件,使得目标组件与目标网页的网页元素能够无缝融合,获取更好的展示性能,给予用户更好的网页展示体验。尤其适用于目标组件是原生用户界面组件的场景,可以利用原生用户界面组件的优异性能,满足用户多样化的网页展示需求。
通过以下参照附图对本发明的示例性实施例的详细描述,本发明的其它特征及其优点将会变得清楚。
附图说明
被结合在说明书中并构成说明书的一部分的附图示出了本发明的实施例,并且连同其说明一起用于解释本发明的原理。
图1是显示可用于实现本发明的实施例的电子设备1000的硬件配置的例子的框图。
图2示出了本发明的实施例的网页处理方法的流程图。
图3是本发明的实施例的网页处理方法的例子的示意图。
图4示出了本发明的实施例的网页处理装置3000的框图。
图5示出了本发明的实施例的网页处理设备4000的框图。
具体实施方式
现在将参照附图来详细描述本发明的各种示例性实施例。应注意到:除非另外具体说明,否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。
以下对至少一个示例性实施例的描述实际上仅仅是说明性的,决不作为对本发明及其应用或使用的任何限制。
对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论,但在适当情况下,所述技术、方法和设备应当被视为说明书的一部分。
在这里示出和讨论的所有例子中,任何具体值应被解释为仅仅是示例性的,而不是作为限制。因此,示例性实施例的其它例子可以具有不同的值。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步讨论。
<硬件配置>
图1是示出可以实现本发明的实施例的电子设备1000的硬件配置的框图。
电子设备1000可以是便携式电脑、台式计算机、手机、平板电脑等。如图1所示,电子设备1000可以包括处理器1100、存储器1200、接口装置1300、通信装置1400、显示装置1500、输入装置1600、扬声器1700、麦克风1800等等。其中,处理器1100可以是中央处理器CPU、微处理器MCU等。存储器1200例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。接口装置1300例如包括USB接口、耳机接口等。通信装置1400例如能够进行有线或无线通信,具体地可以包括Wifi通信、蓝牙通信、2G/3G/4G/5G通信等。显示装置1500例如是液晶显示屏、触摸显示屏等。输入装置1600例如可以包括触摸屏、键盘、体感输入等。用户可以通过扬声器1700和麦克风1800输入/输出语音信息。
图1所示的电子设备仅仅是说明性的并且决不意味着对本发明、其应用或使用的任何限制。应用于本发明的实施例中,电子设备1000的所述存储器1200用于存储指令,所述指令用于控制所述处理器1100进行操作以执行本发明实施例提供的任意一项网页处理方法。本领域技术人员应当理解,尽管在图1中对电子设备1000示出了多个装置,但是,本发明可以仅涉及其中的部分装置,例如,电子设备1000只涉及处理器1100和存储装置1200。技术人员可以根据本发明所公开方案设计指令。指令如何控制处理器进行操作,这是本领域公知,故在此不再详细描述。
本发明实施例的总体构思,是提供一种处理网页的技术方案,通过识别到待展示的目标网页包括与可嵌入目标网页的目标组件唯一对应的目标网页元素时,获取与目标网页元素对应的目标组件,将与目标网页对应的目标网页视图以及目标组件混合渲染到目标窗口上,通过目标窗口展示嵌入有目标组件的目标网页,通过将目标组件转化为目标网页的一个网页元素实现将目标组件嵌入目标网页中使用,以此突破现有的网页插件机制所规定的标准的限制,实现效率较高,并且,可以通过网页所基于的标准网页技术(例如HTML/CSS/JS等)控制目标组件,使得目标组件与目标网页的网页元素能够无缝融合,获取更好的展示性能,给予用户更好的网页展示体验。尤其适用于目标组件是原生用户界面组件的场景,可以利用原生用户界面组件的优异性能,满足用户多样化的网页展示需求。
<实施例>
在本实施例中,提供一种网页处理方法。该网页可以是任意的具有对应网页内容的页面。
如图2所示,该网页处理方法包括:步骤S2100-S2300。
步骤S2100,识别待展示的目标网页是否包括目标网页元素。
待展示的目标网页,可以是用户请求访问的网页,也可以是应用自行触发打开的网页,还可以是应用被调用过程中要跳转的网页。
目标网页元素是目标网页中包括一个网页元素。网页元素可以是文字、图片、音频、动画、视频、交互控件等其中一种。在本实施例中,目标网页元素与可嵌入目标网页的目标组件唯一对应。
目标组件是可以被嵌入网页中、提供对应的组件功能的组件。例如,目标组件可以是原生(Native)组件,原生组件是指基于对应的操作系统(例如安卓操作系统)所支持的API(Appl ication Programming Interface,应用程序接口)开发的、提供对应功能的组件。更具体的例子中,目标组件可以是原生用户界面组件(Native UI组件)。原生用户界面组件可以是由对应的操作系统提供的或者支持的、与用户界面(UI)相关的原生组件,提供对应的与用户界面相关的组件功能,例如,原生用户界面组件可以是Native View(原生视图),该Native View可以用于展示一个地图、广告或者视频等。
在一个例子中,目标组件可以是第三方开发、运营或提供的第三方组件库中的组件,例如第三方组件库中提供的原生用户界面组件。使用第三方组件库中的组件作为目标组件,可以更灵活地调用第三方组件库的资源满足用户多样化的网页展示需求。
或者,目标组件还可以由期望在网页中嵌入目标组件使用的应用提供,例如,可以由期望在加载的网页中嵌入目标组件使用的Native APP(原生应用)提供,由此任意的应用可以通过本实施例中提供的网页处理方法,将期望使用的目标组件嵌入对应的网页中使用。
通过在目标网页中嵌入目标组件使用,可以直接通过目标组件提供对应的组件功能以满足用户的网页展示需求,而无需对目标网页通过网页所基于的标准网页技术(例如超文本标记语言HTML、层叠样式表CSS或直译式脚本语言JS等)重新针对网页展示所需的功能进行开发,并可以突破现有的网页插件机制(例如Flash插件)所规定的标准的限制,实现效率较高。并且可以通过网页所基于的标准网页技术(例如HTML/CSS/JS等)控制目标组件,使得目标组件与目标网页的网页元素能够无缝融合,获取更好的展示性能,给予用户更好的网页展示体验。尤其适用于目标组件是原生用户界面组件的场景,可以利用原生用户界面组件的优异性能,满足用户多样化的网页展示需求。
在本实施例中,通过识别目标网页中是否包括与目标组件唯一对应的目标网页元素,可以确定目标网页中是否被嵌入目标组件,以结合本实施例中的其他步骤,对嵌入目标组件的目标网页,实现目标组件嵌入目标网页的使用。
应当理解的是,当目标网页中被嵌入多个目标组件时,可以通过识别目标网页中包括分别与每个目标组件唯一对应的目标网页元素来确定,在此不一一列举。
在一个例子中,目标网页元素是符合预设元素类型并设置有预设元素属性的网页元素。该预设元素类型、预设元素属性可以根据具体的应用场景或者应用需求设置。例如,预设元素类型可以是HTML中定义的<object>标签,预设元素属性是预先定义的、用于标记属于嵌入网页的组件的特定属性信息,比如预设元素属性具体可以是某个特定的属性值,通过该特定的属性值可以识别符合该预设元素类型的网页元素与嵌入的目标组件对应,是目标网页元素,或者,该预设元素属性还可以包括对应的目标组件的标识信息以及组件显示位置、组件显示尺寸等组件属性信息。
在本例中,步骤S2100可以包括:步骤S2110-S2120。
步骤S2110,识别目标网页包括的每个网页元素的元素类型以及元素属性。
在本例中,每个网页元素都具有对应的元素类型以及元素属性。网页中包括网页元素通常基于一定的网页结构组织得到目标网页的页面,通过解析目标网页的页面文件(例如HTML文件),可以获取构成目标网页的每个网页元素的元素类型以及元素属性。并且,在解析目标网页的页面文件后,对应可以获取目标网页的网页结构。根据网页结构,可以对应实施网页的页面排版、绘制、渲染等步骤。该网页结构可以是DOM树,DOM(DocumentObject Model,文档对象模型)是以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,在本例中,DOM可以是网页的树形结构中与一个网页元素对应的网页元素节点的代称,假设预设元素类型是<object>标签,目标网页元素是对应的DOM树中一个<object>节点。步骤S2120,当在目标网页中识别到元素类型符合预设元素类型、并且元素属性符合预设元素属性的网页元素时,将该网页元素识别为目标网页元素,以确定目标网页包括目标网页元素。
例如,假设预设元素类型是<object>标签,目标网页元素是对应的DOM树中一个<object>节点,当识别到目标网页中包括一个符合<object>标签并且添加有预设元素属性的<object>节点时,可以确定目标网页中包括目标网页元素。
而当在目标网页中,未识别到元素类型符合预设元素类型、并且元素属性符合预设元素属性的网页元素时,确定目标网页不包括目标网页元素。
应当理解的是,在实际应用中,目标网页可能会识别出多个目标网页元素,分别对应一个不同的目标组件,在此不再赘述。
步骤S2200,当目标网页包括目标网页元素时,获取与目标网页元素对应的目标组件。
目标网页元素与可嵌入目标网页的目标组件唯一对应。当目标网页包括目标网页元素时,则意味着目标网页被设置嵌入目标组件。
对嵌入有目标组件的目标网页,获取与目标网页元素对应的目标组件,以结合本实施例中的其他步骤,实现目标组件嵌入目标网页的使用。
在一个例子中,目标组件是原生用户界面组件(Native UI组件),步骤S2200可以包括:
通过预设的组件接口,获取对应的操作系统所支持的目标组件。
在本例中,目标组件是原生用户界面组件,是对应的操作系统支持的、与用户界面相关的原生组件,提供对应的与用户界面相关的组件功能。对应的操作系统是具体实施本实施例的电子设备所支持的操作系统,例如,可以是安卓操作系统。
预设的组件接口可以是由对应的实施本实施例的电子设备、功能模块或者组件提供。
目标网页的绘制渲染可以通过对应的目标网页视图实施。目标网页视图,是可以将目标网页所包括的网页元素绘制到用于展示目标网页的目标窗口以完成网页渲染的网页视图(WebView)。网页视图可以是对应的操作系统提供的标准的用户界面组件(UI组件),能实现网页的加载、绘制、渲染并展示。
在本例中,目标网页视图可以是以软件开发工具包(例如Software DevelopmentKit,SDK)向外提供对应的服务的网页视图组件(例如WebView SDK)。
通过例如WebView SDK这样的网页视图组件提供的组件接口,可以支持从提供目标组件的应用层(例如提供目标组件的Native APP的应用层)获取对应的操作系统支持的目标组件,并且,在获取目标组件之后,可以将目标组件与对应的目标网页视图相互关联,以实现目标组件被嵌入与目标网页视图对应的目标网页中。
步骤S2300,将与目标网页对应的目标网页视图以及目标组件,混合渲染到目标窗口,通过目标窗口展示嵌入有目标组件的目标网页。
与目标网页对应的目标网页视图,是可以将目标网页所包括的网页元素绘制到用于展示目标网页的目标窗口以完成网页渲染的网页视图(WebView)。网页视图可以是对应的操作系统提供的标准的用户界面组件(UI组件),能实现网页的加载、绘制、渲染并展示。
目标窗口是可以用于展示目标网页的窗口。目标窗口可以是任意需要展示目标网页的应用的窗口。窗口也是可以提供人机交互服务的一种用户界面(UI)。
在本实施例中,通过获取与目标网页元素对应的目标组件,将目标组件与目标网页视图混合渲染到目标窗口上,通过目标窗口展示嵌入有目标组件的目标网页,将目标组件转化为目标网页的一个网页元素实现将目标组件嵌入目标网页中使用,以此突破现有的网页插件机制所规定的标准的限制,实现效率较高。
并且,将目标组件转化为目标网页的一个网页元素实现将目标组件嵌入目标网页,可以通过网页所基于的标准网页技术(例如HTML/CSS/JS等)控制目标组件,使得目标组件与目标网页的网页元素能够无缝融合,获取更好的展示性能,给予用户更好的网页展示体验。尤其适用于目标组件是原生用户界面组件的场景,可以利用原生用户界面组件的优异性能,满足用户多样化的网页展示需求。
在一个具体的例子中,将与目标网页对应的目标网页视图以及目标组件混合渲染到目标窗口的步骤包括:
根据获取的组件绘制次序,依次将目标组件以及目标网页视图绘制到目标窗口上,以实现混合渲染。
通常例如Android这样的操作系统会提供用户界面框架(UI框架),用于绘制用户界面(UI)。目标窗口作为一个用户界面,也可以通过操作系统提供的UI框架进行绘制。
通过Android操作系统的UI框架绘制用户界面,可以包括步骤2A-2B。
步骤2A,构建用户界面的View树。
用户界面通常由多个组件构成,这些组件通常是View(视图)。这些组件基于组件之间的层次结构,构成用户界面。通常这些构成用户界面的组件通常被组织在一个树形结构中,对应的,可以根据用户界面的View之前的层次结构,构建对应的View树,作为用户界面的组件结构。
步骤2B,遍历View树,依次将每个构成用户界面的View绘制到应用当前的窗口上。
应用当前的窗口就是输出显示的用户界面。通过遍历View树,以遍历View树得到的绘制次序,依次将每个View绘制应用当前的窗口上,就能实现用户界面的绘制渲染。
在本例中,目标窗口通过多个View构成,这些View中包括目标组件和目标网页视图。对于体现构成目标窗口的View之间的层次结构的View树进行遍历,遍历的次序就是绘制渲染目标窗口的组件绘制次序。因此,通过遍历View树,可以得到预设的组件绘制次序,根据预设的组件绘制次序,可以将目标网页视图以及目标组件混合渲染到目标窗口上,以此实现将目标组件转化为目标网页的一个网页元素来将目标组件嵌入目标网页中使用。
以上已经结合附图和例子说明本实施中的步骤S2100-S2300,对识别到的嵌入有目标组件的目标网页,将目标组件转化为目标网页的一个网页元素来将目标组件嵌入目标网页中使用。
在一个例子中,本实施例中提供的网页处理方法还可以包括:
将与目标组件对应的目标网页元素设置在网页页面中,生成包括目标网页元素的目标网页。
对于期望在网页中嵌入目标组件进行使用的用户,可以通过本例中提供的步骤,在任意的自行开发或者维护的网页页面中,设置与期望使用的目标组件对应的目标网页元素,生成对应的包含目标网页元素的目标网页,以便该目标网页在被展示时,可以根据上述步骤S2100-S2300,被识别为识别嵌入有目标组件的目标网页,将目标组件转化为目标网页的一个网页元素来将目标组件嵌入目标网页中使用。
在本例中,将与目标组件对应的目标网页元素设置在网页页面中的步骤可以包括:
将符合预设元素类型并设置有预设元素属性的网页元素,作为与目标组件对应的目标网页元素,设置在网页页面中与目标组件对应的页面位置。
预设元素类型、预设元素属性在上文中已经描述,在此不再赘述。
与目标组件对应的页面位置,是期望目标组件嵌入目标网页中使用时对应的位置,例如,与目标组件对应的页面位置可以是目标网页被作为嵌入有目标组件的网页进行展示时,目标组件对应的展示位置。
例如,预设元素类型是<object>标签,预设元素属性可以是标记与嵌入的目标组件对应的属性标识,用户可以在编写网页页面的过程中,编写<object>标签并添加对应的属性标识后,作为目标网页元素添加到对应的页面位置上,实现将与目标组件对应的目标网页元素设置在网页页面中以生成对应的目标网页,以便该目标网页被识别为识别嵌入有目标组件的目标网页,结合本实施例中的其他步骤,将目标组件转化为目标网页的一个网页元素来将目标组件嵌入目标网页中使用。
在一个例子中,本实施例中提供的网页处理方法还可以包括:步骤S2401-S2402。
步骤S2401,通过目标窗口接收到用户操作时,确定与用户操作对应的操作位置。
在本例中,目标窗口是可以提供人机交互服务的用户界面。通过目标窗口可以接收到用户实施的用户操作,该用户操作可以点击、勾选、拖动、滑动等操作。
与用户操作对应的操作位置,是用户操作实施在目标窗口中的对应位置。目标窗口可以通过与用户界面相关的组件或者接口获取与用户操作对应的操作位置,在此不再赘述。
步骤S2402,当操作位置在目标窗口区域中时,将与用户操作对应的操作事件传递到目标组件,触发目标组件处理操作事件。
在本例中,目标窗口区域是目标窗口中与目标组件对应的窗口区域。目标窗口区域可以是目标组件在目标窗口中的展示区域,例如,目标组件是一个展示地图的View,目标窗口区域就是在目标窗口中对应的展示地图的地图区域。
当操作位置在目标窗口区域中时,意味着用户操作是实施在目标组件上的,将与用户操作对应的操作事件传递给目标组件,触发目标组件处理操作事件,目标组件会将对应的操作事件处理结果通过目标窗口展示给用户。例如,当用户点击到目标窗口区域时,将与点击对应的点击事件传递给目标组件触发目标组件进行处理,目标组件会将处理后的点击响应通过目标窗口呈现给用户。实现目标组件嵌入目标网页中的使用。
对应的,当操作位置在目标窗口区域之外时,意味着用户操作是实施在目标窗口中展示的、与目标网页对应的目标网页视图上的,可以将与用户操作对应的操作事件传递给目标网页视图,由目标网页视图中与操作位置对应的、目标网页的网页元素处理,并通过目标窗口呈现对应的网页元素处理的结果。实现目标网页已有的相关功能不受影响。
在一个例子中,本实施例中提供的网页处理方法还可以包括:步骤S2410-S2420。
步骤S2410,通过目标窗口接收到屏幕滑动操作时,获取与屏幕滑动操作对应的滑动操作信息。
在本例中,目标窗口是可以提供人机交互服务的用户界面。通过目标窗口可以接收到用户实施的屏幕滑动操作,该屏幕滑动操作通常可以包括左右滑动、上下滑动等。
滑动操作信息至少包括所述滑动距离以及滑动方向。滑动操作信息还可以包括基于预设的时间单位的滑动距离变化速度以及滑动方向变化速度等。
目标窗口可以通过与用户界面相关的组件或者接口获取与屏幕滑动操作对应的滑动操作信息,在此不再赘述。
步骤S2420,根据滑动操作信息,设置目标组件跟随目标网页视图在目标窗口中移动展示。
在本例中,可以根据至少包括滑动距离以及滑动方向的滑动信息,获取与目标网页对应的目标网页视图中,响应屏幕滑动操作后的、目标网页中包括的网页元素改变的位置,对应也能获取目标组件对应的、目标网页中的目标网页元素改变的位置,对应将目标网页元素改变的位置作为目标组件在目标窗口中改变的位置,将目标组件转换为目标网页的网页元素一样同步改变位置,再将目标组件与目标网页视图混合渲染到目标窗口上,实现设置目标组件跟随目标网页视图在目标窗口中移动展示,使得目标组件能够跟随目标网页响应屏幕滑动操作而滚动变化展示。
<例子>
以下将结合如图3所示的例子进一步举例本实施例中的网页处理方法。
假设在本例中,一个Native APP的开发者或提供者,期望该Native APP在加载某个目标网页时,将目标组件嵌入目标网页使用,该目标组件是该Native APP所基于的安卓操作系统支持的系统UI组件。。
在本例中,该Native APP的开发者或提供者,可以通过Native APP根据对于目标组件的使用需求,在对应的网页页面中对应设置<object>标签,并对<object>标签添加标记与嵌入的目标组件对应的属性标识,将该<object>标签作为目标组件对应的目标元素设置在页面中,对应生成目标网页。
在本例中,目标网页的DOM树可以如图3所示,目标网页中除了目标网页元素<object>标签之外,还包括text(文本)、<button>(按钮)、<img>(图片)等网页元素。
该Native APP的开发者或提供者,可以将实施本实施例中提供的网页处理方法的WebView SDK(基于网页视图的软件工具开发包)集成在该Native APP中。
当Native APP加载目标网页时,Native APP中实施本实施例中提供的网页处理方法的WebView SDK,识别目标网页中包括目标网页元素<object>标签后,通过WebView SDK提供的组件接口,从Native APP的应用层获取Native APP提供的、与目标网页元素<object>标签对应的系统UI组件,将目标网页视图与系统UI组件混合渲染到目标窗口上,具体如图3所示的目标窗口。
在如图3所示的目标窗口中,系统UI组件作为目标组件,转化为目标网页的一个网页元素实现嵌入目标网页中,呈现与目标网页DOM树中对应的层次结构,可以突破现有的网页插件机制所规定的标准的限制,实现效率较高,还能通过网页所基于的标准网页技术(例如HTML/CSS/JS等)控制渲染、滚动、事件处理等方面,与目标网页的网页元素无缝融合,获取较高的网页处理效率,给予用户更好的网页展示体验。
并且,本例中,系统UI组件作为目标组件嵌入目标网页中使用,可以利用系统UI组件的优异性能,满足用户多样化的网页展示需求。
<网页处理装置>
在本实施例中,还提供一种网页处理装置3000,如图4所示,包括:目标识别单元3100、组件获取单元3200以及混合渲染单元3300,用于实施本实施例中提供的网页处理方法,在此不再赘述。
目标识别单元3100,用于识别待展示的目标网页是否包括目标网页元素,所述目标网页元素与可嵌入所述目标网页的目标组件唯一对应。
可选地,所述目标网页元素是符合预设元素类型并设置有预设元素属性的网页元素;目标识别单元3100还用于:
识别所述目标网页包括的每个网页元素的元素类型以及元素属性;
当在所述目标网页中识别到所述元素类型符合所述预设元素类型、并且所述元素属性符合所述预设元素属性的网页元素时,将该网页元素识别为所述目标网页元素,以确定所述目标网页包括所述目标网页元素。
组件获取单元3200,用于当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件。
可选地,所述目标组件是原生用户界面组件;组件获取单元3200还用于:
通过预设的组件接口,获取对应的操作系统所支持的所述目标组件。
混合渲染单元3300,用于将与所述目标网页对应的目标网页视图以及所述目标组件,混合渲染到目标窗口,通过所述目标窗口展示嵌入有所述目标组件的所述目标网页。
可选地,混合渲染单元3300还用于:
根据获取的组件绘制次序,依次将所述目标组件以及所述目标网页视图绘制到目标窗口上,以实现所述混合渲染。
可选地,所述网页处理装置3000还用于:
通过所述目标窗口接收到用户操作时,确定与所述用户操作对应的操作位置;
当所述操作位置在目标窗口区域中时,将与所述用户操作对应的操作事件传递到所述目标组件,触发所述目标组件处理所述操作事件,所述目标窗口区域是所述目标窗口中与所述目标组件对应的窗口区域。
可选地,所述网页处理装置3000还用于:
通过所述目标窗口接收到屏幕滑动操作时,获取与所述屏幕滑动操作对应的滑动操作信息,所述滑动操作信息至少包括所述滑动距离以及滑动方向;
根据所述滑动操作信息,设置所述目标组件跟随所述目标网页视图在所述目标窗口中移动展示。
可选地,所述网页处理装置3000还用于:
将与所述目标组件对应的所述目标网页元素设置在网页页面中,生成所述包括目标网页元素的所述目标网页。
本领域技术人员应当明白,可以通过各种方式来实现网页处理装置3000。例如,可以通过指令配置处理器来实现网页处理装置3000。例如,可以将指令存储在ROM中,并且当启动设备时,将指令从ROM读取到可编程器件中来实现网页处理装置3000。例如,可以将网页处理装置3000固化到专用器件(例如ASIC)中。可以将网页处理装置3000分成相互独立的单元,或者可以将它们合并在一起实现。网页处理装置3000可以通过上述各种实现方式中的一种来实现,或者可以通过上述各种实现方式中的两种或更多种方式的组合来实现。
在本实施例中,网页处理装置3000可以是任意实现本实施例中提供的网页处理方法的软件产品、应用程序、软件工具开发包、插件、嵌入件或补丁等。例如,网页处理装置3000可以是具有网页访问功能的应用或功能模块,具体比如浏览器、浏览器内核、Web内核等,或者,网页处理装置3000可以是WebView SDK这类以软件开发工具包的形式向外提供服务的网页视图组件,可以供任意的期望实施本实施例的网页处理方法的应用(例如NativeAPP)集成或安装后使用。
<网页处理设备>
在本实施例中,还提供一种网页处理设备4000,如图5所示,包括:
显示装置4100;
存储器4200,用于存储可执行的指令;
处理器4300,用于根据可执行的指令的控制,运行网页展示设备执行如本实施例中提供的网页处理方法。
在本实施例中,网页处理设备4000可以是手机、掌上电脑、平板电脑、笔记本电脑、台式电脑等电子设备。例如,网页处理设备4000可以是如图1所示的电子设备1000。具体的一个例子中,网页处理设备4000可以是设置有实施本实施例的网页展示方法的网页视图组件的手机。
网页处理设备4000还可以包括其他的装置,例如还可以包括输入装置、通信装置等。
<可读存储介质>
在本实施例中,还提供一种可读存储介质5000,可读存储介质5000存储有可被计算机读取并运行的计算机程序,所述计算机程序用于在被所述计算机运行时,执行如本实施例所述的网页处理方法。
在本实施例中,可读存储介质5000可以是可以保持和存储由指令执行设备使用的指令的有形设备。可读存储介质5000例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。可读存储介质5000的更具体的例子(非穷举的列表)包括:便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的可读存储介质5000不被解释为瞬时信号本身,诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如,通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
以上已经结合附图描述了本发明的实施例,根据本实施例,提供一种网页处理方法、装置、设备及可读存储介质,通过识别到待展示的目标网页包括与可嵌入目标网页的目标组件唯一对应的目标网页元素时,获取与目标网页元素对应的目标组件,将与目标网页对应的目标网页视图以及目标组件混合渲染到目标窗口上,通过目标窗口展示嵌入有目标组件的目标网页,通过将目标组件转化为目标网页的一个网页元素实现将目标组件嵌入目标网页中使用,以此突破现有的网页插件机制所规定的标准的限制,实现效率较高,并且,可以通过网页所基于的标准网页技术(例如HTML/CSS/JS等)控制目标组件,使得目标组件与目标网页的网页元素能够无缝融合,获取更好的展示性能,给予用户更好的网页展示体验。尤其适用于目标组件是原生用户界面组件的场景,可以利用原生用户界面组件的优异性能,满足用户多样化的网页展示需求。
本发明可以是系统、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质,其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。
计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身,诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如,通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备,或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令,并转发该计算机可读程序指令,以供存储在各个计算/处理设备中的计算机可读存储介质中。
用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码,所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等,以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中,通过利用计算机可读程序指令的状态信息来个性化定制电子电路,例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA),该电子电路可以执行计算机可读程序指令,从而实现本发明的各个方面。
这里参照根据本发明实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解,流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合,都可以由计算机可读程序指令实现。
这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器,从而生产出一种机器,使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时,产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中,这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作,从而,存储有指令的计算机可读介质则包括一个制造品,其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。
也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上,使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤,以产生计算机实现的过程,从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。
附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分,所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。对于本领域技术人员来说公知的是,通过硬件方式实现、通过软件方式实现以及通过软件和硬件结合的方式实现都是等价的。
以上已经描述了本发明的各实施例,上述说明是示例性的,并非穷尽性的,并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择,旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进,或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。本发明的范围由所附权利要求来限定。

Claims (10)

1.一种网页处理方法,其中,包括:
识别待展示的目标网页是否包括目标网页元素,所述目标网页元素与可嵌入所述目标网页的目标组件唯一对应;
当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件;
将与所述目标网页对应的目标网页视图以及所述目标组件,混合渲染到目标窗口,通过所述目标窗口展示嵌入有所述目标组件的所述目标网页。
2.根据权利要求1所述的方法,其中,
所述目标网页元素是符合预设元素类型并设置有预设元素属性的网页元素;
所述识别用户访问的目标网页是否包括目标网页元素的步骤包括:
识别所述目标网页包括的每个网页元素的元素类型以及元素属性;
当在所述目标网页中识别到所述元素类型符合所述预设元素类型、并且所述元素属性符合所述预设元素属性的网页元素时,将该网页元素识别为所述目标网页元素,以确定所述目标网页包括所述目标网页元素。
3.根据权利要求1所述的方法,其中,
所述目标组件是原生用户界面组件;
所述当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件的步骤包括:
通过预设的组件接口,获取对应的操作系统所支持的所述目标组件。
4.根据权利要求1所述的方法,其中,
将与所述目标网页对应的目标网页视图以及所述目标组件混合渲染到目标窗口的步骤包括:
根据获取的组件绘制次序,依次将所述目标组件以及所述目标网页视图绘制到目标窗口上,以实现所述混合渲染。
5.根据权利要求1所述的方法,其中,还包括:
通过所述目标窗口接收到用户操作时,确定与所述用户操作对应的操作位置;
当所述操作位置在目标窗口区域中时,将与所述用户操作对应的操作事件传递到所述目标组件,触发所述目标组件处理所述操作事件,所述目标窗口区域是所述目标窗口中与所述目标组件对应的窗口区域。
6.根据权利要求1所述的方法,其中,还包括:
通过所述目标窗口接收到屏幕滑动操作时,获取与所述屏幕滑动操作对应的滑动操作信息,所述滑动操作信息至少包括所述滑动距离以及滑动方向;
根据所述滑动操作信息,设置所述目标组件跟随所述目标网页视图在所述目标窗口中移动展示。
7.根据权利要求1所述的方法,其中,还包括:
将与所述目标组件对应的所述目标网页元素设置在网页页面中,生成所述包括目标网页元素的所述目标网页。
8.一种网页处理装置,其中,包括:
目标识别单元,用于识别待展示的目标网页是否包括目标网页元素,所述目标网页元素与可嵌入所述目标网页的目标组件唯一对应;
组件获取单元,用于当所述目标网页包括所述目标网页元素时,获取与所述目标网页元素对应的所述目标组件;
混合渲染单元,用于将与所述目标网页对应的目标网页视图以及所述目标组件,混合渲染到目标窗口,通过所述目标窗口展示嵌入有所述目标组件的所述目标网页。
9.一种网页处理设备,其中,包括:
显示装置;
存储器,用于存储可执行的指令;
处理器,用于根据所述可执行的指令的控制,运行所述网页处理设备执行如权利要求1-7所述的网页处理方法。
10.一种可读存储介质,其中,所述可读存储介质中存储有可被计算机读取执行的计算机程序,所述计算机程序用于在被计算机读取运行时,执行如权利要求1-7所述的网页处理方法。
CN201910093053.5A 2019-01-30 2019-01-30 网页处理方法、装置、设备及可读存储介质 Pending CN111506848A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910093053.5A CN111506848A (zh) 2019-01-30 2019-01-30 网页处理方法、装置、设备及可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910093053.5A CN111506848A (zh) 2019-01-30 2019-01-30 网页处理方法、装置、设备及可读存储介质

Publications (1)

Publication Number Publication Date
CN111506848A true CN111506848A (zh) 2020-08-07

Family

ID=71875700

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910093053.5A Pending CN111506848A (zh) 2019-01-30 2019-01-30 网页处理方法、装置、设备及可读存储介质

Country Status (1)

Country Link
CN (1) CN111506848A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111966354A (zh) * 2020-08-17 2020-11-20 Oppo(重庆)智能科技有限公司 一种页面显示方法、装置及计算机可读存储介质
CN113434800A (zh) * 2021-06-28 2021-09-24 青岛海尔科技有限公司 数据处理方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104144224A (zh) * 2014-08-22 2014-11-12 北京奇虎科技有限公司 客户端显示发布信息的方法及装置
CN104461632A (zh) * 2014-12-09 2015-03-25 东软集团股份有限公司 一种Web App加载方法及装置
CN105786513A (zh) * 2016-02-29 2016-07-20 四川长虹电器股份有限公司 基于Html5的混合移动应用开发方法
CN106371844A (zh) * 2016-08-31 2017-02-01 北京奇艺世纪科技有限公司 一种用原生用户界面组件展示网页的方法及系统
CN106708498A (zh) * 2015-11-18 2017-05-24 中兴通讯股份有限公司 一种实现多模式应用页面的终端、方法及系统
CN108052548A (zh) * 2017-11-27 2018-05-18 深圳市前海圆舟网络科技股份有限公司 一种网页创建的方法、系统及终端设备

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104144224A (zh) * 2014-08-22 2014-11-12 北京奇虎科技有限公司 客户端显示发布信息的方法及装置
CN104461632A (zh) * 2014-12-09 2015-03-25 东软集团股份有限公司 一种Web App加载方法及装置
CN106708498A (zh) * 2015-11-18 2017-05-24 中兴通讯股份有限公司 一种实现多模式应用页面的终端、方法及系统
CN105786513A (zh) * 2016-02-29 2016-07-20 四川长虹电器股份有限公司 基于Html5的混合移动应用开发方法
CN106371844A (zh) * 2016-08-31 2017-02-01 北京奇艺世纪科技有限公司 一种用原生用户界面组件展示网页的方法及系统
CN108052548A (zh) * 2017-11-27 2018-05-18 深圳市前海圆舟网络科技股份有限公司 一种网页创建的方法、系统及终端设备

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111966354A (zh) * 2020-08-17 2020-11-20 Oppo(重庆)智能科技有限公司 一种页面显示方法、装置及计算机可读存储介质
CN113434800A (zh) * 2021-06-28 2021-09-24 青岛海尔科技有限公司 数据处理方法及装置
CN113434800B (zh) * 2021-06-28 2023-06-09 青岛海尔科技有限公司 数据处理方法及装置

Similar Documents

Publication Publication Date Title
WO2018077085A1 (zh) 应用程序处理方法、装置及存储介质
US10303526B2 (en) Device specific handling of user interface components
US20140380142A1 (en) Capturing website content through capture services
EP3416054B1 (en) Method and device for page display, and storage medium
WO2021008334A1 (zh) 小程序的数据绑定方法、装置、设备及存储介质
CN109669617B (zh) 用于切换页面的方法和装置
US11360640B2 (en) Method, device and browser for presenting recommended news, and electronic device
CN108449255B (zh) 评论交互方法、设备、客户端装置及电子设备
WO2018072388A1 (zh) 网页预读方法、网页访问方法、设备及可编程设备
CN110909275B (zh) 页面浏览方法、装置及电子设备
CN111368180A (zh) 页面展示方法、装置及电子设备
CN111506848A (zh) 网页处理方法、装置、设备及可读存储介质
CN110909274B (zh) 页面浏览方法、装置及电子设备
CN111324398A (zh) 最近内容的处理方法、装置、终端及存储介质
CN107562324B (zh) 数据显示控制的方法和终端
CN110134477B (zh) 一种动态布局用户页面的方法、装置、介质和电子设备
US11126410B2 (en) Method and apparatus for building pages, apparatus and non-volatile computer storage medium
CN109814778B (zh) 小程序选项卡的实现方法、装置、电子设备及介质
CN108021317B (zh) 用于屏幕编辑的方法及装置
CN107918552B (zh) 轻应用调用方法、装置、客户端装置及电子设备
CN111506847B (zh) 网页展示方法、装置、设备及可读存储介质
CN115268890A (zh) 信息处理方法、装置及电子设备
CN111506841B (zh) 网页展示方法、装置、设备及可读存储介质
CN110780952A (zh) 应用界面的交互方法、装置及电子设备
CN115309470A (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