CN113343151A - 一种网页视图的处理方法及设备 - Google Patents

一种网页视图的处理方法及设备 Download PDF

Info

Publication number
CN113343151A
CN113343151A CN202110712315.9A CN202110712315A CN113343151A CN 113343151 A CN113343151 A CN 113343151A CN 202110712315 A CN202110712315 A CN 202110712315A CN 113343151 A CN113343151 A CN 113343151A
Authority
CN
China
Prior art keywords
view
native
placeholder
size
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
CN202110712315.9A
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.)
Shanghai Qujie Information Technology Co ltd
Original Assignee
Shanghai Qujie Information Technology Co 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 Shanghai Qujie Information Technology Co ltd filed Critical Shanghai Qujie Information Technology Co ltd
Priority to CN202110712315.9A priority Critical patent/CN113343151A/zh
Publication of CN113343151A publication Critical patent/CN113343151A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

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 Transfer Between Computers (AREA)

Abstract

本申请的目的是提供一种网页视图的处理方法及设备,本申请先在网页视图中插入视图控件的占位标签,并注入所述占位标签的插入算法;通过所述插入算法获取所述占位标签在所述网页视图中的位置;预置待插入的原生视图的位置偏移量;基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处;通过所述插入算法确定所述占位标签的尺寸;基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸,实现了在网页视图中插入原生视图,使得可以在网页视图中显示原生视图,可以达到复用原生视图的目的,从而拓展网页视图的可用性。

Description

一种网页视图的处理方法及设备
技术领域
本申请涉及计算机技术领域,尤其涉及一种网页视图的处理方法及设备。
背景技术
现有技术中,网页视图webview在移动平台上的缺点逐渐凸显。比如,在混合应用中,使用webview可以安卓系统或ios系统进行开发一次,但是使用webview的过程中又存在一部分原来已有的原生view无法在webview使用,即无法复用一些原生平台已有的视图view,导致重复开发和人力资源的浪费,而且网页视图webview和原生view的实现效果也有差异,导致用户的体验不一致;又比如,一些第三方提供的功能只能用原生view接入,无法使用webview接入。
发明内容
本申请的一个目的是提供一种网页视图的处理方法及设备,可以实现在网页视图中插入原生视图,使得可以在网页视图中显示原生视图,可以达到复用原生视图的目的,从而拓展网页视图的可用性。
根据本申请的一个方面,提供了一种网页视图的处理方法,其中,所述方法包括:
在网页视图中插入视图控件的占位标签,并注入所述占位标签的插入算法;
通过所述插入算法获取所述占位标签在所述网页视图中的位置;
预置待插入的原生视图的位置偏移量;
基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处;
通过所述插入算法确定所述占位标签的尺寸;
基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸。
进一步地,上述方法中,所述占位标签的插入算法包括所述占位标签的位置获取算法和尺寸设置算法,其中,所述通过所述插入算法获取所述占位标签在所述网页视图中的位置,包括:
通过所述位置获取算法获取所述占位标签在所述网页视图中的位置;
所述通过所述插入算法确定所述占位标签的尺寸,包括:
通过所述尺寸设置算法确定所述占位标签的尺寸。
进一步地,上述方法中,所述方法还包括:
响应于检测到所述网页视图对应的页面切换时,对所述网页视图中插入的所述原生视图进行销毁处理。
进一步地,上述方法中,所述占位标签的尺寸包括:所述占位标签的宽度和所述占位标签的高度。
进一步地,上述方法中,所述基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸,包括:
基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示宽度和/或展示高度。
根据本申请的另一方面,还提供了一种非易失性存储介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行时,使所述处理器实现如上述网页视图的处理方法。
根据本申请的另一方面,还提供了一种网页视图的处理设备,其中,该设备包括:
一个或多个处理器;
计算机可读介质,用于存储一个或多个计算机可读指令,
当所述一个或多个计算机可读指令被所述一个或多个处理器执行,使得所述一个或多个处理器实现如上述客户端的网页视图的处理方法。
与现有技术相比,本申请先在网页视图中插入视图控件的占位标签,并注入所述占位标签的插入算法;通过所述插入算法获取所述占位标签在所述网页视图中的位置;预置待插入的原生视图的位置偏移量;基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处;通过所述插入算法确定所述占位标签的尺寸;基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸,实现了在网页视图中插入原生视图,使得可以在网页视图中显示原生视图,可以达到复用原生视图的目的,从而拓展网页视图的可用性。进一步地,若在网页视图中插入的原生视图为原生广告或原生推销等信息,从而可以提高在网页视图中进行推广类信息展示的推广收入等。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本申请的其它特征、目的和优点将会变得更明显:
图1示出根据本申请一个方面的一种网页视图的处理方法的交互流程示意图;
图2示出根据本申请一个方面的一种网页视图的处理方法中的实际应用场景的流程示意图;
图3示出根据本申请一个方面的一种网页视图的处理方法中的视图转换示意图;
图4示出根据本申请一个方面的一种网页视图的处理方法中的原生视图销毁的流程示意图。
附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
下面结合附图对本申请作进一步详细描述。
在本申请一个典型的配置中,终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
根据本申请一个方面的实施例,提供了一种网页视图的处理方法,具体的方法流程图如图1所示,该方法可以应用于安卓系统,也可以应用于其他操作系统,其中,在安卓系统中使用Java编程语言或kotlin语言等,配合网页视图webview中使用html标记语言及javascript语言。该方法包括步骤S11、步骤S12、步骤S13、步骤S14、步骤S15及步骤S16,具体包括如下步骤:
步骤S11,在网页视图中插入视图控件的占位标签,并注入所述占位标签的插入算法,具体实现代码如下所示:
HTML
<div id="placeholder"></div>
//在网页视图webview中插入一个视图控件div占位标签
在此,所述占位标签的插入算法用于指示在网首视图中实现对占位标签的位置和尺寸的设置。
步骤S12,通过所述插入算法获取所述占位标签在所述网页视图中的位置。
在步骤S12中,所述占位标签的插入算法包括所述占位标签的位置获取算法和尺寸设置算法,即,所述占位标签的位置获取算法的作用是获取所述占位标签的位置,所述占位标签的尺寸设置算法的作用是设置所述占位标签在网页视图中的具体尺寸;例如,在网页视图webview中注入两个算法,分别为占位标签的位置获取算法:getPlaceholderPosition()和尺寸设置算法:setPlaceholderHeight(),在网页视图webview中注入位标签的位置获取算法:getPlaceholderPosition()和尺寸设置算法:setPlaceholderHeight()的具体实现代码如下:
Figure BDA0003133404140000051
具体地,所述步骤S12通过所述插入算法获取所述占位标签在所述网页视图中的位置,具体包括:通过所述位置获取算法获取所述占位标签在所述网页视图中的位置;所述通过所述插入算法确定所述占位标签的尺寸,包括:通过所述尺寸设置算法确定所述占位标签的尺寸。
步骤S13,通过所述插入算法预置待插入的原生视图的位置偏移量。
步骤S14,基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处。
步骤S15,通过所述插入算法确定所述占位标签的尺寸;在此,所述占位标签的尺寸包括但不限于所述占位标签的宽度和所述占位标签的高度。
步骤S16,基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸。
通过步骤S11至步骤S16,实现了在网页视图中插入原生视图,使得可以在网页视图中显示原生视图,使得网页视图webview和原生视图进行很少的改造以及通信就能得到插入目的,是一种更巧妙的实现方式,可以达到复用原生视图的目的,从而拓展网页视图的可用性。进一步地,若在网页视图中插入的原生视图为原生广告或原生推销等信息,从而可以提高在网页视图中进行推广类信息展示的推广收入等。
其中,所述步骤S12至步骤S16可以通过如下代码实现:
Figure BDA0003133404140000061
Figure BDA0003133404140000071
其中,通过步骤S11至步骤S16的具体实际应用场景可以如图2所示,在该实际应用场景中,先插入视图控件的div占位标签,然后添加或注入占位标签的两个算法,分别是:位置获取算法和尺寸设置算法,并通过所述位置获取算法获取所述占位标签在所述网页视图中的位置;预置待插入的原生视图的位置偏移量,并基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处;通过所述尺寸设置算法确定所述占位标签的尺寸,在图2中,将所述占位标签的尺寸优选为占位标签的高度;最后基于所述占位标签的高度调整所述原生视图在所述网页视图中的展示高度,实现了在网页视图中插入原生视图,使得可以在网页视图中显示原生视图。
在所述步骤S16中,所述基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸,具体包括:基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示宽度和/或展示高度。例如,在本申请一优选实施例中,如图3所示,图3中左侧的示意图为网页视图,在网页视图中添加了视图控件的占位标签后如图3中的中间所示:占位div,在该实际应用场景中,基于所述占位标签的尺寸调整所述原生视图在网页视图中的展示高度,以得到原生视图在网页视图中的真实尺寸,如图3中的最后侧的展示图,实现了在实际应用场景中将原生视图插入至网页视图的操作,以便原生视图能够在网页视图中自然呈现,而不是悬浮或弹窗,从而成为网页视图的一部分,与网页视图融为一体。
接着本申请的上述实施例,本申请一个方面的实施例提供的一种网页视图的处理方法还包括:响应于检测到所述网页视图对应的页面切换时,对所述网页视图中插入的所述原生视图进行销毁处理。如图4所示,当网页视图需要切换时,由于原生视图已经被全完添加并融合至网页视图中,当网页视图对应的网页需切换时,还需要将网页视图中插入的原生视图销毁,即响应于检测到该网页视图对应的网页切换时,对所述网页视图中插入的所述原生视图进行销毁处理,以便后续在网页视图中完整的展示其他页面所需呈现的内容。
根据本申请的另一方面,还提供了一种非易失性存储介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行时,使所述处理器实现如上述网页视图的处理方法。
根据本申请的另一方面,还提供了一种网页视图的处理设备,其中,该设备包括:
一个或多个处理器;
计算机可读介质,用于存储一个或多个计算机可读指令,
当所述一个或多个计算机可读指令被所述一个或多个处理器执行,使得所述一个或多个处理器实现如上述客户端网页视图的处理方法。
在此,所述网页视图的处理设备中的各实施例的详细内容,具体可参见上述网页视图的处理方法的实施例的对应部分,在此,不再赘述。
综上所述,本申请先在网页视图中插入视图控件的占位标签,并注入所述占位标签的插入算法;通过所述插入算法获取所述占位标签在所述网页视图中的位置;预置待插入的原生视图的位置偏移量;基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处;通过所述插入算法确定所述占位标签的尺寸;基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸,实现了在网页视图中插入原生视图,使得可以在网页视图中显示原生视图,可以达到复用原生视图的目的,从而拓展网页视图的可用性。进一步地,若在网页视图中插入的原生视图为原生广告或原生推销等信息,从而可以提高在网页视图中进行推广类信息展示的推广收入等。
需要注意的是,本申请可在软件和/或软件与硬件的组合体中被实施,例如,可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中,本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地,本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中,例如,RAM存储器,磁或光驱动器或软磁盘及类似设备。另外,本申请的一些步骤或功能可采用硬件来实现,例如,作为与处理器配合从而执行各个步骤或功能的电路。
另外,本申请的一部分可被应用为计算机程序产品,例如计算机程序指令,当其被计算机执行时,通过该计算机的操作,可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令,可能被存储在固定的或可移动的记录介质中,和/或通过广播或其他信号承载媒体中的数据流而被传输,和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此,根据本申请的一个实施例包括一个装置,该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器,其中,当该计算机程序指令被该处理器执行时,触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。
对于本领域技术人员而言,显然本申请不限于上述示范性实施例的细节,而且在不背离本申请的精神或基本特征的情况下,能够以其他的具体形式实现本申请。因此,无论从哪一点来看,均应将实施例看作是示范性的,而且是非限制性的,本申请的范围由所附权利要求而不是上述说明限定,因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外,显然“包括”一词不排除其他单元或步骤,单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一,第二等词语用来表示名称,而并不表示任何特定的顺序。

Claims (7)

1.一种网页视图的处理方法,其中,所述方法包括:
在网页视图中插入视图控件的占位标签,并注入所述占位标签的插入算法;
通过所述插入算法获取所述占位标签在所述网页视图中的位置;
预置待插入的原生视图的位置偏移量;
基于所述原生视图的位置偏移量,将所述原生视图插入至所述占位标签在所述网页视图中的位置处;
通过所述插入算法确定所述占位标签的尺寸;
基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸。
2.根据权利要求1所述的方法,其中,所述占位标签的插入算法包括所述占位标签的位置获取算法和尺寸设置算法,其中,所述通过所述插入算法获取所述占位标签在所述网页视图中的位置,包括:
通过所述位置获取算法获取所述占位标签在所述网页视图中的位置;
所述通过所述插入算法确定所述占位标签的尺寸,包括:
通过所述尺寸设置算法确定所述占位标签的尺寸。
3.根据权利要求1所述的方法,其中,所述方法还包括:
响应于检测到所述网页视图对应的页面切换时,对所述网页视图中插入的所述原生视图进行销毁处理。
4.根据权利要求1至3中任一项所述的方法,其中,所述占位标签的尺寸包括:所述占位标签的宽度和所述占位标签的高度。
5.根据权利要求4所述的方法,其中,所述基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示尺寸,包括:
基于所述占位标签的尺寸调整所述原生视图在所述网页视图中的展示宽度和/或展示高度。
6.一种非易失性存储介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行时,使所述处理器实现如权利要求1至5中任一项所述的方法。
7.一种网页视图的处理设备,其中,该设备包括:
一个或多个处理器;
计算机可读介质,用于存储一个或多个计算机可读指令,
当所述一个或多个计算机可读指令被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1至5中任一项所述的方法。
CN202110712315.9A 2021-06-25 2021-06-25 一种网页视图的处理方法及设备 Pending CN113343151A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110712315.9A CN113343151A (zh) 2021-06-25 2021-06-25 一种网页视图的处理方法及设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110712315.9A CN113343151A (zh) 2021-06-25 2021-06-25 一种网页视图的处理方法及设备

Publications (1)

Publication Number Publication Date
CN113343151A true CN113343151A (zh) 2021-09-03

Family

ID=77478803

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110712315.9A Pending CN113343151A (zh) 2021-06-25 2021-06-25 一种网页视图的处理方法及设备

Country Status (1)

Country Link
CN (1) CN113343151A (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140298156A1 (en) * 2011-12-29 2014-10-02 Guangzhou Ucweb Computer Technology Co., Ltd Methods and systems for adjusting webpage layout
CN104598225A (zh) * 2014-12-31 2015-05-06 百度在线网络技术(北京)有限公司 一种将视图信息插入页面中的方法、装置与系统
CN107229454A (zh) * 2016-03-24 2017-10-03 阿里巴巴集团控股有限公司 混合视图的显示方法及装置
CN112749362A (zh) * 2019-10-31 2021-05-04 腾讯科技(深圳)有限公司 控件创建方法、装置、设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140298156A1 (en) * 2011-12-29 2014-10-02 Guangzhou Ucweb Computer Technology Co., Ltd Methods and systems for adjusting webpage layout
CN104598225A (zh) * 2014-12-31 2015-05-06 百度在线网络技术(北京)有限公司 一种将视图信息插入页面中的方法、装置与系统
CN107229454A (zh) * 2016-03-24 2017-10-03 阿里巴巴集团控股有限公司 混合视图的显示方法及装置
CN112749362A (zh) * 2019-10-31 2021-05-04 腾讯科技(深圳)有限公司 控件创建方法、装置、设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
同中书门下平章事JAREN: "WebView页面嵌入原生控件", pages 1 - 3, Retrieved from the Internet <URL:https://blog.csdn.net/L_wwbs/article/details/88868773> *

Similar Documents

Publication Publication Date Title
CN106897347B (zh) 一种网页展示方法、操作事件记录方法及装置
CN111818123B (zh) 网络前端远程回放方法、装置、设备及存储介质
CN106897251B (zh) 富文本展示方法及装置
CN106933887B (zh) 一种数据可视化方法及装置
CN104156207A (zh) 一种文档显示方法以及装置
CN105630792B (zh) 一种信息显示、推送方法及装置
CN107766307B (zh) 一种表单元素联动的方法和设备
CN108196902B (zh) 用于展示开屏广告的方法与设备
CN111382386A (zh) 一种用于生成网页截图的方法与设备
CN112069468A (zh) 一种页面动态水印的方法及设备
CN117093224A (zh) 一种支持TypeScript智能感知的代码编辑方法、设备及介质
CN109558548B (zh) 一种消除css样式冗余的方法及相关产品
CN104461310B (zh) 一种页面比对方法及系统
CN113343151A (zh) 一种网页视图的处理方法及设备
CN112115395A (zh) 一种用于实现页面路由跳转时的动画配置的方法与设备
CN106293671B (zh) 一种生成组件模板的方法及装置
CN106844656A (zh) 一种页面适配方法及系统
CN108089904B (zh) 一种展示页面扩展方法及设备
CN113176988B (zh) 数据记录方法及装置
CN114254229A (zh) 网页渲染方法及装置
KR102311326B1 (ko) 웹 컨텐츠 출력 장치 및 방법
CN111581933A (zh) 一种管理网页中表格的方法和装置
CN111782257A (zh) 应用安装包生成方法及装置、界面显示方法及装置
CN113342416B (zh) 一种在小程序中展示h5图文数据的方法及设备
CN113157261B (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
CB02 Change of applicant information
CB02 Change of applicant information

Address after: Room 102, Building 18, No. 1625 Caobao Road, Minhang District, Shanghai, 201101

Applicant after: Shanghai qujie Information Technology Co.,Ltd.

Address before: Room 118, building 20, No. 1-42, Lane 83, Hongxiang North Road, Lingang New Area, China (Shanghai) pilot Free Trade Zone, Pudong New Area, Shanghai

Applicant before: Shanghai qujie Information Technology Co.,Ltd.