CN107229454B - 混合视图的显示方法及装置 - Google Patents

混合视图的显示方法及装置 Download PDF

Info

Publication number
CN107229454B
CN107229454B CN201610172774.1A CN201610172774A CN107229454B CN 107229454 B CN107229454 B CN 107229454B CN 201610172774 A CN201610172774 A CN 201610172774A CN 107229454 B CN107229454 B CN 107229454B
Authority
CN
China
Prior art keywords
view
occupy
client
webpage
place element
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.)
Active
Application number
CN201610172774.1A
Other languages
English (en)
Other versions
CN107229454A (zh
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.)
Advanced New Technologies Co Ltd
Advantageous New Technologies Co 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 CN201610172774.1A priority Critical patent/CN107229454B/zh
Priority to TW106102206A priority patent/TWI700638B/zh
Priority to PCT/CN2017/076421 priority patent/WO2017162061A1/zh
Priority to EP17769338.9A priority patent/EP3435225A4/en
Priority to MYPI2018703337A priority patent/MY197000A/en
Priority to JP2018550402A priority patent/JP2019513268A/ja
Priority to KR1020187030825A priority patent/KR102293685B1/ko
Priority to SG11201808002YA priority patent/SG11201808002YA/en
Publication of CN107229454A publication Critical patent/CN107229454A/zh
Priority to PH12018502001A priority patent/PH12018502001A1/en
Priority to US16/135,604 priority patent/US10789420B2/en
Application granted granted Critical
Publication of CN107229454B publication Critical patent/CN107229454B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • 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
    • 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/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • 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
    • 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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • 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/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • 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
    • G06F9/452—Remote windowing, e.g. X-Window System, desktop virtualisation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • General Health & Medical Sciences (AREA)
  • Computational Linguistics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Health & Medical Sciences (AREA)
  • Information Transfer Between Computers (AREA)
  • Digital Computer Display Output (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种混合视图的显示方法及装置，涉及网页处理技术领域，解决了混合视图显示准确度低和不一致的问题。本发明的主要技术方案为：当接收到网页视图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；从所述网页视图的加载结果中获取所述占位元素的位置信息；在所述位置信息添加所述客户端视图；显示所述添加有所述客户端视图的网页视图。本发明主要用于显示混合视图。

Description

混合视图的显示方法及装置
技术领域
本发明涉及网页处理技术领域，尤其涉及一种混合视图的显示方法及装置。
背景技术
随着信息技术的快速发展，人们对移动终端设备上的APP(Application，应用程序)要求越来越高，鉴于移动终端的局限性，移动终端上的APP由本地化应用(Native App)，到混合型应用(Hybrid APP)，再到基于WEB的应用Web App，这一连串的变化都源于技术的更新和市场的需要。其中，Hybrid App是指介于web-app、native-app这两者之间的App，通过它可以同时展示某一个应用程序的网页视图和客户端视图，网页视图是运行在浏览器上的HTML5(超文本标记语言)页面，客户端视图是由iOS/Android开发语言编写的用于展示性的页面或控件，比如淘宝应用程序，通过Hybrid App可以混合展示淘宝应用程序网页视图和客户端视图。
目前，可以通过在移动终端webView(客户端网页容器)当中添加子视图的方式实现混合型应用，即通过在webView中添加客户端视图实现应用中网页视图和客户端视图的混合显示。如在iOS系统中通过向webView.scrollView中添加客户端视图；或者在Android系统中通过webview.addView方法可以直接向webview中添加客户端视图。然而，由于网页视图是依靠浏览器引擎进行渲染，而客户端视图是依靠操作系统的编译运行，两者环境不一样，因此在网页视图进行滚动变化时，造成现有混合视图显示不一致。
发明内容
鉴于上述问题，提出了本发明，以便提供一种克服上述问题或者至少部分地解决上述问题的混合视图的显示方法及装置。
为达到上述目的，本发明主要提供如下技术方案：
一方面，本发明实施例提供了一种混合视图的显示方法，该方法包括：
当接收到网页试图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；
从所述网页视图的加载结果中获取所述占位元素的位置信息；
在所述位置信息添加所述客户端视图；
显示所述添加有所述客户端视图的网页视图。
另一方面，本发明实施例还提供一种混合视图的显示装置，该装置包括：
加载单元，当接收到网页视图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；
获取单元，从所述网页视图的加载结果中获取所述占位元素的位置信息；
添加单元，在所述位置信息添加所述客户端视图；
显示单元，显示所述添加有所述客户端视图的网页视图。
借由上述技术方案，本发明实施例提供的技术方案至少具有下列优点：
本发明实施例提供的一种混合视图的显示方法及装置，当接收到网页视图加载指令时，首先对网页视图进行加载，其中，所述网页视图中包含有用于添加客户端视图的占位元素，然后从所述网页视图的加载结果中获取所述占位元素的位置信息，并在所述位置信息添加所述客户端视图，最后显示所述添加有所述客户端视图的网页视图。与目前通过在webView当中直接添加子视图的方式实现混合视图的显示相比，本发明实施例在接收到网页视图加载指令时，首先从网页视图的加载结果中获取占位元素的位置信息，然后将客户端视图添加到占位元素位置上，以此实现网页视图和客户端视图的混合展示，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，从而通过本发明可以提高混合视图显示的准确度及一致性。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1为本发明实施例提供的一种混合视图的显示方法流程图；
图2为本发明实施例提供的另一种混合视图的显示方法流程图；
图3为本发明实施例提供的一种混合视图的显示装置的组成框图；
图4为本发明实施例提供的另一种混合视图的显示装置的组成框图；
图5为本发明实施例提供的混合视图的界面示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
为使本发明技术方案的优点更加清楚，下面结合附图和实施例对本发明作详细说明。
本发明实施例提供了一种混合视图的显示方法，如图1所示，所述方法包括：
101、当接收到网页视图加载指令时，对所述网页视图进行加载。
其中，所述网页视图中包含有用于添加客户端视图的占位元素。在本发明实施例中，网页视图加载指令可通过打开应用程序中的一个具体页面触发，如选择支付宝中花呗的还款按钮，招财宝中的预约购买按钮等，本发明实施例不做具体限定。
需要说明的是，所述网页视图中包含的占位元素是可以改变对象大小或宽高的元素。在本发明实施例中，所述占位元素具体可以为块级元素，或表现形式为块级元素的行级元素，本发明实施例不做具体限定。例如，通过块级元素<div id＝”native-view”></div>表示占位元素，或是通过表现形式为块级元素的行级元素<span id＝”native-view”style＝”display:block”></span>表示占位元素，由于上述行级元素中设置的style＝”display:block”代表的是让对象成为块级元素，因此上述行级元素实际上的表现形式为块级元素，从而该行级元素是改变对应的大小或宽度的。
102、从所述网页视图的加载结果中获取所述占位元素的位置信息。
对于本发明实施例，由于是对网页视图进行的加载，而网页视图就是HTML页面，因此在本发明实施例中是通过浏览器渲染引擎对待显示网页视图进行加载的。需要说明的是，本发明中对于不同的终端设备操作系统是通过其系统内部方式监听网页视图加载，如在iOS(苹果移动设备操作系统)当中，是通过接口webViewDidFinishLoad(iOS)获知网页视图加载是否完成；在Android(安卓操作系统)当中，是通过接口onPageFinished(Android)获知网页视图加载是否完成。
在本发明实施例中，在待显示网页视图的加载结果中通过webview(客户端网页视图容器)执行javascript(脚本语言)获取占位元素的位置信息，根据占位元素的标示方式不同，这里获取占位元素的方式有差异。例如，获取占位元素的位置信息的脚本代码为：
(function(){
var ele＝document.getElementById('native-view')；
var xPoint＝ele.getBoundingClientRect().left；
var yPoint＝ele.getBoundingClientRect().top+document.body.scrollTop；
return JSON.stringify({x:xPoint,y:yPoint})；
})()；
其中，上述代码中'native-view'表示的是占位元素的标识，xPoint表示占位元素相对浏览器视窗的左边位置距离信息，yPoint用于获得页面中占位元素相对于浏览器视窗上边的位置，因此通过坐标轴中的x和y就可以确定网页视图的加载结果中占位元素的所在位置。
103、在所述位置信息添加所述客户端视图。
其中，所述客户端视图是由相应手机操作系统语言编写并编译的原生视图控件，例如iOS的UISwitch(开关控件)，Android的TextView(文本显示)或者用户编写的自定义视图控件。
104、显示所述添加有所述客户端视图的网页视图。
对于本发明实施例，当接收到网页视图加载指令时，首先从网页视图的加载结果中获取占位元素的位置信息，然后将客户端视图对应添加到占位元素的位置上，以此实现网页视图和客户端视图的混合展示，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，从而通过在网页视图中添加占位元素可实现流布局的混合视图展现，进而通过本发明可以提高混合视图显示的准确度及一致性。
本发明实施例提供的一种混合视图的显示方法，当接收到网页视图加载指令时，首先对所述网页视图进行加载，其中，所述网页视图中包含有用于添加客户端视图的占位元素，然后从所述网页视图的加载结果中获取所述占位元素的位置信息，并在所述位置信息添加所述客户端视图，最后显示所述添加有所述客户端视图的网页视图。与目前通过在webView当中直接添加子视图的方式实现混合视图的显示相比，本发明实施例在接收到网页视图加载指令时，首先从网页视图的加载结果中获取占位元素的位置信息，然后将客户端视图对应添加到占位元素的位置上，以此实现网页视图和客户端视图的混合展示，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，从而通过本发明可以提高混合视图显示的准确度及一致性。
本发明实施例提供了另一种混合视图的显示方法，如图2所示，所述方法包括：
201、在所述网页视图中添加所述占位元素。
其中，每个占位元素设置有对应的标识信息，所述标识信息用于唯一标识占位元素。每个占位元素对应的标识信息具体可以通过class或者id设置。例如，在以块级元素<div class＝”native-view1”></div>表示的占位元素中，是通过class设置占位元素的标识信息，即该占位元素的标识信息为native-view1；在以表现形式为块级元素的行级元素<span id＝”native-view2”style＝”display:block”></span>表示的占位元素中，是通过id设置占位元素的标识信息，即该占位元素的标识信息为native-view2。
需要说明的是，网页视图中包含的占位元素是可以改变对象大小或宽高的元素。在本发明实施例中，所述占位元素具体可以为块级元素，或表现形式为块级元素的行级元素，本发明实施例不做具体限定。对于本发明实施例，将占位元素设置成块级元素或是表现形式为块级元素的行级元素，可以在后续步骤当中设置占位元素的宽高，即通过占位元素可以调整客户端视图的大小，从而通过本发明实施例可以提高客户端视图显示的精确度及一致性。
202、设置各个占位元素分别对应的客户端视图。
其中，所述客户端视图是由相应手机操作系统语言编写并编译的原生视图控件，例如iOS的UISwitch(开关控件)，Android的TextView(文本显示)或者用户编写的自定义视图控件，本发明实施例不做具体限定。需要说明的是，由于页面视图当中可能包括多个客户端视图，而每个占位元素可以添加一个客户端视图，因此在网页视图当中添加多个占位元素之后，还需要设置各个占位元素分别对应的客户端视图。在本发明实施例中，通过设置各个占位元素分别对应的客户端视图，可以在后续步骤中将多个客户端视图相应的添加到占位元素对应的位置信息上。
203、当接收到网页视图加载指令时，对所述网页视图进行加载。
其中，所述网页视图中包含有用于添加客户端视图的占位元素，在本发明实施例中，网页视图加载指令可通过打开应用程序中的一个具体页面触发，如选择支付宝中花呗的还款按钮，招财宝中的预约购买按钮等，本发明实施例不做具体限定。
204、判断是否能够从所述网页视图的加载结果中获取到所述占位元素的位置信息。
需要说明的是，本发明中对于不同的终端设备操作系统是通过其系统内部方式监听网页视图的加载，如在iOS(苹果移动设备操作系统)当中，是通过接口webViewDidFinishLoad(iOS)获知网页视图是否加载完成；在Android(安卓操作系统)当中，是通过接口onPageFinished(Android)获知网页视图是否加载完成。其中，所述占位元素的位置信息为页面元素在可视区的位置，及占位元素的左，上分别相对浏览器视窗的位置。
205a、若是，则获取所述占位元素的位置信息。
在本发明实施例中，若够从所述待显示网页视图的加载结果中获取到所述占位元素的位置信息，则获取所述占位元素的位置信息。
206a、在所述各个位置信息上，分别添加与所述占位元素对应的客户端视图。
对于本发明实施例，所述占位元素的表现形式为块级元素，在步骤206a之后，所述方法还包括：将所述占位元素的状态信息配置成所述客户端视图对应的状态信息。其中，所述占位元素的状态信息具体可以为状态元素的宽高信息、分辨率信息等，本发明实施例不做具体限定。需要说明的是，占位元素的表现形式为块级元素具体可以为：块级元素或者表现形式为块级元素的行级元素，即一切可以改变占位元素的状态信息的元素即可，本发明实施例不做具体限定。
在本发明实施例中，将所述占位元素的状态信息配置成所述客户端视图对应的状态信息包括：将所述占位元素的宽高信息设置成所述客户端视图对应的宽高信息。例如，可通过以下代码设置转为元素的宽高信息：
document.getElementById(‘native-view’).style.height＝‘400px’；
document.getElementById(‘native-view’).style.width＝‘100px’；
其中，400为客户端视图的实际高度，100为客户端视图的实际宽度。对于本发明实施例，将占位元素的宽高信息设置成所述客户端视图对应的宽高信息，可以使添加的客户端视图在待显示网页视图当中全部展现出来，从而通过将所述占位元素的宽高信息设置成所述客户端视图对应的宽高信息，可以提高客户端视图的显示精确度，进而提高了混合视图的显示精确度及一致性。
对于本发明实施例，在所述位置信息添加所述客户端视图包括：从所述网页视图的加载结果中获取各个占位元素分别对应的位置信息；在所述各个位置信息上，分别添加与所述占位元素对应的客户端视图。在本发明实施例当中，若网页视图当中存在多个占位元素时，则在网页视图加载完成后，会从加载结果中获取各个占位元素分别对应的位置信息，然后在各个占位元素的位置信息上添加与占位元素对应的客户端视图，以此实现在网页视图当中添加多个客户端视图。
207a、显示所述添加有所述客户端视图的网页视图。
205b、若否，则输出网页视图加载错误提示信息。
其中，步骤205b是与步骤205a的并列步骤，若不能够从所述网页视图的加载结果中获取到所述占位元素的位置信息，则输出网页视图加载提示信息，以提示用于从新加载所述网页视图。需要说明的是，在终端设备出现无网络时或是网页视图加载过程中出现错误等状况时，将到会导致不能够从所述网页视图的加载结果中获取到所述占位元素的位置信息。
对于本发明实施例，可以应用的场景如图5所示，但不仅限于于此，包括：当接收到网页视图加载指令时，首先对网页视图进行加载，即对图5当中网页视图虚线框内的网页元素进行加载，然后判断是否能够从所述网页视图的加载结果中获取到所述占位元素的位置信息，即判断是否能够从网页视图的加载结果中获取到占位元素为“联系我们”的位置信息，若能够从所述网页视图的加载结果中获取到“联系我们”占位元素的位置信息，则获取“联系我们”占位元素的位置信息，并在webView中获取的位置信息上添加所述客户端视图，即在图5中“联系我们”虚线框对应位置的webView中添加客户端视图，以此实现网页视图和客户端视图的混合显示；若不能够从所述网页视图的加载结果中获取到所述占位元素的位置信息，则输出网页视图加载错误提示信息，以提示用于从新加载所述网页视图。在本发明实施例中，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，即图5中“联系我们”虚线框内的客户端视图可以随着网页视图虚线框内的网页视图滚动而滚动，因此通过在网页视图中添加占位元素可实现流布局的混合视图展现，从而通过本发明可以提高混合视图显示的准确度及一致性。
本发明实施例提供的另一种混合视图的显示方法，当接收到网页视图加载指令时，首先对所述网页视图进行加载，其中，所述网页视图中包含有用于添加客户端视图的占位元素，然后从所述网页视图的加载结果中获取所述占位元素的位置信息，并在所述位置信息添加所述客户端视图，最后显示所述添加有所述客户端视图的网页视图。与目前通过在webView当中直接添加子视图的方式实现混合视图的显示相比，本发明实施例在接收到网页视图加载指令时，首先从网页视图的加载结果中获取占位元素的位置信息，然后将客户端视图对应添加到占位元素的位置上，以此实现网页视图和客户端视图的混合展示，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，从而通过本发明可以提高混合视图显示的准确度及一致性。
进一步地，本发明实施例提供一种混合视图的显示装置，如图3所示，所述装置包括：加载单元31，获取单元32，添加单元33，显示单元34。
加载单元31，当接收到网页视图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；
获取单元32，从所述网页视图的加载结果中获取所述占位元素的位置信息；
添加单元33，在所述位置信息添加所述客户端视图；
显示单元34，显示所述添加有所述客户端视图的网页视图。
需要说明的是，本发明实施例提供的一种混合视图的显示装置所涉及各功能单元的其他相应描述，可以参考图1所示方法的对应描述，在此不再赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。
本发明实施例提供的一种混合视图的显示装置，当接收到网页视图加载指令时，首先对所述网页视图进行加载，其中，所述网页视图中包含有用于添加客户端视图的占位元素，然后从所述网页视图的加载结果中获取所述占位元素的位置信息，并在所述位置信息添加所述客户端视图，最后显示所述添加有所述客户端视图的网页视图。与目前通过在webView当中直接添加子视图的方式实现混合视图的显示相比，本发明实施例在接收到网页视图加载指令时，首先从网页视图的加载结果中获取占位元素的位置信息，然后将客户端视图对应添加到占位元素的位置上，以此实现网页视图和客户端视图的混合展示，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，从而通过本发明可以提高混合视图显示的准确度及一致性。
进一步地，本发明实施例提供另一种混合视图的显示装置，如图4所示，所述装置包括：加载单元41，获取单元42，添加单元43，显示单元44。
加载单元41，当接收到网页视图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；
获取单元42，从所述网页视图的加载结果中获取所述占位元素的位置信息；
添加单元43，在所述位置信息添加所述客户端视图；
显示单元44，显示所述添加有所述客户端视图的网页视图。
对于本发明实施例，所述装置还包括：设置单元45；
所述添加单元43，在所述网页视图中添加所述占位元素，每个占位元素设置有对应的标识信息；
所述设置单元45，设置各个占位元素分别对应的客户端视图。
对于本发明实施例，所述占位元素的表现形式为块级元素，所述装置还包括：
配置单元46，将所述占位元素的状态信息配置成所述客户端视图对应的状态信息。
所述配置单元46，将所述占位元素的宽高信息设置成所述客户端视图对应的宽高信息。
对于本发明实施例，所述添加单元43包括：
获取模块431，从所述网页视图的加载结果中获取各个占位元素分别对应的位置信息；
添加模块432，在所述各个位置信息上，分别添加与所述占位元素对应的客户端视图。
对于本发明实施例，所述装置还包括：
输出单元47，若未从所述网页视图的加载结果中获取到所述占位元素的位置信息，则输出网页视图加载错误提示信息。
需要说明的是，本发明实施例提供的一种混合视图的显示装置所涉及各功能单元的其他相应描述，可以参考图2所示方法的对应描述，在此不再赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。
本发明实施例提供的另一种混合视图的显示装置，当接收到网页视图加载指令时，首先对所述网页视图进行加载，其中，所述网页视图中包含有用于添加客户端视图的占位元素，然后从所述网页视图的加载结果中获取所述占位元素的位置信息，并在所述位置信息添加所述客户端视图，最后显示所述添加有所述客户端视图的网页视图。与目前通过在webView当中直接添加子视图的方式实现混合视图的显示相比，本发明实施例在接收到网页视图加载指令时，首先从网页视图的加载结果中获取占位元素的位置信息，然后将客户端视图对应添加到占位元素的位置上，以此实现网页视图和客户端视图的混合展示，由于本发明实施例中的占位元素可以通过浏览器引擎渲染，因此将客户端视图添加到加载后的占位元素对应的位置上，可以使客户端视图随着网页视图的滚动而滚动，从而通过本发明可以提高混合视图显示的准确度及一致性。
所述混合视图的显示装置包括处理器和存储器，上述加载单元、获取单元、添加单元、显示单元、设置单元、配置单元和输出单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提高混合视图显示的准确率。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：当接收到网页视图显示位置切换指令时，对待显示网页视图进行加载，所述待显示网页视图中包含有用于添加客户端视图的占位元素；从所述待显示网页视图的加载结果中获取所述占位元素的位置信息；在所述位置信息添加所述客户端视图；显示所述添加有所述客户端视图的网页视图。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例混合视图的显示方法及装置、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种混合视图的显示方法，其特征在于，包括：
当接收到网页视图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；
从所述网页视图的加载结果中获取所述占位元素的位置信息；
在所述位置信息添加所述客户端视图；
显示所述添加有所述客户端视图的网页视图。
2.根据权利要求1所述的方法，其特征在于，对所述网页视图进行加载之前，所述方法还包括：
在所述网页视图中添加所述占位元素，每个占位元素设置有对应的标识信息；
设置各个占位元素分别对应的客户端视图。
3.根据权利要求2所述的方法，其特征在于，所述占位元素的表现形式为块级元素，在所述位置信息添加所述客户端视图之后，所述方法还包括：
将所述占位元素的状态信息配置成所述客户端视图对应的状态信息。
4.根据权利要求3所述的方法，其特征在于，将所述占位元素的状态信息配置成所述客户端视图对应的状态信息包括：
将所述占位元素的宽高信息设置成所述客户端视图对应的宽高信息。
5.根据权利要求2所述的方法，其特征在于，在所述位置信息添加所述客户端视图包括：
从待显示网页视图的加载结果中获取各个占位元素分别对应的位置信息；
在所述各个位置信息上，分别添加与所述占位元素对应的客户端视图。
6.根据权利要求1所述的方法，其特征在于，所述方法还包括：
若未从所述网页视图的加载结果中获取到所述占位元素的位置信息，则输出网页视图加载错误提示信息。
7.一种混合视图的显示装置，其特征在于，包括：
加载单元，当接收到网页视图加载指令时，对所述网页视图进行加载，所述网页视图中包含有用于添加客户端视图的占位元素；
获取单元，从所述网页视图的加载结果中获取所述占位元素的位置信息；
添加单元，在所述位置信息添加所述客户端视图；
显示单元，显示所述添加有所述客户端视图的网页视图。
8.根据权利要求7所述的装置，其特征在于，所述装置还包括：设置单元；
所述添加单元，在所述网页视图中添加所述占位元素，每个占位元素设置有对应的标识信息；
所述设置单元，设置各个占位元素分别对应的客户端视图。
9.根据权利要求8所述的装置，其特征在于，所述占位元素的表现形式为块级元素，所述装置还包括：
配置单元，将所述占位元素的状态信息配置成所述客户端视图对应的状态信息。
10.根据权利要求9所述的装置，其特征在于，
所述配置单元，将所述占位元素的宽高信息设置成所述客户端视图对应的宽高信息。
CN201610172774.1A 2016-03-24 2016-03-24 混合视图的显示方法及装置 Active CN107229454B (zh)

Priority Applications (10)

Application Number Priority Date Filing Date Title
CN201610172774.1A CN107229454B (zh) 2016-03-24 2016-03-24 混合视图的显示方法及装置
TW106102206A TWI700638B (zh) 2016-03-24 2017-01-20 混合視圖的顯示方法及裝置
EP17769338.9A EP3435225A4 (en) 2016-03-24 2017-03-13 DISPLAY METHOD AND DEVICE FOR MIXED VIEW
MYPI2018703337A MY197000A (en) 2016-03-24 2017-03-13 Mixed view display method and device
JP2018550402A JP2019513268A (ja) 2016-03-24 2017-03-13 混合ビュー表示方法及びデバイス
KR1020187030825A KR102293685B1 (ko) 2016-03-24 2017-03-13 혼합된 뷰 표시 방법 및 장치
PCT/CN2017/076421 WO2017162061A1 (zh) 2016-03-24 2017-03-13 混合视图的显示方法及装置
SG11201808002YA SG11201808002YA (en) 2016-03-24 2017-03-13 Mixed view display method and device
PH12018502001A PH12018502001A1 (en) 2016-03-24 2018-09-18 Mixed view display method and device
US16/135,604 US10789420B2 (en) 2016-03-24 2018-09-19 Mixed view display method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610172774.1A CN107229454B (zh) 2016-03-24 2016-03-24 混合视图的显示方法及装置

Publications (2)

Publication Number Publication Date
CN107229454A CN107229454A (zh) 2017-10-03
CN107229454B true CN107229454B (zh) 2019-11-12

Family

ID=59899212

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610172774.1A Active CN107229454B (zh) 2016-03-24 2016-03-24 混合视图的显示方法及装置

Country Status (10)

Country Link
US (1) US10789420B2 (zh)
EP (1) EP3435225A4 (zh)
JP (1) JP2019513268A (zh)
KR (1) KR102293685B1 (zh)
CN (1) CN107229454B (zh)
MY (1) MY197000A (zh)
PH (1) PH12018502001A1 (zh)
SG (1) SG11201808002YA (zh)
TW (1) TWI700638B (zh)
WO (1) WO2017162061A1 (zh)

Families Citing this family (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107818008B (zh) * 2017-11-21 2021-02-02 武汉斗鱼网络科技有限公司 页面加载方法及装置
CN108052548A (zh) * 2017-11-27 2018-05-18 深圳市前海圆舟网络科技股份有限公司 一种网页创建的方法、系统及终端设备
EP3496404A1 (en) * 2017-12-06 2019-06-12 V-Nova International Limited Image processing
CN109947424A (zh) * 2017-12-21 2019-06-28 天津数观科技有限公司 一种iOS App嵌入HTML5界面的数据处理方法
CN108875085B (zh) * 2018-07-18 2023-04-07 平安科技（深圳）有限公司 混合应用的图片处理方法、装置、计算机设备及存储介质
CN111552525A (zh) * 2019-01-24 2020-08-18 北京京东尚科信息技术有限公司 骨架屏生成方法及装置
CN111177635B (zh) * 2020-01-06 2024-01-02 北京字节跳动网络技术有限公司 网页显示高度确定方法、装置、存储介质及设备
CN111324834B (zh) * 2020-01-20 2024-01-16 北京有竹居网络技术有限公司 图文混排的方法、装置、电子设备及计算机可读介质
US11210106B2 (en) * 2020-01-28 2021-12-28 Microsoft Technology Licensing, Llc Simulated visual hierarchy while facilitating cross-extension communication
CN111522599B (zh) * 2020-04-13 2023-06-30 百度在线网络技术（北京）有限公司 用于发送信息的方法和装置
CN111782214B (zh) * 2020-07-03 2024-04-23 携程商旅信息服务（上海）有限公司 客户端系统、运行方法、电子设备和存储介质
CN113343151A (zh) * 2021-06-25 2021-09-03 上海渠杰信息科技有限公司 一种网页视图的处理方法及设备
DE102022202943A1 (de) 2022-03-25 2023-09-28 Robert Bosch Gesellschaft mit beschränkter Haftung Überwachungsanordnung mit Zugriffsberechtigung, Verfahren, Computerprogramm und Speichermedium
DE102022202941A1 (de) 2022-03-25 2023-09-28 Robert Bosch Gesellschaft mit beschränkter Haftung Überwachungsanordnung, Verfahren zur Überwachung, Computerprogramm und Datenträger

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102999613A (zh) * 2012-11-28 2013-03-27 北京奇虎科技有限公司 一种在浏览器中加载工具类窗口的方法及其装置
CN104657118A (zh) * 2013-11-18 2015-05-27 中国移动通信集团公司 Native+Web混合移动应用的实现方法及装置
CN105393222A (zh) * 2013-07-15 2016-03-09 微软技术许可有限责任公司 网络应用与本地应用之间的渲染委托

Family Cites Families (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2003521784A (ja) * 2000-02-04 2003-07-15 アメリカ オンライン インコーポレーティッド スケーラブルなウェブページを配信およびレンダリングするためのシステムとプロセス
US20020184337A1 (en) * 2001-05-21 2002-12-05 Anders Hyldahl Method and computer system for constructing references to virtual data
KR20020039646A (ko) * 2002-02-20 2002-05-27 (주) 퍼슨넷 에러페이지를 이용한 부가정보 관리방법
US8001477B2 (en) * 2005-11-11 2011-08-16 International Business Machines Corporation Method for exchanging portlet configuration data
EP1997038A4 (en) * 2006-03-01 2011-12-21 Infogin Ltd METHODS AND APPARATUS FOR USING WEB CONTENT ON VARIOUS TYPES OF DEVICES
US20080127133A1 (en) * 2006-11-28 2008-05-29 International Business Machines Corporation Aggregating portlets for use within a client environment without relying upon server resources
US20090119607A1 (en) * 2007-11-02 2009-05-07 Microsoft Corporation Integration of disparate rendering platforms
RU2010143024A (ru) 2008-03-21 2012-04-27 Конинклейке Филипс Электроникс Н.В. (Nl) Способ отображения информации, генерируемой клиентом
US9483449B1 (en) * 2010-07-30 2016-11-01 Amazon Technologies, Inc. Optimizing page output through run-time reordering of page content
US8667090B2 (en) * 2010-12-07 2014-03-04 Cisco Technology, Inc. Delivering a webpage to a client
CN102073502B (zh) * 2011-01-11 2013-02-20 百度在线网络技术（北京）有限公司 一种利用web原生布局进行页面渲染的方法及装置
US20120284632A1 (en) * 2011-05-06 2012-11-08 Cisco Technology, Inc. Integrated Rendering of Streaming Media in Virtualized Desktop Environment
US9058401B2 (en) * 2011-08-16 2015-06-16 Fabebook, Inc. Aggregating plug-in requests for improved client performance
US10498889B2 (en) * 2011-09-16 2019-12-03 Skype Advertisement funded telephone calls
AU2012350145A1 (en) * 2011-12-07 2014-07-03 Adinfinity Holdings Pty Ltd Systems and methods for processing web page data
US20130132820A1 (en) 2012-06-07 2013-05-23 Eric Poindessault Web browsing tool delivering relevant content
US9037914B1 (en) * 2012-06-28 2015-05-19 Google Inc. Error handling for widgets
US9910833B2 (en) * 2012-11-13 2018-03-06 International Business Machines Corporation Automatically rendering web and/or hybrid applications natively in parallel
US9754245B1 (en) * 2013-02-15 2017-09-05 Amazon Technologies, Inc. Payments portal
US9374446B2 (en) * 2013-05-15 2016-06-21 Microsoft Technology Licensing, Llc Web platform with select-to-call functionality
US20150234930A1 (en) * 2014-02-19 2015-08-20 Google Inc. Methods and systems for providing functional extensions with a landing page of a creative
US9858494B2 (en) * 2015-12-28 2018-01-02 Facebook, Inc. Systems and methods for analyzing rendered content

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102999613A (zh) * 2012-11-28 2013-03-27 北京奇虎科技有限公司 一种在浏览器中加载工具类窗口的方法及其装置
CN105393222A (zh) * 2013-07-15 2016-03-09 微软技术许可有限责任公司 网络应用与本地应用之间的渲染委托
CN104657118A (zh) * 2013-11-18 2015-05-27 中国移动通信集团公司 Native+Web混合移动应用的实现方法及装置

Also Published As

Publication number Publication date
JP2019513268A (ja) 2019-05-23
EP3435225A1 (en) 2019-01-30
US20190018830A1 (en) 2019-01-17
TW201734773A (zh) 2017-10-01
WO2017162061A1 (zh) 2017-09-28
TWI700638B (zh) 2020-08-01
PH12018502001A1 (en) 2019-07-01
SG11201808002YA (en) 2018-10-30
US10789420B2 (en) 2020-09-29
KR102293685B1 (ko) 2021-08-27
MY197000A (en) 2023-05-17
EP3435225A4 (en) 2019-12-11
KR20180134927A (ko) 2018-12-19
CN107229454A (zh) 2017-10-03

Similar Documents

Publication Publication Date Title
CN107229454B (zh) 混合视图的显示方法及装置
EP3425526B1 (en) Method and apparatus reusing list cell in hybrid application
CN106874174B (zh) 接口测试及功能测试的实现方法和装置
CN109460540A (zh) 一种表格分页显示方法及装置
CN107526592B (zh) 一种页面适配方法和装置
CN108134812B (zh) 数据处理方法和装置
CN104572431B (zh) 一种测试方法及装置
CN106874519A (zh) 页面展现方法和装置
CN107679214A (zh) 链接定位方法、装置、终端与计算机可读存储介质
CN109857964B (zh) 一种页面操作的热力图绘制方法、装置、存储介质及处理器
CN110213105A (zh) 一种跨平台微应用创建方法
CN109683773A (zh) 语料标注方法和装置
CN107977342A (zh) 一种文档对比方法及装置
CN110941428A (zh) 一种网站创建方法和装置
CN110020363A (zh) 绘制热力图的方法及装置
CN109582188B (zh) 一种实现弹窗内元素定位的方法、装置及相关设备
CN105100126B (zh) 发送卡券、生成卡券的方法、公众账号服务端和移动终端
CN114693226A (zh) 审批流程构建方法、装置、设备以及存储介质
CN107562749A (zh) 一种网页加载方法及网页加载装置
CN106681972A (zh) 表格显示方法及装置
CN110968811A (zh) 显示控制方法和装置
CN110968810A (zh) 网页数据处理方法和装置
CN110020342A (zh) 数据的处理方法及装置
CN110020285B (zh) 柱状图的处理方法及装置
CN107797930B (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
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 1245431

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20200917

Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Patentee after: Innovative advanced technology Co.,Ltd.

Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Patentee before: Advanced innovation technology Co.,Ltd.

Effective date of registration: 20200917

Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Patentee after: Advanced innovation technology Co.,Ltd.

Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands

Patentee before: Alibaba Group Holding Ltd.