WO2022127449A1 - 一种网页页面的同步方法及装置、设备、存储介质 - Google Patents

一种网页页面的同步方法及装置、设备、存储介质 Download PDF

Info

Publication number
WO2022127449A1
WO2022127449A1 PCT/CN2021/129637 CN2021129637W WO2022127449A1 WO 2022127449 A1 WO2022127449 A1 WO 2022127449A1 CN 2021129637 W CN2021129637 W CN 2021129637W WO 2022127449 A1 WO2022127449 A1 WO 2022127449A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
sub
main
specified
content
Prior art date
Application number
PCT/CN2021/129637
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 深圳前海微众银行股份有限公司
Publication of WO2022127449A1 publication Critical patent/WO2022127449A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/23—Updating
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/27—Replication, distribution or synchronisation of data between databases or within a distributed database system; Distributed database system architectures therefor
    • 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • 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
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents

Definitions

  • the present invention is based on a Chinese patent application with an application number of 202011497200.4 and an application date of December 17, 2020, and claims the priority of the Chinese patent application.
  • the entire content of the Chinese patent application is hereby incorporated into the present invention by way of introduction.
  • the embodiments of the present application relate to, but are not limited to, the information technology of financial technology (Fintech), and in particular, relate to a method and apparatus, device, and storage medium for synchronizing a webpage.
  • Financial technology Fettech
  • the embodiments of the present application provide a method, apparatus, device, and storage medium for synchronizing web pages in order to solve the above-mentioned problems in the related art.
  • an embodiment of the present application provides a method for synchronizing a webpage, the method comprising:
  • mapping relationship set based on the DOM management of the main page, the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page; the specified part
  • the attributes include the page element and address of the specified section;
  • the main page is loaded to render a specified portion of at least one sub-page on the main page.
  • an embodiment of the present application provides a device for synchronizing a webpage, the device comprising:
  • a first determining module configured to determine at least one container element on the main page
  • an acquisition module configured to acquire a mapping relationship set based on the DOM management of the main page, the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page ;
  • the attributes of the specified part include page elements and addresses of the specified part;
  • a first update module configured to update the DOM content of the specified part to the corresponding container element based on the page element and address of each of the specified parts in the mapping relationship
  • a first loading module configured to load the main page to present a specified portion of at least one sub-page on the main page.
  • an embodiment of the present application provides a computer device, including a memory and a processor, where the memory stores a computer program that can be executed on the processor, and the processor implements the steps in the above method when the processor executes the program .
  • an embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, implements the steps in the foregoing method.
  • At least one container element is determined on the main page, and a mapping relationship set based on the document object model (Document Object Model, DOM) management of the main page is obtained, and the mapping relationship Used to characterize the correspondence between each container element of the main page and the attribute of a specified part in the sub-page; the attribute of the specified part includes the page element and address of the specified part; based on the mapping relationship For each page element and address of the designated part, update the DOM content of the designated part into the corresponding container element; load the main page to present the designated part of at least one sub-page on the main page.
  • DOM Document object model
  • the page element and address of the specified part of the sub-page can be determined through the container element on the main page, and the specified parts of multiple sub-application pages can be integrated into the specified position of the main page, which can integrate multiple independently developed and runnable
  • the front-end pages of the sub-application system are integrated into the same main page, which avoids the modification of the sub-application during the integration process, which is more convenient and intelligent.
  • FIG. 1 is a schematic flowchart of an implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • FIG. 2 is a schematic flowchart of an implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • FIG. 3A is a schematic flowchart of an implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • FIG. 3B is a schematic flowchart of an implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • FIG. 3C is a schematic flowchart of an implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • 4A is a schematic diagram of a scenario of an embodiment of the present application.
  • FIG. 4B is a schematic flowchart of a DOM implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • FIG. 4C is a schematic flowchart of CSS implementation of a method for synchronizing a webpage according to an embodiment of the present application
  • FIG. 4D is a schematic flowchart of event management implementation of a method for synchronizing web pages according to an embodiment of the present application
  • FIG. 5 is a schematic diagram of the composition and structure of a synchronization device for a webpage according to an embodiment of the present application
  • FIG. 6 is a schematic diagram of a hardware entity of a computer device in an embodiment of the present application.
  • first ⁇ second ⁇ third involved are to distinguish similar objects, It does not represent a specific order for objects, and it is understood that “first ⁇ second ⁇ third” can be interchanged in a specific order or sequence if permitted, so that the embodiments of the present application described here can be Implemented in sequences other than those illustrated or described herein.
  • FIG. 1 is a schematic flowchart of the implementation of the method for synchronizing a webpage according to an embodiment of the present application. As shown in FIG. 1 , the method includes:
  • Step S101 determining at least one container element on the main page
  • the main page may be a main application page that does not include other applications, and the main application page may include a page of at least one sub-application.
  • the main application page may completely nest the pages of the sub-applications, or may nest part of the content in the pages of the sub-applications.
  • the container element represents an area inside which other elements are placed.
  • a div element or a span element.
  • page elements of other sub-pages other than the main page may be added to the container element.
  • each of the container elements may correspond to an area on the main page.
  • the form part, the graph part and the tree structure part in the main page respectively correspond to an area on the page, and each area has a container element.
  • the form part corresponds to container element 1; the graph part corresponds to container element 2; the tree structure part corresponds to container element 3.
  • Step S102 obtaining a mapping relationship set based on the DOM management of the main page, where the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page;
  • the attributes of the specified part include page elements and addresses of the specified part;
  • mapping relationship between the container element of the main page and the page element and address of the sub-page may be:
  • the DOM is a document object model, which is a hypertext markup language (Hyper Text Markup Language), a programming interface for HTML and XML documents.
  • the HTML DOM defines standard methods for accessing and manipulating HTML documents. DOM expresses HTML documents in a tree structure.
  • the specified part is the content of the sub-page that needs to be displayed in the main page.
  • the specified The part is the form part; for the sub-application page B, the specified part is the graph part; for the sub-application page C, the specified part is the tree structure diagram part.
  • the corresponding relationship between each container element and the attribute of a specified part in the sub-page can be determined through the mapping relationship, and the attribute of the specified part includes the page element and the address of the specified part.
  • the page element and address of the form part in the sub-application page A corresponding to the container element 1 can be determined through the mapping relationship;
  • the graph part in the sub-application page B corresponding to the container element 2 can be determined through the mapping relationship.
  • the page element and address of ; the page element and address of the tree structure diagram part in the sub-application page C corresponding to the container element 3 can be determined through the mapping relationship.
  • Step S103 based on the page element and address of each of the designated parts in the mapping relationship, update the DOM content of the designated part to the corresponding container element;
  • the page elements and addresses of the form part, the graph part and the tree structure graph part in the main page can be determined through the mapping relationship.
  • the DOM content of the structure diagram section is updated to the container element of the main page.
  • Step S104 loading the main page to present a designated part of at least one sub-page on the main page.
  • the DOM contents of the form part, the graph part and the tree structure part are updated to the container element of the main page, and the form part, the sub-application page A in the form part, the sub-app The graph part in the application page B and the tree structure part in the sub-application page C are integrated into the main application page.
  • At least one container element is determined on the main page, and a mapping relationship set based on the DOM management of the main page is obtained, where the mapping relationship is used to represent each container element and child elements of the main page Correspondence between attributes of a specified part in the page; the attributes of the specified part include the page element and address of the specified part; based on the page element and address of each specified part in the mapping relationship, all The DOM content of the specified part is updated into the corresponding container element; the main page is loaded to present the specified part of at least one sub-page on the main page.
  • the page element and address of the specified part of the sub-page can be determined through the container element on the main page, and the specified parts of multiple sub-application pages can be integrated into the specified position of the main page, which can integrate multiple independently developed and runnable
  • the front-end pages of the sub-application system are integrated into the same main page, which avoids the modification of the sub-application during the integration process.
  • FIG. 2 is a schematic flowchart of the implementation of the method for synchronizing a webpage according to an embodiment of the present application. As shown in FIG. 2 , the method includes:
  • Step S201 determining at least one container element on the main page
  • Step S202 acquiring a mapping relationship set based on the DOM management of the main page, where the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page;
  • the attributes of the specified part include page elements and addresses of the specified part;
  • Step S203 based on the page element and address of each of the designated parts in the mapping relationship, update the DOM content of the designated part to the corresponding container element;
  • Step S204 adding an iframe element for each of the designated parts on the main page;
  • the iframe is an HTML tag that acts as a document within a document, or a floating frame (FRAME).
  • the iframe element creates an inline frame (ie, an inline frame) that contains another document.
  • the specified portion may be a specified page element in a sub-page, and the specified portion in each sub-page corresponds to the sub-pages one-to-one.
  • the iframe element can be used to load a complete sub-page, and after the loading is completed, the specified part of the content in the sub-page is synchronized to the container element of the main page according to the mapping relationship.
  • Step S205 configure the iframe element based on the page element and address of each of the specified parts in the mapping relationship
  • Step S206 Load the main page, and load each iframe element in the main page synchronously, so as to present a designated part of at least one sub-page on the main page.
  • the loading of the main page can be based on the mapping relationship, in the main page, the iframe element of each sub-page can be configured with a specified part of the page element and address, so as to load the main page synchronously in the process of loading the main page the subpage.
  • the main page is a main application page of the micro-frontend
  • the sub-page is a sub-application page of the micro-frontend
  • at least two of the designated parts are located on the same or different sub-pages .
  • the Micro Front-end mainly introduces the concept of microservices to the front-end, decouples multiple modules or applications in the front-end, and enables the sub-modules of the front-end to be stored, run independently, and deployed independently.
  • sub-application page and the main application page belong to different applications.
  • a sub-application page may include at least one designated section for integration into the main application page.
  • the main page is the main application page of the micro-frontend
  • the sub-page is the sub-application page of the micro-frontend
  • at least two of the specified parts are located in the same or different places. on the subpage.
  • the iframe element by adding an iframe element to each of the specified parts on the main page; based on the mapping relationship, the iframe element is configured with the page element and address of each of the specified parts; in this way, the iframe element can be configured by Add an invisible iframe element, configure the iframe element according to the page element and address of the specified part according to the mapping relationship, and integrate the specified part in the sub-application into the main page. In this way, the amount of data transmission is reduced, and the loading speed of the web page is improved.
  • FIG. 3A is a schematic flowchart of the implementation of the method for synchronizing a webpage according to an embodiment of the present application. As shown in FIG. 3A , the method includes:
  • Step S310 determining at least one container element on the main page
  • Step S320 obtaining the mapping relationship set based on the DOM management of the main page, the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page;
  • the attributes of the specified part include page elements and addresses of the specified part;
  • Step S330 in the case of loading the main page each time, based on the page element and address of each of the designated parts in the mapping relationship, all the DOM content of the designated part is copied to the corresponding container element;
  • Step S340 loading the main page to present a designated part of at least one sub-page on the main page.
  • step S330 can be implemented through steps A1 and A2:
  • Step A1 in the case of loading the main page for the first time, based on the page element and address of each of the specified parts in the mapping relationship, all the DOM contents of the specified part are copied to the corresponding container element;
  • Step A2 in the case of loading the main page except for the first time, based on the page element and address of each of the designated parts in the mapping relationship, the incremental part of the DOM content of the designated part is Update to the corresponding container element.
  • the increment is the DOM content that is different in the child page element and the main page element.
  • the new record is updated to the container element corresponding to the sub-page where the form is located.
  • the step A2 in the case where the main page is loaded after the first time, based on the page element and address of each of the specified parts in the mapping relationship, the The incremental portion of the specified portion of the DOM content is updated to the corresponding container element, including:
  • Step A21 based on the page elements and addresses of each of the specified parts in the mapping relationship, monitor the changes of the page elements and attributes of each of the specified parts;
  • Step A22 comparing the change of the DOM content of each of the specified parts with the content in the corresponding container element on the main page to obtain the incremental part of the DOM content;
  • Step A23 updating the incremental part of the DOM content into the container element of the main page.
  • the full update may be performed directly without comparing with the content in the corresponding container element on the main page.
  • the update process is: delete the sub-page element directly on the main page.
  • the sub-page elements are modified synchronously in the container element of the main page.
  • the newly added element is added to the container element of the main page.
  • FIG. 3B is a schematic flowchart of the implementation of the method for synchronizing a webpage according to an embodiment of the present application. As shown in FIG. 3B , the method includes:
  • Step S31 determining at least one container element on the main page
  • Step S32 obtaining the mapping relationship set based on the DOM management of the main page, and the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page;
  • the attributes of the specified part include page elements and addresses of the specified part;
  • Step S33 in the case of loading the main page for the first time, based on the page element and address of each of the designated parts in the mapping relationship, all the DOM content of the designated part is copied to the corresponding container element;
  • Step S34 in the case of loading the main page except for the first time, based on the page elements and addresses of each of the designated parts in the mapping relationship, monitor the page elements and attributes of each of the designated parts The change;
  • Step S35 comparing the change of the DOM content of each of the specified parts with the content in the corresponding container element on the main page to obtain the incremental part of the DOM content;
  • Step S36 updating the incremental part of the DOM content to the container element of the main page
  • Step S37 under the situation that the DOM content of each described designated part is synchronized, check whether there is a new style tag or the content of the style tag is changed, and obtain the incremental part of the CSS content;
  • CSS Cascading Style Sheets
  • styles define how to display or represent HTML elements.
  • the CSS is divided into two types: one is the CSS style embedded in the ⁇ head> tag of the DOM in the form of a style tag and a CSS file; the other is the CSS style in the page element of the DOM.
  • Step S38 updating the incremental part of the CSS content to the container element of the main page
  • Step S39 loading the main page to present a designated part of at least one sub-page on the main page.
  • increments of CSS content in page elements can be synchronized by means of incremental DOM updates.
  • incremental one-way synchronization in the form of style tags and CSS files can be encapsulated into the main application page.
  • the method before updating the incremental portion of the CSS content into the container element of the home page, the method further comprises:
  • Step C creating a unique scope ID for each of the designated parts
  • Step S38 updating the incremental part of the CSS content to the container element of the main page, including: The incremental part of the domain ID is updated to the container element of the main page.
  • sub-pages of different sub-applications may have the same ID, and the uniqueness of the scope ID cannot be guaranteed, and conflicts may be caused due to the non-uniqueness of the scope ID. Therefore, a unique scope ID can be created for each sub-application, thereby ensuring that the target elements in different sub-pages have a unique scope ID in the case of full synchronization and incremental synchronization to the main page. In this way, in the process of unidirectionally encapsulating CSS styles into the main page, for example, in the process of encapsulating style tags (style tags) and CSS files into the main page unidirectionally synchronously, while maintaining style synchronization, different sub-pages can be avoided. Pollution caused by using the same ID style between applications.
  • the unique scope ID is sub-3, insert sub-3 as an attribute into the container element, add the scope ID attribute to the container element after insertion, such as ⁇ div sub-3> ⁇ /div>, and then , the outermost layer of all CSS styles of subpages will be wrapped with [sub-3], for example, [sub-3] ⁇ CSS styles of subpages ⁇ .
  • a unique scope ID is newly created for each of the specified parts; the incremental part with the scope ID is updated to the container element of the main page.
  • FIG. 3C is a schematic flowchart of the implementation of the method for synchronizing a webpage according to an embodiment of the present application. As shown in FIG. 3C , the method includes:
  • Step S301 determining at least one container element on the main page
  • Step S302 on the main page, monitor user event operations triggered in each of the container elements
  • the user event operation may be a user event operation such as a mouse and a keyboard.
  • Step S303 obtaining the mapping relationship set based on the DOM management of the main page, the mapping relationship is used to represent the corresponding relationship between each container element of the main page and an attribute of a specified part in the sub-page;
  • the attributes of the specified part include page elements and addresses of the specified part;
  • Step S304 based on the page element and address of each of the designated parts in the mapping relationship, update the DOM content of the designated part to the corresponding container element;
  • Step S305 based on the mapping relationship, transfer the user event operation to the specified part of the corresponding target sub-page;
  • the target sub-page of the user event operation can be determined through the mapping relationship, and the user event operation is transferred to the specified part of the corresponding target sub-page.
  • Step S306 monitoring the change of the DOM content in the specified part of the target sub-page
  • the specified part of the target sub-page triggers the user event operation synchronously, causing the DOM content in the specified part of the target sub-page to change.
  • the observer MutationObserver can be used to monitor.
  • MutationObserver is the Web API interface that provides the ability to monitor changes made to the DOM tree.
  • API Application Programming Interface
  • the API is an application programming interface, which is some pre-defined functions, or refers to a convention for connecting different components of a software system.
  • the observer monitors the changes of the sub-page elements in the container element and the attributes of the sub-page elements; on the other hand, detects the changes of CSS styles in the ⁇ head> tag.
  • Step S307 updating the updated DOM content to the corresponding container element
  • Step S308 Load the main page to present a designated part of at least one sub-page on the main page.
  • the step S305 transfers the user event operation to the specified part of the corresponding target sub-page, including:
  • Step S3051 based on the mapping relationship, determine the target sub-page of the user event operation
  • Step S3052 Obtain the adapter for the user event operation, wherein the adapter is used to transfer the user event operation triggered on the main page to the specified part of the target sub-page, and the content configured in the adapter includes at least one of the following: The type of the user event operation, the target element of the specified part in the target sub-page, and the DOM tree path of the target element;
  • the adapter is used to synchronize the user event operation of the main page to the sub-page. Use the same adapter to adapt the events of each main page to the child pages.
  • the adapter can synchronize the input content to the sub-pages at the same time as the input content of the main page.
  • Step S3053 searching for the target element in the specified part according to the DOM tree path of the target element configured in the adapter;
  • the DOM tree path in the main page may be a relative path of the target element relative to the container element of the sub-page in the main page.
  • the child page is a form
  • the target element is an input box
  • the DOM tree path is the relative path of the input element relative to the container element of the form.
  • the relative position of the input element in the subpage can be determined according to the position of the container element of the form and the relative path.
  • Step S3054 Trigger the user event operation on the target element according to the type of the user event operation configured in the adapter, so as to transmit the user event operation to the specified part of the corresponding target sub-page.
  • the triggered user event operation type input input content ⁇ keyboard event, correspondingly, trigger a keyboard event in the target element of the specified part of the subpage to input content;
  • triggered user event operation type click Enter ⁇ The content change event, correspondingly, triggers a content change event for an input box in the target element of the specified part of the subpage.
  • the content configured in the adapter further includes parameters in a preset format
  • the method further includes: passing the parameters in the preset format configured in the adapter to a specified part of the target sub-page.
  • the parameters of the preset format may be data obtained from the main page, or may be a method capable of obtaining the execution result of the specified part of the sub-page.
  • the additional parameters of the agreed format can be stored in the adapter, and in the process of synchronizing the user event operation of the main page to the specified part of the target sub-page, the additional parameters of the agreed format are synchronized to the specified part of the target sub-page through the adapter. .
  • the additional parameter of the agreed format may be a callback function.
  • the callback function is used to send the execution method to the designated part of the target sub-page on the main page, and the designated part of the target sub-page executes the corresponding method.
  • the background needs to be called to obtain data, and the main page will not wait for the target sub-page.
  • the specified part of the page is logically processed, and after the execution is completed, the main page can be notified through the callback function that the method has been executed.
  • the additional parameters in the agreed format may be user information obtained from the main page, for example, the user's username and password.
  • the designated part of the target sub-page receives the user name and password, executes the user authentication method in the designated part, puts the execution result in the DOM of the sub-page, and synchronizes the execution result to the main page through the DOM synchronization process to complete the main page Communication with the specified section of the target subpage.
  • the parameters of the preset format configured in the adapter are passed to the specified part of the target sub-page, so that the parameters of the preset format can be used in the main page and the target sub-page.
  • the type of user event operation configured in the adapter trigger the user event operation on the target element, so as to transmit the user event operation to the corresponding target child
  • the specified part of the page in this way, the adapter can be used to synchronize the user event operation of the main page to the specified part of the target sub-page, realize the synchronization mechanism of the corresponding content between the main page and the sub-application, and provide the extension between the web pages of different applications.
  • micro-frontends in the field of web page development, there are two ways to implement micro-frontends (1) iframe nesting method: by adding an iframe tag to the main application page, specifying the address of the sub-application through the src field, and directly nesting the display of other sub-applications page. (2) Combined application routing distribution method: build and deploy each sub-application independently, and provide interfaces for loading, starting and unloading functions according to the requirements of the main application. During the running process, the main application To carry out routing management application loading, startup, unloading, communication mechanism.
  • the loading interface provided by the sub-application is called to load the content provided by the sub-application to the main application page; in mode (2), the main application page is routed and redirected In this case, you need to call the uninstall interface provided by the sub-application first to uninstall the sub-application, and then perform a new route. It can be seen that, in the related art, the effect achieved is to integrate the front-end pages implemented by multiple front-end technology stacks into one page to run to form a composite single-page application.
  • the disadvantage is that the sub-application needs to be transformed to provide a set of functional pages without headers, navigation, etc.; the size of the display area embedded in the iframe is not easy to control, and there are certain Limitations; iframe style display, compatibility, etc. have limitations (for example, the global modal box cannot be displayed).
  • the disadvantage is that each sub-application needs to be modified to provide the same loading, unloading, and construction methods; the public libraries used need to be managed in a unified manner, otherwise conflicts will be caused.
  • the present application provides a method for synchronizing web pages.
  • the sub-page and the main page belong to different applications.
  • the method integrates and nests specified parts of multiple sub-application pages into The designated position (including DOM content and style) of the main application page realizes the integration of the front-end interfaces of multiple independently developed and run application systems into a page with the same URL address.
  • FIG. 4A is a schematic diagram of a scenario according to an embodiment of the present application.
  • the sub-page and the main page belong to different applications, and the sub-page and the main page belong to different applications.
  • the form part of the application page A, the graph part of the sub-application page B, and the tree structure part of the sub-application page C are integrated into the main application page and placed in the designated position of the main application page.
  • the specified part of the sub-application page to be integrated is divided into three parts: DOM, CSS and Event, wherein the DOM part is used to monitor the DOM change of the specified part of the sub-application page , synchronizing the changed content to the main application page; unidirectionally synchronizing the style content of the sub-application page to the main application page through CSS; mapping the event response of the corresponding part of the main application page to the sub-application synchronous triggering through Event.
  • Event represents the event object, which represents the state of the event, such as the element in which the event occurs, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
  • Fig. 4B is a DOM implementation flow diagram of a synchronization method for a web page provided by the embodiment of the application, as shown in Fig. 4B, the method includes:
  • Step S401 establishing a mapping relationship
  • mapping relationship is a mapping relationship between the main application page and the sub-application page.
  • mapping relationship between the sub-application page element and the sub-application page address and the container element to be displayed on the main application page is added on the main application page.
  • mapping relationship The format of the mapping relationship is as follows:
  • Step S402 load the main application page
  • loading the main application page may add an inline frame element (iframe element) to each sub-application page in the main application page according to the mapping relationship, and configure the address of the sub-application page, to load the sub-application page according to the address.
  • iframe element inline frame element
  • Step S403 load the sub-application page
  • Step S404 for the first time, the full amount of target elements is synchronized
  • the target element is a sub-application page element in the mapping relationship.
  • all elements of the sub-application page are synchronized into the container element of the main application page.
  • the observer MutationObserver can be used to monitor. On the one hand, monitor the changes of the sub-application page elements in the container element and the attributes of the sub-application page elements; on the other hand, detect the changes of CSS styles in the ⁇ head> tag.
  • Step S405 monitor changes, and incrementally synchronize.
  • the monitoring for changes may be performed by building a timer to regularly check the page elements and page element attributes corresponding to the sub-applications for changes.
  • the increment is the content that is different in the page element of the sub-application and the page element of the current main application.
  • the event management maps the user event operation to the sub-application page
  • the sub-application page triggers the synchronous user event operation
  • the execution method in JavaScript will be executed, in order to only To synchronize child page elements and execute the execution method in JavaScript during the event management process, you need to clear the ⁇ script> tag.
  • After clearing the ⁇ script> tag and monitoring the changes on the sub-application page compare the elements of the sub-application page with the elements of the current main application page, and update the different content synchronously on the main application page.
  • the sub-application page elements may be compared with the current main application page elements, and a full update may be directly performed.
  • the updating process is as follows: directly deleting the sub-application page element on the main application page.
  • the page elements of the sub-applications are modified synchronously in the container element of the main application page.
  • the newly added element is added to the container element of the main application page.
  • CheckBox check box
  • Input text input box
  • FIG. 4C is a schematic flowchart of CSS implementation of a method for synchronizing a webpage page provided by an embodiment of the present application. As shown in FIG. 4C , the method includes:
  • Step S410 for the first time, the target element CSS in the sub-application page 42 is fully synchronized to the main application page 41;
  • the CSS is divided into two types: one is: embedded in the DOM in the form of an html tag; the other is: with CSS content on the html tag of the DOM.
  • the target element is an element in each sub-page that is designated to be synchronized to the main application page.
  • different sub-application pages may have the same ID, and the uniqueness of the scope ID cannot be guaranteed, and conflicts may be caused due to the non-uniqueness of the scope ID. Therefore, a unique scope ID can be created for each sub-application, thereby ensuring that the target elements in different sub-application pages 42 have a unique scope in the case of full synchronization and incremental synchronization to the main application page ID. In this way, in the process of unidirectionally encapsulating CSS styles into the main application page, for example, in the process of unidirectionally encapsulating style tags (style tags) and CSS files into the main application page, while maintaining style synchronization, avoid Pollution caused by using the same ID style between different sub-applications.
  • the unique scope ID is sub-3, insert sub-3 as an attribute into the container element, add the scope ID attribute to the container element after insertion, such as ⁇ div sub-3> ⁇ /div>, and then , the outermost layer of all CSS styles of subpages will be wrapped with [sub-3], for example, [sub-3] ⁇ CSS styles of subpages ⁇ .
  • step S420 the increment of CSS in the sub-application page 42 is synchronized to the main application page 41 while the DOM is synchronized.
  • every time the DOM is synchronized it will check whether there is a new style tag or the content of the style tag has been changed, and update it synchronously.
  • FIG. 4D is a schematic diagram of an event management implementation flowchart of a method for synchronizing a webpage page provided by an embodiment of the present application. As shown in FIG. 4D , the method includes :
  • Step S41 monitoring the user event operation of the main application page
  • the user event operation may be a user event operation of a user such as a mouse and a keyboard.
  • Step S42 establishing an adapter for the user event operation
  • the adapter is used to synchronize the user event operation of the main application page to the sub-application page. Use the same adapter to adapt the events of each main application page to the sub-application page.
  • the adapter can synchronize the input content to the sub-pages at the same time as the input content of the main page.
  • the adapter may be used to record the triggered event type, the target element, and the position of the target element relative to the container element of the main application page.
  • the location of the target element relative to the container element of the main application page can be a DOM tree path.
  • the DOM tree path in the main page may be a relative path of the target element relative to the container element of the sub-application page in the main application page.
  • the sub-application page is a form
  • the target element is an input box
  • the DOM tree path is the relative path of the input element relative to the container element of the form.
  • the relative position of the input element in the sub-application page can be determined according to the position of the container element of the form and the relative path.
  • the method further includes: step S43, triggering the user event operation in the sub-application page according to the adapter.
  • triggering the user event operation in the sub-application page includes:
  • the triggered user event operation type input input content ⁇ keyboard event, correspondingly, trigger a keyboard event in the sub-page to input content;
  • triggered user event operation type click Enter ⁇ content change event, corresponding to , trigger a content change event for an input box in the subpage.
  • additional parameters in the agreed format may be passed to the sub-application, where the additional parameters in the agreed format may be data obtained from the main application page, or It can be a method that can obtain the execution result of the sub-application page.
  • the additional parameters of the agreed format may be stored in the adapter, and in the process of synchronizing the user event operation of the main application page to the sub-application page, the additional parameters of the agreed format are synchronized to the sub-application page through the adapter.
  • the additional parameter of the agreed format may be a callback function.
  • the callback function is used to send the execution method to the sub-page on the main page, and the sub-page executes the corresponding method.
  • the background needs to be called to obtain data.
  • the main page will not wait for the sub-page to perform logical processing.
  • the main page can be notified through the callback function that the method has been executed.
  • the additional parameters in the agreed format may be user information obtained from the main application page, for example, the user's username and password.
  • the sub-application page receives the user name and password, executes the user authentication method on the sub-application page, puts the execution result in the DOM of the sub-application page, and synchronizes the execution result to the main application page through the DOM synchronization process to complete the main application Communication between pages and sub-application pages.
  • the API provided by the main application page is injected into the sub-application page. For example, it displays a full-screen pop-up window, a method for reading global parameters, and a method for returning parameters.
  • the sub-application can transcend the limitation of the iframe, operate the content other than the current sub-application page element, and communicate with the main application page.
  • the embodiments of the present application provide an apparatus for synchronizing web pages.
  • the apparatus includes each module included, each sub-module included in each module, and each unit included in each sub-module. It can be realized by a processor in a computer device; of course, it can also be realized by a specific logic circuit; in the process of implementation, the processor can be a central processing unit (CPU), a microprocessor (MPU), a digital signal processor (DSP) Or Field Programmable Gate Array (FPGA) etc.
  • CPU central processing unit
  • MPU microprocessor
  • DSP digital signal processor
  • FPGA Field Programmable Gate Array
  • FIG. 5 is a schematic diagram of the composition and structure of a web page synchronization apparatus according to an embodiment of the present application.
  • the apparatus 500 includes a first determination module 501, an acquisition module 502, a first update module 503, and a first loading module 504. in:
  • a first determining module 501 configured to determine at least one container element on the main page
  • the obtaining module 502 is configured to obtain a mapping relationship set based on the DOM management of the main page, where the mapping relationship is used to represent the correspondence between each container element of the main page and an attribute of a specified part in the sub-page relationship; the attributes of the specified section include page elements and addresses of the specified section;
  • a first update module 503, configured to update the DOM content of the specified part to the corresponding container element based on the page element and address of each of the specified parts in the mapping relationship;
  • the first loading module 504 is configured to load the main page to present a specified part of at least one sub-page on the main page.
  • the apparatus 500 further includes an add module, a configuration module and a second loading module, wherein: the add module is configured to add an iframe element for each of the designated parts on the main page; the configuration module, The iframe element is configured to configure the iframe element based on the page element and address of each of the specified parts in the mapping relationship; the second loading module is configured to load the main page, including loading each of the main pages. a said iframe element.
  • the first update module 503 includes a copy sub-module and an update sub-module, wherein: the copy sub-module is configured to load the main page for the first time or every time, based on the mapping relationship For each page element and address of the specified part, copy all the DOM content of the specified part into the corresponding container element; update the sub-module, and configure it to load the main page except for the first time. Next, based on the page element and address of each designated part in the mapping relationship, the incremental part of the DOM content of the designated part is updated to the corresponding container element.
  • the updating sub-module includes a monitoring unit, a comparing unit and an updating unit, wherein: the monitoring unit is configured to listen to each page element and address of each of the designated parts in the mapping relationship. Describe the changes of the page elements and attributes of the designated part; the comparison unit is configured to compare the change of the DOM content of each designated part with the content in the corresponding container element on the main page, and obtain the DOM content. Incremental part; an update unit, configured to update the incremental part of the DOM content into the container element of the main page.
  • the apparatus 500 further includes a checking module and a second updating module, wherein: the checking module is configured to check whether there is a new style tag or The content of the style tag is changed, and the incremental part of the CSS content is obtained; the second updating module is configured to update the incremental part of the CSS content into the container element of the main page.
  • the apparatus 500 further includes a first monitoring module, a first delivery module, a second monitoring module and a third updating module, wherein: the first monitoring module is configured to monitor each a user event operation triggered in the container element; a first delivery module, configured to deliver the user event operation to a specified part of a corresponding target sub-page based on a mapping relationship; a second monitoring module, configured to monitor the Changes in the DOM content in the specified part of the target sub-page; the third update module is configured to update the updated DOM content into the corresponding container element.
  • the apparatus 500 further includes a new module, wherein: the new module is configured to create a unique scope ID for each of the specified parts; the second update module is further configured to The incremental part of the scope ID is updated to the container element of the main page.
  • the first delivery module includes a determination sub-module, an obtaining sub-module, a search sub-module and a triggering sub-module, wherein: the determination sub-module is configured to determine the target sub-module of the user event operation based on the mapping relationship a page; an obtaining sub-module configured to obtain an adapter for the user event operation, wherein the adapter is configured to transmit the user event operation triggered on the main page to a specified part of the target sub-page, and the content configured in the adapter is at least It includes one of the following: the type of the user event operation, the target element of the specified part in the target sub-page, and the DOM tree path of the target element; a search sub-module, configured to be based on the target configured in the adapter The DOM tree path of the element searches for the target element in the specified part; the triggering submodule is configured to trigger the user event operation on the target element according to the type of user event operation configured in the adapter, so as to trigger the user
  • the content configured in the adapter further includes parameters in a preset format
  • the apparatus 500 further includes a second delivery module, wherein: the second delivery module is configured to convert the preset configured in the adapter The format parameter is passed to the specified section of the target subpage.
  • the aforementioned storage medium includes: a U disk, a mobile hard disk, a read only memory (Read Only Memory, ROM), a magnetic disk or an optical disk and other media that can store program codes.
  • ROM Read Only Memory
  • the aforementioned storage medium includes: a U disk, a mobile hard disk, a read only memory (Read Only Memory, ROM), a magnetic disk or an optical disk and other media that can store program codes.
  • the embodiments of the present application are not limited to any specific combination of hardware and software.
  • an embodiment of the present application provides a computer device, including a memory and a processor.
  • the memory stores a computer program that can be executed on the processor, and the processor implements the steps in the above method when executing the program.
  • an embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, implements the steps in the above method.
  • FIG. 6 is a schematic diagram of a hardware entity of the computer device in the embodiment of the application.
  • the hardware entity of the computer device 600 includes: a processor 601 , a communication interface 602 and a memory 603 , wherein
  • the processor 601 generally controls the overall operation of the computer device 600 .
  • the communication interface 602 enables the computer device to communicate with other terminals or servers through a network.
  • the memory 603 is configured to store instructions and applications executable by the processor 601, and may also cache data to be processed or processed by the processor 601 and various modules in the computer device 600 (eg, image data, audio data, voice communication data and Video communication data), which can be realized by flash memory (FLASH) or random access memory (Random Access Memory, RAM).
  • FLASH flash memory
  • RAM Random Access Memory
  • the disclosed apparatus and method may be implemented in other manners.
  • the device embodiments described above are illustrative.
  • the division of the units is a logical function division. In actual implementation, there may be other division methods.
  • multiple units or components may be combined, or may be integrated into Another system, or some features can be ignored, or not implemented.
  • the coupling, or direct coupling, or communication connection between the components shown or discussed may be through some interfaces, and the indirect coupling or communication connection of devices or units may be electrical, mechanical or other forms. of.
  • the unit described above as a separate component may or may not be physically separated, and the component displayed as a unit may or may not be a physical unit; it may be located in one place or distributed to multiple network units; Some or all of the units may be selected according to actual needs to achieve the purpose of the solution in this embodiment.
  • each functional unit in each embodiment of the present application may all be integrated into one processing unit, or each unit may be separately used as a unit, or two or more units may be integrated into one unit; the above integration
  • the unit can be implemented either in the form of hardware or in the form of hardware plus software functional units.
  • the aforementioned program can be stored in a computer-readable storage medium, and when the program is executed, the execution includes: The steps of the above method embodiments; and the aforementioned storage medium includes: a removable storage device, a read only memory (Read Only Memory, ROM), a magnetic disk or an optical disk and other media that can store program codes.
  • ROM Read Only Memory
  • the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.
  • the technical solutions of the embodiments of the present application may be embodied in the form of software products in essence or the parts that make contributions to related technologies.
  • the computer software products are stored in a storage medium and include several instructions to make
  • a computer device (which may be a personal computer, a server, etc.) executes all or part of the methods described in the various embodiments of the present application.
  • the aforementioned storage medium includes various media that can store program codes, such as a removable storage device, a ROM, a magnetic disk, or an optical disk.
  • the page elements and addresses of the specified parts of the sub-pages are determined through the container elements on the main page, and the designated parts of the multiple sub-application pages are integrated into the designated positions of the main page, so that a plurality of independently developed and The front-end pages of the running sub-application system are integrated into the same main page, which avoids the modification of the sub-application during the integration process, which is more convenient and intelligent.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Computing Systems (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本申请实施例公开了一种网页页面的同步方法及装置、设备、存储介质，其中，该方法包括：在主页面上确定至少一个容器元素；获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。

Description

一种网页页面的同步方法及装置、设备、存储介质
相关申请的交叉引用
本发明基于申请号为202011497200.4、申请日为2020年12月17日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此以引入方式并入本发明。
技术领域
本申请实施例涉及但不限于金融科技(Fintech)的信息技术，尤其涉及一种网页页面的同步方法及装置、设备、存储介质。
背景技术
随着计算机技术的发展，越来越多的技术应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，然而，由于金融行业的安全性、实时性要求，金融科技也对技术提出了更高的要求。然而，金融科技领域下，在网页页面的同步的场景中，需要通过主页面加载时调用子应用提供的加载接口，将子应用提供的内容加载到主页面，目前，需要对子应用进行改造，才能提供一组不带头部、导航等的功能页面，显然，这种加载方式繁琐、不智能。
发明内容
有鉴于此，本申请实施例为解决相关技术中存在的上述问题而提供一种网页页面的同步方法及装置、设备、存储介质。
本申请实施例的技术方案是这样实现的：
一方面，本申请实施例提供一种网页页面的同步方法，所述方法包括：
在主页面上确定至少一个容器元素；
获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
又一方面，本申请实施例提供一种网页页面的同步装置，所述装置包括：
第一确定模块，配置为在主页面上确定至少一个容器元素；
获取模块，配置为获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
第一更新模块，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
第一加载模块，配置为加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
再一方面，本申请实施例提供一种计算机设备，包括存储器和处理器，所述存储器 存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法中的步骤。
还一方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法中的步骤。
本申请实施例提供的网页页面的同步方法，在主页面上确定至少一个容器元素，获取基于所述主页面的文档对象模型(Document Object Model，DOM)管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。这样，可以通过主页面上的容器元素确定出子页面中指定部分的页面元素和地址，将多个子应用页面的指定部分集成到主页面的指定位置处，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面，避免了在整合过程中对子应用进行改造，更加便捷智能。
附图说明
图1为本申请实施例网页页面的同步方法的实现流程示意图；
图2为本申请实施例网页页面的同步方法的实现流程示意图；
图3A为本申请实施例网页页面的同步方法的实现流程示意图；
图3B为本申请实施例网页页面的同步方法的实现流程示意图；
图3C为本申请实施例网页页面的同步方法的实现流程示意图；
图4A为本申请实施例的场景示意图；
图4B为本申请实施例提供的一种网页页面的同步方法的DOM实现流程示意图；
图4C为本申请实施例提供的一种网页页面的同步方法的CSS实现流程示意图；
图4D为本申请实施例提供的一种网页页面的同步方法的事件管理实现流程示意图；
图5为本申请实施例网页页面的同步装置的组成结构示意图；
图6为本申请实施例中计算机设备的一种硬件实体示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚，下面结合附图和实施例对本申请的技术方案进行详细阐述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
在申请文件中出现“第一/第二”的类似描述的情况下，增加以下的说明，在以下的描述中，所涉及的术语“第一\第二\第三”是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技 术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。
下面结合附图和实施例对本申请的技术方案进行详细阐述。
本申请实施例提供一种网页页面的同步方法，图1为本申请实施例网页页面的同步方法的实现流程示意图，如图1所示，该方法包括：
步骤S101，在主页面上确定至少一个容器元素；
在一些实施例中，可以应用在微前端的场景中，也可以应用在其他具有页面的场景中。在微前端的场景中，所述主页面可以为一个不包括其他应用的主应用页面，所述主应用页面中可以包括至少一个子应用的页面。在实施过程中，所述主应用页面可以完整的嵌套子应用的页面，也可以嵌套子应用页面中的部分内容。
这里，所述容器元素代表一块区域，内部用于放置其他元素。例如，div元素，或者，span元素。在实施过程中，可以在所述容器元素中添加除主页面以外的其他子页面的页面元素。
在一些实施例中，每一所述容器元素可以对应主页面上的一个区域。举例说明，如图4A所示，主页面中表单部分、曲线图部分和树结构图部分分别对应页面上的一个区域，每一区域都有一个容器元素。主页面中表单部分对应容器元素1；曲线图部分对应容器元素2；树结构图部分对应容器元素3。
步骤S102，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
举例说明，所述主页面的容器元素与子页面的页面元素和地址之间的映射关系可以为：
主页面的容器元素:{
url:子应用页面地址，
ele:子应用页面元素
}。
这里，所述DOM为文档对象模型，是超文本标记语言(Hyper Text Markup Language)，HTML和XML文档的编程接口。HTML DOM定义了访问和操作HTML文档的标准方法。DOM以树结构表达HTML文档。
这里，所述指定部分为子页面中需要显示在主页面中的内容。例如，如图4A所示需要将子应用页面A中表单部分、子应用页面B中曲线图部分和子应用页面C中树结构图部分集成到主页面，对于子应用页面A而言，所述指定部分为表单部分；对于子应用页面B而言，所述指定部分为曲线图部分；对于子应用页面C而言，所述指定部分为树结构图部分。
在实施过程中，通过映射关系可以确定每一容器元素与子页面中一个指定部分的属性之间的对应关系，所述指定部分的属性包括所述指定部分的页面元素和地址。举例说明，如图4A所示，通过映射关系可以确定容器元素1对应的子应用页面A中表单部分的页面元素和地址；通过映射关系可以确定容器元素2对应的子应用页面B中曲线图部分的页面元素和地址；通过映射关系可以确定容器元素3对应的子应用页面C中树结构图部分的页面元素和地址。
步骤S103，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
举例说明，如图4A所示，通过映射关系可以确定主页面中表单部分、曲线图部分和树结构图部分的页面元素和地址，根据所示页面元素和地址将表单部分、曲线图部分和树结构图部分的DOM内容更新到主页面的容器元素中。
步骤S104，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在实施过程中，在加载所述主页面的情况下，根据所示主页面的容器元素中配置的页面元素和地址，对所述主页面中的每一子页面的指定部分进行加载，以在所述主页面上呈现至少一个子页面的指定部分。
举例说明，如图4A所示，根据所示页面元素和地址将表单部分、曲线图部分和树结构图部分的DOM内容更新到主页面的容器元素中，将子应用页面A中表单部分、子应用页面B中曲线图部分和子应用页面C中树结构图部分集成到主应用页面中。
在本申请实施例中，在主页面上确定至少一个容器元素，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。这样，可以通过主页面上的容器元素确定出子页面中指定部分的页面元素和地址，将多个子应用页面的指定部分集成到主页面的指定位置处，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面，避免了在整合过程中对子应用进行改造。
本申请实施例提供一种网页页面的同步方法，图2为本申请实施例网页页面的同步方法的实现流程示意图，如图2所示，该方法包括：
步骤S201，在主页面上确定至少一个容器元素；
步骤S202，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S203，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
步骤S204，在所述主页面上为每一所述指定部分添加iframe元素；
这里，所述iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
这里，所述指定部分可以为子页面中的指定页面元素，每一子页面中的所述指定部分与子页面一一对应。
这里，所述iframe元素可以用于加载完整的子页面，加载完成后，根据所述映射关系将所述子页面中的指定部分内容同步到主页面的容器元素中。
步骤S205，基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；
步骤S206，加载所述主页面，并同步加载所述主页面中的每一所述iframe元素，以在所述主页面上呈现至少一个子页面的指定部分。
在实施过程中，加载主页面可以根据所述映射关系，在所述主页面中对每一个子页面的iframe元素配置指定部分的页面元素和地址，以在加载所述主页面的过程中同步加载所述子页面。
在一些实施例中，所述主页面为微前端的主应用页面，所述子页面为所述微前端的子应用页面，至少两个所述指定部分位于相同的或不同的所述子页面上。
这里，所述微前端(Micro Front-end)主要是把微服务的概念引入到了前端，让前端的多个模块或者应用解耦，做到让前端的子模块独立仓储，独立运行，独立部署。
这里，所述子应用页面和所述主应用页面属于不同的应用。这里，一个子应用页面可以包括至少一个用于整合到主应用页面的指定部分。
在本申请实施例中，一方面，所述主页面为微前端的主应用页面，所述子页面为所述微前端的子应用页面，至少两个所述指定部分位于相同的或不同的所述子页面上。这样，通过将多个子应用页面的至少两个指定部分集成到主页面上，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面。另一方面，通过在所述主页面上为每一所述指定部分添加iframe元素；基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；这样，能够通过添加不可见的iframe元素，并根据所述映射关系指定部分的页面元素和地址配置所述iframe元素，将子应用中指定的部分整合到主页面中。如此，减少了数据传输的数量，提高了网页加载的速度。
本申请实施例提供一种网页页面的同步方法，图3A为本申请实施例网页页面的同步方法的实现流程示意图，如图3A所示，该方法包括：
步骤S310，在主页面上确定至少一个容器元素；
步骤S320，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S330，在每次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
在实施过程中，在每次加载主页面的情况下，可以将所述指定部分的DOM内容全部复制到对应的容器元素中，实现DOM内容的全量加载。
步骤S340，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，步骤S330的替换方式可以通过步骤A1和步骤A2来实现：
步骤A1，在首次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
步骤A2，在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中。
这里，所述增量为子页面元素与主页面元素中不同的DOM内容。
在实施过程中，将DOM内容进行全量加载之后，每次加载所述主页面的情况下，只需要将DOM内容的增量部分更新到对应的容器元素中，即可实现对所述主页面的加载。
举例说明，如图4A，在映射关系中的对应子页面元素有新增记录的情况下，根据映射关系中表单的页面元素和地址，将新增记录更新到表单所在子页面对应的容器元素 中。
在一些实施例中，所述步骤A2中，在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中，包括：
步骤A21，基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；
步骤A22，将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；
步骤A23，将所述DOM内容的增量部分更新到所述主页面的容器元素中。
在一些实施例中，可以不与所述主页面上对应容器元素内的内容进行比较，直接进行全量更新。
在一些实施例中，在所述比较结果为子页面元素被删除的情况下，更新的过程为：在主页面直接删除子页面元素。
在一些实施例中，在所述比较结果为子页面元素属性等内容被修改过的情况下，在所述主页面的容器元素中对所子页面元素进行同步修改。
在一些实施例中，在所述比较结果为新增元素的情况下，将所述新增的元素在所述主页面的容器元素中进行添加。
本申请实施例提供一种网页页面的同步方法，图3B为本申请实施例网页页面的同步方法的实现流程示意图，如图3B所示，该方法包括：
步骤S31，在主页面上确定至少一个容器元素；
步骤S32，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S33，在首次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
步骤S34，在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；
步骤S35，将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；
步骤S36，将所述DOM内容的增量部分更新到所述主页面的容器元素中；
步骤S37，在每一所述指定部分的DOM内容同步的情况下，检查是否有新的style标签或者style标签的内容有更改，得到CSS内容的增量部分；
这里，CSS(Cascading Style Sheets)：层叠样式表，样式定义如何显示或表现HTML元素。所述CSS分为两种：一种为：以style标签和CSS文件的形式，嵌入DOM的<head>标签中的CSS样式；另一种为DOM的页面元素中的CSS样式。
步骤S38，将所述CSS内容的增量部分更新到所述主页面的容器元素中；
步骤S39，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，页面元素中的CSS内容的增量可以通过DOM增量更新的方式进行同步。在另一些实施例中，可以将style标签和CSS文件形式的增量单向同步封装到 主应用页面中。
在一些实施例中，在将所述CSS内容的增量部分更新到所述主页面的容器元素中之前，所述方法还包括：
步骤C，对每一所述指定部分新建唯一的作用域ID；所述步骤S38，将所述CSS内容的增量部分更新到所述主页面的容器元素中，包括：将带有所述作用域ID的增量部分更新到所述主页面的容器元素。
在一些实施例中，不同子应用的子页面中可能会有相同的ID，无法保证作用域ID的唯一性，可能会由于作用域ID的不唯一造成冲突。因此，可以为每个子应用新建一个唯一的作用域ID，由此，可以保证将不同子页面中的目标元素在全量同步以及增量同步到主页面的情况下，有唯一的作用域ID。这样，可以在将CSS样式单向同步封装到主页面的过程中，例如，将样式标签(style标签)和CSS文件单向同步封装到主页面的过程中，保持样式同步的同时，避免不同子应用之间使用相同的ID样式导致的污染。
举例说明，唯一的作用域ID为sub-3，将sub-3当作一个属性插入到容器元素中，插入后容器元素增加作用域ID属性，例如<div sub-3></div>，然后，子页面的所有CSS样式的最外层将包裹上[sub-3]，例如，[sub-3]{子页面的CSS样式}。
在本申请实施例中，对每一所述指定部分新建唯一的作用域ID；将带有所述作用域ID的增量部分更新到所述主页面的容器元素。这样，能够在将CSS样式单向同步封装到主页面的过程中，保持样式同步的同时避免不同子应用之间的使用相同的ID样式导致的样式污染。
本申请实施例提供一种网页页面的同步方法，图3C为本申请实施例网页页面的同步方法的实现流程示意图，如图3C所示，该方法包括：
步骤S301，在主页面上确定至少一个容器元素；
步骤S302，在所述主页面上，监听每一所述容器元素内触发的用户事件操作；
这里，所述用户事件操作可以为鼠标、键盘等用户事件操作。
步骤S303，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S304，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
步骤S305，基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分；
在实施过程中，通过所述映射关系可以确定用户事件操作的目标子页面，将所述用户事件操作传递到对应的目标子页面的指定部分。
步骤S306，监听所述目标子页面的指定部分中DOM内容的变化；
在实施过程中，目标子页面的指定部分同步触发所述用户事件操作，引起所述目标子页面的指定部分中DOM内容的变化。
在一些实施例中，可以运用观察器MutationObserver进行监听。
这里，MutationObserver为Web API接口，提供了监视对DOM树所做更改的能力。这里，所述API(Application Programming Interface)为应用程序接口，是一些预先定义 的函数，或指软件系统不同组成部分衔接的约定。
所述观察器一方面，监听容器元素内子页面元素和所述子页面元素的属性的变化；另一方面检测<head>标签中CSS样式的变化。
步骤S307，将更新后的DOM内容更新到对应的容器元素中；
步骤S308，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，所述步骤S305，基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分，包括：
步骤S3051，基于映射关系，确定所述用户事件操作的目标子页面；
步骤S3052，获得所述用户事件操作的适配器，其中，所述适配器用于将主页面上触发的用户事件操作传递到目标子页面的指定部分，所述适配器中配置的内容至少包括以下之一：所述用户事件操作的类型、所述目标子页面中指定部分的目标元素和所述目标元素的DOM树路径；
这里，所述适配器用于将主页面用户事件操作同步到子页面。使用同一个适配器可以将每一个主页面的事件均适配到子页面。
举例说明，如图4A所示，在主页面的表单界面的input元素中输入一个内容，子不会有对应的输入，通过建立适配器可以解决这一问题。适配器可以在主页面输入内容的同时，将输入内容同步给子页面。
步骤S3053，根据所述适配器中配置的所述目标元素的DOM树路径在所述指定部分中查找所述目标元素；
这里，所述DOM树路径在主页面中可以为目标元素相对于主页面中子页面的容器元素的相对路径。例如，子页面为表单，目标元素为input框，所DOM树路径为input元素相对于表单的容器元素的相对路径。根据表单的容器元素位置和所述相对路径可以确定出子页面中input元素的相对位置。
步骤S3054，根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分。
举例说明，触发的用户事件操作类型：input输入的内容→键盘事件，对应的，在子页面的指定部分的目标元素中触发一个键盘事件，进行内容输入；触发的用户事件操作类型：点击回车→内容变化事件，对应的，在子页面的指定部分的目标元素中对一个的input框中触发一个内容变化事件。
在一些实施例中，所述适配器中配置的内容还包括预设格式的参数，所述方法还包括：将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分。
这里，所述预设格式的参数可以为主页面获得的数据，也可以为能够获取子页面指定部分执行结果的方法。所述约定格式的额外参数可以存储在适配器中，在将主页面的用户事件操作同步给目标子页面的指定部分过程中，通过适配器将所述约定格式的额外参数同步给目标子页面的指定部分。
举例说明，所述约定格式的额外参数可以为一个回调函数。所述回调函数用于在主页面将执行方法给目标子页面的指定部分，目标子页面的指定部分执行对应方法，执行对应方法的过程中需要调用后台，获取数据，主页面不会等待目标子页面的指定部分进行逻辑处理，可以在执行完成后，通过回调函数通知主页面该方法已经执行完成。
举例说明，所述约定格式的额外参数可以为主页面获得的用户信息，例如，用户的 用户名和密码。目标子页面的指定部分接收所述用户名和密码，在指定部分执行用户身份验证方法，将执行结果放到子页面的DOM中，通过DOM的同步过程，将执行结果同步给主页面，完成主页面和目标子页面的指定部分之间的通讯。
在本申请实施例中，一方面，将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分，这样，能够通过预设格式的参数在主页面和目标子页面的指定部分之间的实现通讯；另一方面，根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分，这样，能够使用适配器将主页面用户事件操作同步到目标子页面的指定部分，实现主页面与子应用之间对应内容的同步机制，提供了不同应用的网页页面之间的扩展协同的技术框架。
相关技术中，在网页开发领域，实现微前端有两种方式(1)iframe嵌套方式：通过在主应用页面添加iframe标签，通过src字段指定子应用的地址，直接嵌套展示其他子应用的页面。(2)组合式应用路由分发方式：对每个子应用进行独立的构建和部署，根据主应用的要求提供用于进行加载、启动和卸载等调用功能的接口，在运行的过程中，由主应用来进行路由管理应用加载，启动，卸载，通讯机制。举例说明，在方式(1)中主应用页面加载的情况下，调用子应用提供的加载接口，将子应用提供的内容加载到主应用页面；在方式(2)中主应用页面路由跳转的情况下，需要先调用子应用提供的卸载接口，把子应用卸载掉，然后再进行新的路由。可以看出，相关技术中，实现的效果是把多个前端技术栈实现的前端页面整合到一个页面中运行，形成一个复合单页应用。
由此可见，相关技术中存在以下缺点：对于方式(1)，存在的缺点为子应用需要改造，提供一组不带头部、导航等的功能页面；iframe嵌入的显示区大小不易控制，存在一定局限性；iframe的样式显示、兼容性等具有局限性(比如无法显示全局模态框)。对于方式(2)，存在的缺点为需要改造每个子应用，提供相同的加载、卸载、构建方式；用到的公共库需统一管理，不然会造成冲突。
为解决上述问题，本申请提供一种网页页面的同步方法，以微前端应用场景为例，子页面与主页面属于不同的应用，所述方法通过将多个子应用页面的指定部分集成嵌套到主应用页面的指定位置(包括DOM内容和样式)，实现了将多个可独立开发和运行的应用系统的前端界面整合到同一个URL地址的页面。
图4A为本申请实施例的场景示意图，如图4A所示，以微前端应用场景为例，子页面与主页面属于不同的应用，通过本申请提供的一种网页页面的同步方法可以将子应用页面A中表单部分、子应用页面B中曲线图部分和子应用页面C中树结构图部分集成到主应用页面，并放到主应用页面指定位置。
本申请实施例提供的一种网页页面的同步方法，将要集成的所述子应用页面指定部分分为DOM、CSS和Event三部分，其中，通过所述DOM部分监听子应用页面指定部分的DOM变化，将所述变化内容同步到主应用页面；通过CSS将子应用页面的样式内容单向同步分装到主应用页面；通过Event将主应用页面对应部分的事件响应映射到子应用同步触发。其中，Event表示事件对象，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
以微前端应用场景为例，子页面与主页面属于不同的应用，图4B为本申请实施例 提供的一种网页页面的同步方法的DOM实现流程示意图，如图4B所示，该方法包括：
步骤S401，建立映射关系；
这里，所述映射关系为主应用页面与子应用页面之间的映射关系。
在一些实施例中，在主应用页面添加子应用页面元素与子应用页面地址和要展示到主应用页面的容器元素的映射关系。
映射关系的格式如下：
{主应用页面的容器元素:{
url:子应用页面地址，
ele:子应用页面元素
}}
步骤S402，加载主应用页面；
在一些实施例中，加载主应用页面可以根据所述映射关系，在所述主应用页面中对每一个子应用页面，添加一个内联框架元素(iframe元素)，并配置子应用页面的地址，以根据所述地址加载子应用页面。
步骤S403，加载子应用页面；
步骤S404，首次目标元素全量同步；
这里，所述目标元素为所述映射关系中的子应用页面元素。
在一些实施例中，在主应用页面中对子应用页面进行第一次加载的情况下，根据所述映射关系，将子应用页面元素全量同步到主应用页面的容器元素内。
在一些实施例中，子应用页面加载后，可以运用观察器MutationObserver进行监听。一方面，监听容器元素内子应用页面元素和所述子应用页面元素的属性的变化；另一方面检测<head>标签中CSS样式的变化。
由于在监听到页面元素发生变化的情况下，会调用JavaScript的方法，而观察器MutationObserver监听不到JavaScript引起的输入变化，因此，需要对用户可输入内容的页面元素添加监听，例如，对input元素添加监听。
步骤S405，监听变化，增量同步。
在一些实施例中，所述监听变化可以通过建定时器，定时检查子应用对应的页面元素和页面元素属性的变化。
这里，所述增量为子应用页面元素与当前主应用页面元素中不同的内容。
在一些实施例中，在主页面监听到用户事件操作后，事件管理将用户事件操作映射到子应用页面，子应用页面触发同步的用户事件操作，JavaScript中的执行方法将会被执行，为了仅同步子页面元素，将JavaScript中的执行方法在事件管理过程中执行，需要清除<script>标签。在清除<script>标签，监听到子应用页面发生的变化后，将子应用页面元素与当前主应用页面元素部分进行对比，将不同的内容在主应用页面上同步更新。
在一些实施例中，可以将子应用页面元素与当前主应用页面元素部分进行对比，直接进行全量更新。
在一些实施例中，在所述对比结果为子应用页面元素被删除的情况下，通过更新的过程为：在主应用页面直接删除子应用页面元素。
在一些实施例中，在所述对比结果为子应用页面元素属性等内容被修改过的情况下，在所述主应用页面的容器元素中对所子应用页面元素进行同步修改。
在一些实施例中，在所述对比结果为新增元素的情况下，将所述新增的元素在所述主应用页面的容器元素中进行添加。
举例说明，复选框(CheckBox)、文本输入框(Input)等一些属性在HTML的属性(attribute)中没有，或者，最新的属性值只存在于DOM属性的元素。
以微前端应用场景为例，子页面与主页面属于不同的应用，图4C为本申请实施例提供的一种网页页面的同步方法的CSS实现流程示意图，如图4C所示，该方法包括：
步骤S410，首次将子应用页面42中的目标元素CSS全量同步到主应用页面41；
这里，所述CSS分为两种：一种为：以html标签形式嵌入DOM中；另一种为：在DOM的html标签上面的带有CSS内容。
这里，所述目标元素为每一子页面中被指定同步到主应用页面的元素。
在一些实施例中，不同子应用页面中可能会有相同的ID，无法保证作用域ID的唯一性，可能会由于作用域ID的不唯一造成冲突。因此，可以为每个子应用新建一个唯一的作用域ID，由此，可以保证将不同子应用页面42中的目标元素在全量同步以及增量同步到主应用页面的情况下，有唯一的作用域ID。这样，可以在将CSS样式单向同步封装到主应用页面的过程中，例如，将样式标签(style标签)和CSS文件单向同步封装到主应用页面的过程中，保持样式同步的同时，避免不同子应用之间的使用相同的ID样式导致的污染。
举例说明，唯一的作用域ID为sub-3，将sub-3当作一个属性插入到容器元素中，插入后容器元素增加作用域ID属性，例如<div sub-3></div>，然后，子页面的所有CSS样式的最外层将包裹上[sub-3]，例如，[sub-3]{子页面的CSS样式}。
步骤S420，在DOM同步的同时，将子应用页面42中CSS的增量同步到主应用页面41。
在一些实施例中，在每一次DOM同步的情况下，都会检查是否有新的style标签或者style标签的内容有更改，并同步更新。
以微前端应用场景为例，子页面与主页面属于不同的应用，图4D为本申请实施例提供的一种网页页面的同步方法的事件管理实现流程示意图，如图4D所示，该方法包括：
步骤S41，监听主应用页面的用户事件操作；
这里，所述用户事件操作可以为鼠标、键盘等用户的用户事件操作。
步骤S42，对所述用户事件操作建立适配器；
这里，所述适配器用于将主应用页面用户事件操作同步到子应用页面。使用同一个适配器可以将每一个主应用页面的事件均适配到子应用页面。
举例说明，如图4A所示，在主应用页面的表单界面的input元素中输入一个内容，子应用不会有对应的输入，通过建立适配器可以解决这一问题。适配器可以在主页面输入内容的同时，将输入内容同步给子页面。
这里，所述适配器可以用于记录触发的事件类型、目标元素和目标元素相对于主应用页面的容器元素的位置。这里目标元素相对于主应用页面的容器元素的位置可以为DOM树路径。这里，所述DOM树路径在主页面中可以为目标元素相对于主应用页面中子应用页面的容器元素的相对路径。例如，子应用页面为表单，目标元素为input框，所DOM树路径为input元素相对于表单的容器元素的相对路径。根据表单的容器元素 位置和所述相对路径可以确定出子应用页面中input元素的相对位置。
在一些实施例中，在所述步骤S42，对所述用户事件操作建立适配器之后，所述方法还包括：步骤S43，根据所述适配器，在所述子应用页面中触发所述用户事件操作。
在一些实施例中，所述步骤S43，根据所述适配器，在所述子应用页面中触发所述用户事件操作，包括：
根据主应用页面与子应用页面的映射关系，确定所述主应用页面中触发所述时间操作的子应用页面；根据所述适配器中存储的DOM树路径在所述子应用页面中确定目标元素；对所述目标元素触发所述适配器中存储的事件类型。
举例说明，触发的用户事件操作类型：input输入的内容→键盘事件，对应的，在子页面中触发一个键盘事件，进行内容输入；触发的用户事件操作类型：点击回车→内容变化事件，对应的，在子页面中对一个的input框中触发一个内容变化事件。
在一些实施例中，在子应用页面同步触发事件的情况下，可以带上约定格式的额外参数，传递给子应用，其中，所述约定格式的额外参数可以为主应用页面获得的数据，也可以为能够获取子应用页面执行结果的方法。
这里，所述约定格式的额外参数可以存储在适配器中，在将主应用页面的用户事件操作同步给子应用页面的过程中，通过适配器将所述约定格式的额外参数同步给子应用页面。
举例说明，所述约定格式的额外参数可以为一个回调函数。所述回调函数用于在主页面将执行方法给子页面，子页面执行对应方法，子页面执行对应方法的过程中需要调用后台，获取数据，主页面不会等待子页面进行逻辑处理，子页面可以在执行完成后，通过回调函数通知主页面该方法已经执行完成。
举例说明，所述约定格式的额外参数可以为主应用页面获得的用户信息，例如，用户的用户名和密码。子应用页面接收所述用户名和密码，在子应用页面执行用户身份验证方法，将执行结果放到子应用页面的DOM中，通过DOM的同步过程，将执行结果同步给主应用页面，完成主应用页面和子应用页面之间的通讯。
在一些实施例中，在第一次加载子应用页面的情况下，将主应用页面提供的API注入到子应用页面中。例如，展示全屏弹窗、全局参数的读取方法和参数回传方法等。这样，子应用就可以跨越iframe的局限，操作当前子应用页面元素以外的内容，跟主应用页面进行通讯。
基于前述的实施例，本申请实施例提供一种网页页面的同步装置，该装置包括所包括的各模块、以及各模块所包括的各子模块、以及各子模块所包括的各单元，可以通过计算机设备中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)或现场可编程门阵列(FPGA)等。
图5为本申请实施例网页页面的同步装置的组成结构示意图，如图5所示，所述装置500包括第一确定模块501、获取模块502、第一更新模块503和第一加载模块504，其中：
第一确定模块501，配置为在主页面上确定至少一个容器元素；
获取模块502，配置为获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的 对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
第一更新模块503，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
第一加载模块504，配置为加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，所述装置500还包括添加模块、配置模块和第二加载模块，其中：添加模块，配置为在所述主页面上为每一所述指定部分添加iframe元素；配置模块，配置为基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；第二加载模块，配置为所述加载所述主页面，包括加载所述主页面中的每一所述iframe元素。
在一些实施例中，所述第一更新模块503包括复制子模块和更新子模块，其中：复制子模块，配置为在首次或每次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；更新子模块，配置为在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中。
在一些实施例中，所述更新子模块包括监听单元、比较单元和更新单元，其中：监听单元，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；比较单元，配置为将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；更新单元，配置为将所述DOM内容的增量部分更新到所述主页面的容器元素中。
在一些实施例中，所述装置500还包括检查模块和第二更新模块，其中：检查模块，配置为在每一所述指定部分的DOM内容同步的情况下，检查是否有新的style标签或者style标签的内容有更改，得到CSS内容的增量部分；第二更新模块，配置为将所述CSS内容的增量部分更新到所述主页面的容器元素中。
在一些实施例中，所述装置500还包括第一监听模块、第一传递模块、第二监听模块和第三更新模块，其中：第一监听模块，配置为在所述主页面上，监听每一所述容器元素内触发的用户事件操作；第一传递模块，配置为基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分；第二监听模块，配置为监听所述目标子页面的指定部分中DOM内容的变化；第三更新模块，配置为将更新后的DOM内容更新到对应的容器元素中。
在一些实施例中，所述装置500还包括新建模块，其中：新建模块，配置为对每一所述指定部分新建唯一的作用域ID；所述第二更新模块还配置为将带有所述作用域ID的增量部分更新到所述主页面的容器元素。
在一些实施例中，所述第一传递模块包括确定子模块、获得子模块、查找子模块和触发子模块，其中：确定子模块，配置为基于映射关系，确定所述用户事件操作的目标子页面；获得子模块，配置为获得所述用户事件操作的适配器，其中，所述适配器配置为将主页面上触发的用户事件操作传递到目标子页面的指定部分，所述适配器中配置的内容至少包括以下之一：所述用户事件操作的类型、所述目标子页面中指定部分的目标 元素和所述目标元素的DOM树路径；查找子模块，配置为根据所述适配器中配置的所述目标元素的DOM树路径在所述指定部分中查找所述目标元素；触发子模块，配置为根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分。
在一些实施例中，所述适配器中配置的内容还包括预设格式的参数，所述装置500还包括第二传递模块，其中：第二传递模块，配置为将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分。
以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，本申请实施例中，如果以软件功能模块的形式实现上述的网页页面的同步方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本申请实施例不限制于任何特定的硬件和软件结合。
对应地，本申请实施例提供一种计算机设备，包括存储器和处理器所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法中的步骤。
对应地，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法中的步骤。
这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请存储介质和设备实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，图6为本申请实施例中计算机设备的一种硬件实体示意图，如图6所示，该计算机设备600的硬件实体包括：处理器601、通信接口602和存储器603，其中
处理器601通常控制计算机设备600的总体操作。
通信接口602可以使计算机设备通过网络与其他终端或服务器通信。
存储器603配置为存储由处理器601可执行的指令和应用，还可以缓存待处理器601以及计算机设备600中各模块待处理或已经处理的数据(例如，图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机访问存储器(Random Access Memory，RAM)实现。
应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程 的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号用于描述，不代表实施例的优劣。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例是示意性的，例如，所述单元的划分，为一种逻辑功能划分，实际实现可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。
上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。
或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。
工业实用性
本实施例中，通过主页面上的容器元素确定出子页面中指定部分的页面元素和地址，将多个子应用页面的指定部分集成到主页面的指定位置处，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面，避免了在整合过程中对子应用进行改造，更加便捷智能。

Claims (13)

  1. 一种网页页面的同步方法，所述方法包括：
    在主页面上确定至少一个容器元素；
    获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
    基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
    加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
  2. 根据权利要求1所述的方法，其中，所述主页面为微前端的主应用页面，所述子页面为所述微前端的子应用页面，至少两个所述指定部分位于相同的或不同的所述子页面上。
  3. 根据权利要求1所述的方法，其中，所述方法还包括：
    在所述主页面上为每一所述指定部分添加iframe元素；
    基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；
    所述加载所述主页面，包括加载所述主页面中的每一所述iframe元素。
  4. 根据权利要求1所述的方法，其中，所述基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中，包括：
    在首次或每次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
    在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中。
  5. 根据权利要求4所述的方法，其中，所述基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中，包括：
    基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；
    将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；
    将所述DOM内容的增量部分更新到所述主页面的容器元素中。
  6. 根据权利要求5所述的方法，其中，所述方法还包括：
    在每一所述指定部分的DOM内容同步的时候，检查是否有新的style标签或者style标签的内容有更改，得到CSS内容的增量部分；
    将所述CSS内容的增量部分更新到所述主页面的容器元素中。
  7. 根据权利要求6所述的方法，其中，在将所述CSS内容的增量部分更新到所述主页面的容器元素中之前，所述方法还包括：
    对每一所述指定部分新建唯一的作用域ID；
    所述将所述CSS内容的增量部分更新到所述主页面的容器元素中，包括：将带有所述作用域ID的增量部分更新到所述主页面的容器元素。
  8. 根据权利要求1至7任一项所述的方法，其中，所述方法还包括：
    在所述主页面上，监听每一所述容器元素内触发的用户事件操作；
    基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分；
    监听所述目标子页面的指定部分中DOM内容的变化；
    将更新后的DOM内容更新到对应的容器元素中。
  9. 根据权利要求8所述的方法，其中，所述基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分，包括：
    基于映射关系，确定所述用户事件操作的目标子页面；
    获得所述用户事件操作的适配器，其中，所述适配器用于将主页面上触发的用户事件操作传递到目标子页面的指定部分，所述适配器中配置的内容至少包括以下之一：所述用户事件操作的类型、所述目标子页面中指定部分的目标元素和所述目标元素的DOM树路径；
    根据所述适配器中配置的所述目标元素的DOM树路径在所述指定部分中查找所述目标元素；
    根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分。
  10. 根据权利要求9所述的方法，其中，所述适配器中配置的内容还包括预设格式的参数，所述方法还包括：
    将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分。
  11. 一种网页页面的同步装置，所述装置包括：
    第一确定模块，配置为在主页面上确定至少一个容器元素；
    获取模块，配置为获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
    第一更新模块，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
    第一加载模块，配置为加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
  12. 一种计算机设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至10任一项所述方法中的步骤。
  13. 一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现权利要求1至10任一项所述方法中的步骤。
PCT/CN2021/129637 2020-12-17 2021-11-09 一种网页页面的同步方法及装置、设备、存储介质 WO2022127449A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011497200.4 2020-12-17
CN202011497200.4A CN112612449B (zh) 2020-12-17 2020-12-17 一种网页页面的同步方法及装置、设备、存储介质

Publications (1)

Publication Number Publication Date
WO2022127449A1 true WO2022127449A1 (zh) 2022-06-23

Family

ID=75240911

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/129637 WO2022127449A1 (zh) 2020-12-17 2021-11-09 一种网页页面的同步方法及装置、设备、存储介质

Country Status (2)

Country Link
CN (1) CN112612449B (zh)
WO (1) WO2022127449A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115729592A (zh) * 2022-11-21 2023-03-03 上海秉匠信息科技有限公司 一种页面更新的方法、装置、电子设备及介质

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112612449B (zh) * 2020-12-17 2024-06-18 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质
CN113220273B (zh) * 2021-05-20 2024-06-04 南方电网数字电网研究院有限公司 微前端应用资源处理方法、装置、设备和介质
CN113377375A (zh) * 2021-06-30 2021-09-10 杭州群核信息技术有限公司 页面处理的方法
CN113504927A (zh) * 2021-07-26 2021-10-15 平安普惠企业管理有限公司 用户信息更新的方法、装置、设备及存储介质
CN115033335B (zh) * 2022-08-11 2023-01-10 青岛中正合力软件有限公司 一种应用于网页同屏的显示处理方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777048A (zh) * 2009-01-14 2010-07-14 国际商业机器公司 解决web应用复合中UI样式冲突的方法和装置
US20130073946A1 (en) * 2011-09-21 2013-03-21 Mstar Semiconductor, Inc. Method and apparatus for loading webpage content of webkit browser
CN104573066A (zh) * 2015-01-26 2015-04-29 中国工商银行股份有限公司 页面复用方法及装置
CN108459845A (zh) * 2018-03-14 2018-08-28 北京思特奇信息技术股份有限公司 一种监控标签属性的埋点方法及装置
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质

Family Cites Families (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20070033608A (ko) * 2005-09-22 2007-03-27 (주)유투 컨테이너 레이어를 활용하여 퍼즐처럼 조립하는 홈페이지제작방법
CN105824900A (zh) * 2016-03-14 2016-08-03 传线网络科技（上海）有限公司 一种基于react-native的页面展示系统
CN107450992B (zh) * 2017-07-31 2020-05-12 武汉斗鱼网络科技有限公司 标题栏与弹框栏同步通信的方法、存储介质、设备及系统
CN107577509A (zh) * 2017-08-28 2018-01-12 深圳市金立通信设备有限公司 一种加载应用界面的方法、终端及计算机可读存储介质
US11442991B2 (en) * 2018-09-21 2022-09-13 International Business Machines Corporation Using natural language to control structured web page data
CN110109665A (zh) * 2018-10-18 2019-08-09 神思旭辉医疗信息技术有限责任公司 一种基于容器封装的前端ui系统及方法
CN111090823B (zh) * 2019-12-23 2024-02-09 广州市百果园信息技术有限公司 一种页面应用的集成系统以及应用访问方法、装置和设备
CN111274510A (zh) * 2020-01-15 2020-06-12 平安银行股份有限公司 页面渲染方法、装置、设备及可读存储介质
CN111897532A (zh) * 2020-07-27 2020-11-06 上海宏路数据技术股份有限公司 页面元素监听方法、电子设备和介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777048A (zh) * 2009-01-14 2010-07-14 国际商业机器公司 解决web应用复合中UI样式冲突的方法和装置
US20130073946A1 (en) * 2011-09-21 2013-03-21 Mstar Semiconductor, Inc. Method and apparatus for loading webpage content of webkit browser
CN104573066A (zh) * 2015-01-26 2015-04-29 中国工商银行股份有限公司 页面复用方法及装置
CN108459845A (zh) * 2018-03-14 2018-08-28 北京思特奇信息技术股份有限公司 一种监控标签属性的埋点方法及装置
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115729592A (zh) * 2022-11-21 2023-03-03 上海秉匠信息科技有限公司 一种页面更新的方法、装置、电子设备及介质
CN115729592B (zh) * 2022-11-21 2024-06-04 上海秉匠信息科技有限公司 一种页面更新的方法、装置、电子设备及介质

Also Published As

Publication number Publication date
CN112612449B (zh) 2024-06-18
CN112612449A (zh) 2021-04-06

Similar Documents

Publication Publication Date Title
WO2022127449A1 (zh) 一种网页页面的同步方法及装置、设备、存储介质
JP7546481B2 (ja) 仮想ウェブページのプレビュー中におけるデータベースの編集
US11200044B2 (en) Providing access to a hybrid application offline
KR101323037B1 (ko) 생산성 제품군 애플리케이션 및 호스팅된 사용자인터페이스를 위한 인터페이스들
US20190364107A1 (en) Server-side selective synchronization
US9417933B2 (en) Enabling access to rich data by intercepting paste operations
CN102521230B (zh) 用于有条件的数据显示的结果类型
US9361390B2 (en) Web content management
US8533238B2 (en) Sharing information about a document across a private computer network
AU2020203219B2 (en) Sharing unmanaged content using a content management system
US9785452B2 (en) Framework for dependency management and automatic file load in a network environment
US20080243874A1 (en) Lightweight Schema Definition
US20150222664A1 (en) Conflict resolution in extension induced modifications to web requests and web page content
US7844574B2 (en) Systems, methods and computer program products for automatic network-based persistent XML storage and management
US20120311375A1 (en) Redirecting requests to secondary location during temporary outage
US10198449B2 (en) Creating unique content item identifiers
US11301538B1 (en) Data management in multi-application web pages
JP2011022856A (ja) Ｗｅｂアプリケーションの連携方法、連携装置、および連携プログラム
EP3321796A1 (en) Multi-platform interface framework
US20210081365A1 (en) Applying Rules to Client Updates on Shared Records to Trigger System-Generated Updates
Rochkind Programming Chrome Apps: Develop Cross-Platform Apps for Chrome

Legal Events

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

Ref document number: 21905378

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 021023)

122 Ep: pct application non-entry in european phase

Ref document number: 21905378

Country of ref document: EP

Kind code of ref document: A1