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

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

Info

Publication number
WO2017162061A1
WO2017162061A1 PCT/CN2017/076421 CN2017076421W WO2017162061A1 WO 2017162061 A1 WO2017162061 A1 WO 2017162061A1 CN 2017076421 W CN2017076421 W CN 2017076421W WO 2017162061 A1 WO2017162061 A1 WO 2017162061A1
Authority
WO
WIPO (PCT)
Prior art keywords
view
client
webpage
placeholder
placeholder element
Prior art date
Application number
PCT/CN2017/076421
Other languages
English (en)
French (fr)
Inventor
牟强
Original Assignee
阿里巴巴集团控股有限公司
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 阿里巴巴集团控股有限公司 filed Critical 阿里巴巴集团控股有限公司
Priority to KR1020187030825A priority Critical patent/KR102293685B1/ko
Priority to EP17769338.9A priority patent/EP3435225A4/en
Priority to SG11201808002YA priority patent/SG11201808002YA/en
Priority to JP2018550402A priority patent/JP2019513268A/ja
Priority to MYPI2018703337A priority patent/MY197000A/en
Publication of WO2017162061A1 publication Critical patent/WO2017162061A1/zh
Priority to PH12018502001A priority patent/PH12018502001A1/en
Priority to US16/135,604 priority patent/US10789420B2/en

Links

Images

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
    • 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
    • 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

Definitions

  • the present invention relates to the field of web page processing technologies, and in particular, to a display method and apparatus for a hybrid view.
  • Hybrid App is an app between web-app and native-app, which can display the web view and client view of an application at the same time.
  • the web view is HTML5 running on the browser. (Hypertext Markup Language) page
  • the client view is a display page or control written by the iOS/Android development language, such as the Taobao application.
  • the Hybrid App can be used to display the Taobao application web view and client view.
  • a hybrid application can be implemented by adding a subview in a mobile terminal webView (client webpage container), that is, by adding a client view in the webView to realize a mixed display of the webpage view and the client view in the application.
  • client webpage container client webpage container
  • the web page view is rendered by the browser engine, and the client view relies on the compile and run of the operating system, the environment is different. Therefore, when the web page view is scrolled, the existing mixed view display is inconsistent.
  • the present invention has been made in order to provide a display method and apparatus for a hybrid view that overcomes the above problems or at least partially solves the above problems.
  • the present invention mainly provides the following technical solutions:
  • an embodiment of the present invention provides a display method of a hybrid view, the method comprising:
  • the web page view includes A placeholder element for adding a client view
  • an embodiment of the present invention further provides a display device of a hybrid view, the device comprising:
  • a loading unit when receiving a webpage view loading instruction, loading the webpage view, where the webpage view includes a placeholder element for adding a client view;
  • a display unit displaying the webpage view to which the client view is added.
  • the technical solution provided by the embodiment of the present invention has at least the following advantages:
  • the method and device for displaying a hybrid view when receiving a web page view loading instruction, first loading a web page view, wherein the web page view includes a placeholder element for adding a client view And obtaining the location information of the placeholder element from the loading result of the webpage view, adding the client view to the location information, and finally displaying the webpage view to which the client view is added.
  • the embodiment of the present invention first obtains the location information of the placeholder element from the loading result of the webpage view when receiving the webpage view loading instruction, and then The client view is added to the location of the placeholder element, thereby implementing a hybrid display of the web view and the client view.
  • the client view is added to the load.
  • the location of the subsequent placeholder element can cause the client view to scroll as the page view scrolls, so that the accuracy and consistency of the mixed view display can be improved by the present invention.
  • FIG. 1 is a flowchart of a display method of a hybrid view according to an embodiment of the present invention
  • FIG. 2 is a flowchart of a display method of another hybrid view according to an embodiment of the present invention.
  • FIG. 3 is a block diagram showing the composition of a display device in a hybrid view according to an embodiment of the present invention.
  • FIG. 4 is a block diagram showing the composition of a display device in another hybrid view according to an embodiment of the present invention.
  • FIG. 5 is a schematic diagram of an interface of a hybrid view according to an embodiment of the present invention.
  • An embodiment of the present invention provides a display method of a hybrid view. As shown in FIG. 1 , the method includes:
  • the web page view includes a placeholder element for adding a client view.
  • the webpage view loading instruction may be triggered by opening a specific page in the application, such as selecting a repayment button of the Alipay, a reservation purchase button in the treasure, and the like, and the embodiment of the present invention does not specifically limited.
  • the placeholder element included in the webpage view is an element that can change the size or width of the object.
  • the location element may be a block-level element, or a row-level element in the form of a block-level element, which is not specifically limited in the embodiment of the present invention.
  • the web page view is loaded, and the web page view is an HTML page
  • the web page view is loaded by the browser rendering engine.
  • the web page view is loaded through the internal mode of the system. For example, in iOS (Apple mobile device operating system), it is learned whether the web page view is loaded through the interface webViewDidFinishLoad (iOS). Finished; in Android (Android operating system), it is through the interface onPageFinished (Android) to know whether the page view loading is completed.
  • the javascript (script language) is used to obtain the location information of the placeholder element through the webview (client webpage view container) in the loading result of the webpage view to be displayed, and the location information is obtained according to the manner of the placeholder element.
  • the placeholders are differences in the way the placeholders are.
  • a script code that gets the location information of a placeholder element for:
  • Var ele document.getElementById('native-view');
  • Var xPoint ele.getBoundingClientRect().left;
  • Var yPoint ele.getBoundingClientRect().top+document.body.scrollTop;
  • 'native-view' in the above code represents the identifier of the placeholder element
  • xPoint represents the distance information of the placeholder element from the left side of the browser window
  • yPoint is used to obtain the placeholder element in the page relative to the upper side of the browser window. Position, so x and y in the axis determine where the placeholder element is in the loading result of the page view.
  • the client view is a native view control written and compiled by a corresponding mobile operating system language, such as an iOS UISwitch (switch control), an Android TextView (text display), or a user-written custom view control.
  • a mobile operating system language such as an iOS UISwitch (switch control), an Android TextView (text display), or a user-written custom view control.
  • the location information of the placeholder element is first obtained from the loading result of the webpage view, and then the client view is correspondingly added to the location of the placeholder element, thereby implementing the webpage.
  • the display method of the hybrid view is provided by the embodiment of the present invention.
  • the webpage view is first loaded, where the webpage view includes a placeholder for adding a client view. And obtaining the location information of the placeholder element from the loading result of the webpage view, adding the client view to the location information, and finally displaying the webpage view to which the client view is added.
  • the embodiment of the present invention first obtains the location information of the placeholder element from the loading result of the webpage view when receiving the webpage view loading instruction, and then The client view is added to the location of the placeholder element, thereby implementing a hybrid display of the web view and the client view.
  • the client view is added. Adding to the position corresponding to the loaded placeholder element can make the client view scroll with the scrolling of the webpage view, so that the accuracy and consistency of the hybrid view display can be improved by the invention.
  • An embodiment of the present invention provides another display method of a hybrid view. As shown in FIG. 2, the method includes:
  • Each of the placeholder elements is provided with corresponding identification information, and the identifier information is used to uniquely identify the placeholder element.
  • the placeholder elements included in the web page view are elements that can change the size or width of the object.
  • the location element may be a block-level element, or a row-level element in the form of a block-level element, which is not specifically limited in the embodiment of the present invention.
  • the placeholder element is set as a block level element or a row level element in the form of a block level element, and the width and height of the placeholder element can be set in the subsequent steps, that is, the client can be adjusted through the placeholder element.
  • the size of the view so that the accuracy and consistency of the client view display can be improved by the embodiment of the present invention.
  • the client view is a native view control written and compiled by a corresponding mobile operating system language, such as an iOS UISwitch (switch control), an Android TextView (text display), or a user-written custom view control.
  • a mobile operating system language such as an iOS UISwitch (switch control), an Android TextView (text display), or a user-written custom view control.
  • the example is not specifically limited.
  • the page view may include multiple client views, and each placeholder element may add a client view, after adding multiple placeholder elements in the webpage view, each placeholder element needs to be set.
  • Corresponding client views In the embodiment of the present invention, by setting a client view corresponding to each placeholder element, multiple client views may be correspondingly added to the location information corresponding to the placeholder element in a subsequent step.
  • the webpage view includes a placeholder element for adding a client view.
  • the webpage view loading instruction may be triggered by opening a specific page in the application, such as selecting an Alipay flower.
  • the button of the model, the reservation purchase button in the lucky treasure, and the like are not specifically limited in the embodiment of the present invention.
  • the operating system of different terminal devices is monitored through its internal system.
  • the loading of the web page view such as in iOS (Apple mobile device operating system), is to know whether the web page view is loaded through the interface webViewDidFinishLoad (iOS); in Android (Android operating system), the web page view is obtained through the interface onPageFinished (Android). Whether the loading is complete.
  • the location information of the placeholder element is a position of the page element in the visible area, and a position of the left and upper of the placeholder element relative to the browser window.
  • the location information of the placeholder element is obtained from the loading result of the web page view to be displayed, the location information of the placeholder element is obtained.
  • the representation of the placeholder element is a block level element.
  • the method further includes: configuring the state information of the placeholder element to be the state information corresponding to the client view.
  • the state information of the placeholder element may specifically be the width and height information of the state element, the resolution information, and the like, which are not specifically limited in the embodiment of the present invention.
  • the representation of the placeholder element is a block-level element, which may be: a block-level element or a row-level element whose expression is a block-level element, that is, an element that can change the state information of the place-holder element, The embodiment of the invention is not specifically limited.
  • configuring the status information of the placeholder element to the state information corresponding to the client view includes: setting the width and height information of the placeholder element to a width and height corresponding to the client view information. For example, you can set the width and height information converted to an element with the following code:
  • the width and height information of the placeholder element is set to the width and height information corresponding to the client view, so that the added client view is all displayed in the webpage view to be displayed, thereby
  • the width and height information of the bit element is set to the width and height information corresponding to the client view, which can improve the display accuracy of the client view, thereby improving the display accuracy and consistency of the mixed view.
  • adding the client view to the location information includes: obtaining location information corresponding to each placeholder element from the loading result of the webpage view; and adding, respectively, to each location information The client view corresponding to the placeholder element.
  • the location information corresponding to each placeholder element is obtained from the loading result, and then in each placeholder element. Add a client view corresponding to the placeholder element on the location information. Now add multiple client views to the page view.
  • Step 205b is a parallel step with step 205a. If the location information of the placeholder element is not obtained from the loading result of the webpage view, the webpage view loading prompt information is output to prompt for the new loading location. The page view. It should be noted that when there is no network in the terminal device or an error occurs during the loading of the web page view, the location information of the placeholder element cannot be obtained from the loading result of the web page view. .
  • the applicable scenario is as shown in FIG. 5, but is not limited thereto, and includes: when receiving the webpage view loading instruction, first loading the webpage view, that is, in the dotted line frame of the webpage view in FIG. The webpage element is loaded, and then it is judged whether the location information of the placeholder element can be obtained from the loading result of the webpage view, that is, whether the location element can be obtained from the loading result of the webpage view as "contact us.
  • Position information if the location information of the "contact us” placeholder element can be obtained from the loading result of the webpage view, obtain the location information of the "contact us” placeholder element, and obtain the location information in the webView Adding the client view, that is, adding a client view in the webView corresponding to the dotted box of the "Contact Us” in FIG. 5, thereby implementing a mixed display of the web view and the client view; if not from the web view
  • the location information of the placeholder element is obtained in the loading result, and the webpage view loading error prompt information is output, to Loading the web page for the new view.
  • the client view is added to the position corresponding to the loaded placeholder element, so that the client view can follow the webpage.
  • the scrolling of the view scrolls that is, the client view in the "Contact Us" dashed box in Figure 5 can be scrolled as the web view in the dashed box of the web view scrolls, so the flow layout can be achieved by adding placeholders in the web view.
  • the hybrid view is presented so that the accuracy and consistency of the hybrid view display can be improved by the present invention.
  • Another display method of the hybrid view provided by the embodiment of the present invention, when receiving the webpage view loading instruction, first loading the webpage view, wherein the webpage view includes a placeholder for adding a client view And then obtaining the location information of the placeholder element from the loading result of the webpage view, adding the client view to the location information, and finally displaying the webpage view to which the client view is added.
  • the embodiment of the present invention Compared with the current display of the hybrid view by directly adding the subview in the webView, the embodiment of the present invention first obtains the location information of the placeholder element from the loading result of the webpage view when receiving the webpage view loading instruction, and then Add a client view corresponding to the location of the placeholder element to achieve a mix of web view and client view
  • the placeholder element can be rendered by the browser engine, so that the client view is added to the position corresponding to the loaded placeholder element, so that the client view can be scrolled along with the web view. Scrolling, thereby improving the accuracy and consistency of the hybrid view display by the present invention.
  • the embodiment of the present invention provides a display device of a hybrid view.
  • the device includes: a loading unit 31, an obtaining unit 32, an adding unit 33, and a display unit 34.
  • the loading unit 31 loads the webpage view when receiving the webpage view loading instruction, where the webpage view includes a placeholder element for adding a client view;
  • the obtaining unit 32 is configured to obtain location information of the placeholder element from a loading result of the webpage view
  • Adding unit 33 adding the client view in the location information
  • the display unit 34 displays the webpage view to which the client view is added.
  • the display device of the hybrid view when receiving the web page view loading instruction, first loads the web page view, wherein the web page view includes a placeholder element for adding a client view. And obtaining the location information of the placeholder element from the loading result of the webpage view, adding the client view to the location information, and finally displaying the webpage view to which the client view is added.
  • the embodiment of the present invention first obtains the location information of the placeholder element from the loading result of the webpage view when receiving the webpage view loading instruction, and then The client view is added to the location of the placeholder element to implement the hybrid display of the web view and the client view. Since the placeholder element in the embodiment of the present invention can be rendered by the browser engine, the client view is added. By the position corresponding to the loaded placeholder element, the client view can be scrolled as the webpage view scrolls, so that the accuracy and consistency of the hybrid view display can be improved by the present invention.
  • the embodiment of the present invention provides another display device of a hybrid view.
  • the device includes a loading unit 41, an obtaining unit 42, an adding unit 43, and a display unit 44.
  • the loading unit 41 loads the webpage view when receiving the webpage view loading instruction, where the webpage view includes a placeholder element for adding a client view;
  • the obtaining unit 42 is configured to obtain location information of the placeholder element from a loading result of the webpage view
  • Adding unit 43 adding the client view in the location information
  • the display unit 44 displays the webpage view to which the client view is added.
  • the device further includes: a setting unit 45;
  • the adding unit 43 adds the placeholder elements in the webpage view, and each of the placeholder elements is provided with corresponding identification information;
  • the setting unit 45 sets a client view corresponding to each placeholder element.
  • the placeholder element is represented by a block level element, and the device further includes:
  • the configuration unit 46 configures the state information of the placeholder element into state information corresponding to the client view.
  • the configuration unit 46 sets the width and height information of the placeholder element to the width and height information corresponding to the client view.
  • the adding unit 43 includes:
  • the obtaining module 431 is configured to obtain location information corresponding to each of the placeholder elements from the loading result of the webpage view;
  • the adding module 432 adds a client view corresponding to the placeholder element to each of the location information.
  • the device further includes:
  • the output unit 47 outputs the web page view loading error prompt information if the location information of the placeholder element is not obtained from the loading result of the web page view.
  • the display device of the hybrid view provided by the embodiment of the present invention first loads the webpage view when receiving the webpage view loading instruction, wherein the webpage view includes a placeholder for adding the client view. And then obtaining the location information of the placeholder element from the loading result of the webpage view, adding the client view to the location information, and finally displaying the webpage view to which the client view is added.
  • the embodiment of the present invention first obtains the location information of the placeholder element from the loading result of the webpage view when receiving the webpage view loading instruction, and then The client view is added to the location of the placeholder element to implement the hybrid display of the web view and the client view.
  • the client view is added.
  • the client view can be scrolled as the webpage view scrolls, so that the accuracy and consistency of the hybrid view display can be improved by the present invention.
  • the display device of the hybrid view includes a processor and a memory, the loading unit, the obtaining unit, and the adding list
  • the unit, the display unit, the setting unit, the configuration unit, the output unit, and the like are all stored in the memory as program units, and the above-described program units stored in the memory are executed by the processor to implement the corresponding functions.
  • the processor contains a kernel, and the kernel removes the corresponding program unit from the memory.
  • the kernel can be set to one or more, and the kernel parameters can be adjusted to improve the accuracy of the mixed view display.
  • the memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory (flash RAM), the memory including at least one Memory chip.
  • RAM random access memory
  • ROM read only memory
  • flash RAM flash memory
  • the present application also provides a computer program product, when executed on a data processing device, is adapted to perform program code initialization with the following method steps: when receiving a web page view display position switching instruction, loading the displayed web page view,
  • the webpage view to be displayed includes a placeholder element for adding a client view; obtaining location information of the placeholder element from a loading result of the webpage view to be displayed; and adding the client to the location information a view; displaying the web page view to which the client view is added.
  • embodiments of the present application can be provided as a method, system, or computer program product.
  • the present application can take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment in combination of software and hardware.
  • the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.
  • the computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing device to operate in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture comprising the instruction device.
  • the apparatus implements the functions specified in one or more blocks of a flow or a flow and/or block diagram of the flowchart.
  • a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
  • processors CPUs
  • input/output interfaces network interfaces
  • memory volatile and non-volatile memory
  • the memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory.
  • RAM random access memory
  • ROM read only memory
  • Memory is an example of a computer readable medium.
  • Computer readable media includes both permanent and non-persistent, removable and non-removable media.
  • Information storage can be implemented by any method or technology.
  • the information can be computer readable instructions, data structures, modules of programs, or other data.
  • Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device.
  • computer readable media does not include temporary storage of computer readable media, such as modulated data signals and carrier waves.

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)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)

Abstract

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

Description

混合视图的显示方法及装置
本申请要求2016年03月24日递交的申请号为201610172774.1、发明名称为“混合视图的显示方法及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本发明涉及网页处理技术领域，尤其涉及一种混合视图的显示方法及装置。
背景技术
随着信息技术的快速发展，人们对移动终端设备上的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所述的装置，其特征在于，
    所述配置单元，将所述占位元素的宽高信息设置成所述客户端视图对应的宽高信息。
PCT/CN2017/076421 2016-03-24 2017-03-13 混合视图的显示方法及装置 WO2017162061A1 (zh)

Priority Applications (7)

Application Number Priority Date Filing Date Title
KR1020187030825A KR102293685B1 (ko) 2016-03-24 2017-03-13 혼합된 뷰 표시 방법 및 장치
EP17769338.9A EP3435225A4 (en) 2016-03-24 2017-03-13 DISPLAY METHOD AND DEVICE FOR MIXED VIEW
SG11201808002YA SG11201808002YA (en) 2016-03-24 2017-03-13 Mixed view display method and device
JP2018550402A JP2019513268A (ja) 2016-03-24 2017-03-13 混合ビュー表示方法及びデバイス
MYPI2018703337A MY197000A (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 (2)

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

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US16/135,604 Continuation US10789420B2 (en) 2016-03-24 2018-09-19 Mixed view display method and device

Publications (1)

Publication Number Publication Date
WO2017162061A1 true WO2017162061A1 (zh) 2017-09-28

Family

ID=59899212

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/076421 WO2017162061A1 (zh) 2016-03-24 2017-03-13 混合视图的显示方法及装置

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 北京奇虎科技有限公司 一种在浏览器中加载工具类窗口的方法及其装置
US20150019623A1 (en) * 2013-07-15 2015-01-15 Microsoft Corporation Delegation of rendering between a web application and a native application
CN104657118A (zh) * 2013-11-18 2015-05-27 中国移动通信集团公司 Native+Web混合移动应用的实现方法及装置

Family Cites Families (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1205571C (zh) * 2000-02-04 2005-06-08 美国联机股份有限公司 提供和呈现可缩放web文档的系统和方法
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
WO2007099544A2 (en) * 2006-03-01 2007-09-07 Infogin Ltd. Methods and apparatus for enabling use of 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
EP2258090A1 (en) * 2008-03-21 2010-12-08 Koninklijke Philips Electronics N.V. Method for displaying information generated by a client
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
WO2013082654A1 (en) * 2011-12-07 2013-06-13 Adinfinity Holdings Pty Ltd As Trustee For Adinfinity Ip Trust 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
US9940610B1 (en) * 2013-02-15 2018-04-10 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 北京奇虎科技有限公司 一种在浏览器中加载工具类窗口的方法及其装置
US20150019623A1 (en) * 2013-07-15 2015-01-15 Microsoft Corporation Delegation of rendering between a web application and a native application
CN104657118A (zh) * 2013-11-18 2015-05-27 中国移动通信集团公司 Native+Web混合移动应用的实现方法及装置

Also Published As

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

Similar Documents

Publication Publication Date Title
WO2017162061A1 (zh) 混合视图的显示方法及装置
KR102186865B1 (ko) 컨트롤 및 파트 부합 계층구조
CN105740364B (zh) 页面处理方法及相关装置
KR102127063B1 (ko) 하이브리드 애플리케이션에서의 ListCell 재사용 방법 및 장치
US10325568B2 (en) Providing a display based electronic survey
WO2017118305A1 (zh) 一种针对错误输入信息的页面定位方法及装置
CN112433726A (zh) 一种Echarts图表组件的封装方法及设备
CN113259224A (zh) 一种客服数据发送的方法及装置
CN111767002B (zh) 页面展示方法、装置、设备及存储介质
US10061494B2 (en) Method and device for webpage zooming on electronic apparatus
TW201504923A (zh) 表單處理方法和終端
CN109857964B (zh) 一种页面操作的热力图绘制方法、装置、存储介质及处理器
CN110941428A (zh) 一种网站创建方法和装置
CN110781425B (zh) 移动端h5页面的显示方法、装置、设备及存储介质
US9158743B1 (en) Grid layout control for network site design
WO2019019757A1 (zh) 视图展示方法及装置、存储器及用户终端
Kotaru Material Design Implementation with AngularJS
CN113343136B (zh) 一种展示信息的方法及装置
CN111539183B (zh) 数据处理方法、装置、电子设备和存储介质
US11635880B2 (en) Content animation customization based on viewport position
CN115661311A (zh) 一种滚动特效制作方法、装置、设备及介质
CN116204746A (zh) 渲染方法、装置、设备和存储介质
CN118092737A (zh) 页面处理方法、装置、电子设备、存储介质及程序产品
CN113641358A (zh) 一种页面生成以及页面显示方法、装置
CN112328476A (zh) 本地页面调试方法、系统、电子装置及存储介质

Legal Events

Date Code Title Description
WWE Wipo information: entry into national phase

Ref document number: 11201808002Y

Country of ref document: SG

ENP Entry into the national phase

Ref document number: 2018550402

Country of ref document: JP

Kind code of ref document: A

NENP Non-entry into the national phase

Ref country code: DE

ENP Entry into the national phase

Ref document number: 20187030825

Country of ref document: KR

Kind code of ref document: A

WWE Wipo information: entry into national phase

Ref document number: 2017769338

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2017769338

Country of ref document: EP

Effective date: 20181024

121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17769338

Country of ref document: EP

Kind code of ref document: A1