CN112612449A

CN112612449A - Method, device, equipment and storage medium for synchronizing webpage

Info

Publication number: CN112612449A
Application number: CN202011497200.4A
Authority: CN
Inventors: 张勇; 林佳宇; 朱红燕; 莫林林
Original assignee: WeBank Co Ltd
Current assignee: WeBank Co Ltd
Priority date: 2020-12-17
Filing date: 2020-12-17
Publication date: 2021-04-06
Also published as: WO2022127449A1

Abstract

The embodiment of the application discloses a method, a device, equipment and a storage medium for synchronizing webpage pages, wherein the method comprises the following steps: determining at least one container element on the main page; acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion; updating DOM content of the specified part into a corresponding container element based on the page element and the address of each specified part in the mapping relation; loading the main page to present a specified portion of at least one sub-page on the main page.

Description

Method, device, equipment and storage medium for synchronizing webpage

Technical Field

The embodiment of the application relates to but is not limited to an information technology of financial technology (Fintech), and particularly relates to a method and a device for synchronizing web pages, equipment and a storage medium.

Background

With the development of computer technology, more and more technologies are applied in the financial field, and the traditional financial industry is gradually changing to financial technology (Fintech), however, the financial technology also puts higher demands on the technology due to the requirements of security and real-time performance of the financial industry. However, in the field of financial technology, in a synchronous scene of a web page, a loading interface provided by a sub-application needs to be called when a main page is loaded, and content provided by the sub-application is loaded to the main page.

Disclosure of Invention

In view of the above, embodiments of the present application provide a method and an apparatus for synchronizing web pages, a device, and a storage medium to solve the above problems in the related art.

The technical scheme of the embodiment of the application is realized as follows:

in one aspect, an embodiment of the present application provides a method for synchronizing web pages, where the method includes:

determining at least one container element on the main page;

acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

updating DOM content of the specified part into a corresponding container element based on the page element and the address of each specified part in the mapping relation;

loading the main page to present a specified portion of at least one sub-page on the main page.

In another aspect, an embodiment of the present application provides an apparatus for synchronizing web pages, where the apparatus includes:

a first determining module for determining at least one container element on a main page;

the acquisition module is used for acquiring a mapping relation set based on DOM management of the main page, and the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

the first updating module is used for updating the DOM content of the specified part into the corresponding container element based on the page element and the address of each specified part in the mapping relation;

a first loading module for loading the main page to present a specified portion of at least one sub-page on the main page.

In another aspect, an embodiment of the present application provides a computer device, including a memory and a processor, where the memory stores a computer program executable on the processor, and the processor implements the steps in the method when executing the program.

In a further aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the steps in the method.

The webpage synchronization method provided by the embodiment of the application comprises the steps of determining at least one container element on a main page, and obtaining a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion; updating DOM content of the specified part into a corresponding container element based on the page element and the address of each specified part in the mapping relation; loading the main page to present a specified portion of at least one sub-page on the main page. Therefore, the page elements and the addresses of the designated parts in the sub-pages can be determined through the container elements on the main page, the designated parts of the sub-application pages are integrated at the designated positions of the main page, the front-end pages of the sub-application systems which can be independently developed and operated can be integrated into the same main page, the sub-applications are prevented from being transformed in the integration process, and the method is more convenient and intelligent.

Drawings

FIG. 1 is a schematic diagram illustrating an implementation flow of a synchronization method for web pages according to an embodiment of the present application;

FIG. 2 is a schematic diagram illustrating an implementation flow of a synchronization method for web pages according to an embodiment of the present application;

FIG. 3A is a schematic diagram illustrating an implementation flow of a synchronization method for web pages according to an embodiment of the present application;

FIG. 3B is a schematic diagram illustrating an implementation process of a synchronization method for web pages according to an embodiment of the present application;

FIG. 3C is a schematic diagram illustrating an implementation process of the method for synchronizing web pages according to the embodiment of the present application;

FIG. 4A is a schematic view of a scenario according to an embodiment of the present application;

fig. 4B is a schematic diagram of a DOM implementation flow of a method for synchronizing web pages according to an embodiment of the present application;

fig. 4C is a schematic view illustrating a CSS implementation flow of a synchronization method for a web page according to an embodiment of the present application;

fig. 4D is a schematic view of an event management implementation flow of a synchronization method for web pages according to an embodiment of the present application;

FIG. 5 is a schematic diagram illustrating a structure of a synchronization apparatus for web pages according to an embodiment of the present disclosure;

fig. 6 is a hardware entity diagram of a computer device according to an embodiment of the present application.

Detailed Description

In order to make the purpose, technical solutions and advantages of the present application clearer, the technical solutions of the present application are further described in detail with reference to the drawings and the embodiments, the described embodiments should not be considered as limiting the present application, and all other embodiments obtained by a person of ordinary skill in the art without creative efforts belong to the protection scope of the present application.

In the following description, reference is made to "some embodiments" which describe a subset of all possible embodiments, but it is understood that "some embodiments" may be the same subset or different subsets of all possible embodiments, and may be combined with each other without conflict.

Where similar language of "first/second" appears in the specification, the following description is added, and where reference is made to the term "first \ second \ third" merely to distinguish between similar items and not to imply a particular ordering with respect to the items, it is to be understood that "first \ second \ third" may be interchanged with a particular sequence or order as permitted, to enable the embodiments of the application described herein to be performed in an order other than that illustrated or described herein.

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the application.

The technical solution of the present application is further elaborated below with reference to the drawings and the embodiments.

An embodiment of the present application provides a method for synchronizing web pages, and fig. 1 is a schematic diagram illustrating an implementation flow of the method for synchronizing web pages in the embodiment of the present application, where as shown in fig. 1, the method includes:

step S101, determining at least one container element on a main page;

in some embodiments, the method can be applied to the scene of the micro front end, and can also be applied to other scenes with pages. In a micro-front-end scenario, 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. In the implementation process, the main application page can completely nest the page of the sub application, and can also nest part of the content in the page of the sub application.

Here, the container element represents a region inside which other elements are placed. For example, a div element, or, a span element. In implementation, page elements of other sub-pages besides the main page may be added in the container element.

In some embodiments, each of the container elements may correspond to an area on the main page. For example, as shown in FIG. 4A, the form portion, graph portion and tree structure portion of the main page each correspond to a region on the page, each region having a container element. The form part in the main page corresponds to container element 1; the graph portion corresponds to container element 2; the tree structure diagram portion corresponds to container element 3.

Step S102, acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

for example, the mapping relationship between the container element of the main page and the page element and address of the sub page may be:

container element of main page

url the address of the sub-application page,

ele sub-application page elements

}。

Here, the dom (document Object model) is a document Object model, and is a programming interface for HTML and XML documents. The HTML DOM defines standard methods of accessing and manipulating HTML documents. The DOM expresses HTML documents in a tree structure.

Here, the specified portion is content in the sub page that needs to be displayed in the main page. For example, as shown in fig. 4A, a form part in the sub application page a, a graph part in the sub application page B, and a tree structure diagram part in the sub application page C need to be integrated into the main page, and then, for the sub application page a, the specified part is the form part; for sub-application page B, the specified portion is a graph portion; for sub-application page C, the specified portion is a tree structure diagram portion.

In implementation, the mapping relationship may determine a corresponding relationship between each container element and an attribute of a specified portion in the sub-page, where the attribute of the specified portion includes a page element and an address of the specified portion. For example, as shown in fig. 4A, the page element and the address of the form part in the sub application page a corresponding to the container element 1 may be determined through a mapping relationship; the page element and the address of the graph part in the sub application page B corresponding to the container element 2 can be determined through the mapping relation; the page element and the 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 relation.

Step S103, updating DOM contents of the specified parts to corresponding container elements based on the page elements and the addresses of the specified parts in the mapping relation;

for example, as shown in fig. 4A, the page elements and addresses of the form part, the graph part and the tree structure diagram part in the main page can be determined through the mapping relationship, and the DOM contents of the form part, the graph part and the tree structure diagram part are updated into the container elements of the main page according to the page elements and addresses.

Step S104, loading the main page to present the appointed part of at least one sub page on the main page.

In an implementation process, when the main page is loaded, loading the specified part of each sub-page in the main page according to the page element and the address configured in the container element of the main page, so as to present the specified part of at least one sub-page on the main page.

For example, as shown in fig. 4A, the DOM contents of the form part, graph part, and tree structure diagram part are updated into the container element of the main page according to the shown page elements and addresses, and the form part in the sub application page a, the graph part in the sub application page B, and the tree structure diagram part in the sub application page C are integrated into the main application page.

In the embodiment of the application, at least one container element is determined on a main page, and a mapping relation set based on DOM management of the main page is obtained, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion; updating DOM content of the specified part into a corresponding container element based on the page element and the address of each specified part in the mapping relation; loading the main page to present a specified portion of at least one sub-page on the main page. Therefore, the page elements and the addresses of the designated parts in the sub-pages can be determined through the container elements on the main page, the designated parts of the sub-application pages are integrated at the designated positions of the main page, the front-end pages of the sub-application systems which can be independently developed and operated can be integrated into the same main page, and the sub-applications are prevented from being transformed in the integration process.

An embodiment of the present application provides a method for synchronizing web pages, and fig. 2 is a schematic diagram illustrating an implementation flow of the method for synchronizing web pages in the embodiment of the present application, where as shown in fig. 2, the method includes:

step S201, determining at least one container element on a main page;

step S202, acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

step S203, updating DOM content of the specified part to a corresponding container element based on the page element and the address of each specified part in the mapping relation;

step S204, adding an iframe element for each specified part on the main page;

here, the iframe is an HTML tag, which functions as a document in a document, or a floating FRAME (FRAME). The iframe element creates an inline frame (i.e., inline frame) that contains another document.

Here, the designated part may be a designated page element in a sub-page, and the designated part in each sub-page corresponds to a sub-page one to one.

Here, the iframe element may 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 into the container element of the main page according to the mapping relationship.

Step S205, configuring the iframe element based on the page element and the address of each specified part in the mapping relation;

step S206, loading the main page, and synchronously loading each iframe element in the main page so as to present the appointed part of at least one sub-page on the main page.

In an implementation process, loading the main page may configure a page element and an address of a specified portion for an iframe element of each sub-page in the main page according to the mapping relationship, so as to load the sub-pages synchronously in a process of loading the main page.

In some embodiments, the main page is a main application page of a micro front end, the sub-pages are sub-application pages of the micro front end, and at least two of the designated parts are located on the same or different sub-pages.

Here, the Micro Front-end (Micro Front-end) mainly introduces a Micro service concept into the Front-end, so that a plurality of modules or applications of the Front-end are decoupled, and sub-modules of the Front-end are independently stored, independently operated and independently deployed.

Here, the sub application page and the main application page belong to different applications. Here, one sub application page may include at least one designated portion for integration into the main application page.

In an embodiment of the application, on the one hand, the main page is a main application page at a micro front end, the sub-pages are sub-application pages at the micro front end, and at least two of the designated portions are located on the same or different sub-pages. In this way, by integrating at least two designated parts of a plurality of sub application pages onto a main page, front end pages of a plurality of sub application systems which can be independently developed and run can be integrated into the same main page. On the other hand, by adding an iframe element to each of the specified portions on the main page; configuring the iframe element based on the page element and the address of each specified part in the mapping relation; in this way, the invisible iframe element can be added, the iframe element is configured according to the page element and the address of the part specified by the mapping relation, and the part specified in the sub-application is integrated into the main page. Therefore, the number of data transmission is reduced, and the webpage loading speed is increased.

An embodiment of the present application provides a method for synchronizing a web page, and fig. 3A is a schematic diagram illustrating an implementation flow of the method for synchronizing a web page according to the 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, acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

step S330, under the condition that the main page is loaded each time, copying all DOM contents of the specified part into corresponding container elements based on the page elements and the addresses of each specified part in the mapping relation;

in the implementation process, each time the main page is loaded, all the DOM contents of the specified part can be copied into the corresponding container elements, so that the full loading of the DOM contents is realized.

Step S340, loading the main page to present the specified part of at least one sub page on the main page.

In some embodiments, an alternative to step S330 may be implemented by step a1 and step a 2:

step A1, under the condition of loading the main page for the first time, copying all DOM contents of the specified part into corresponding container elements based on the page element and the address of each specified part in the mapping relation;

step a2, in the case that the main page is loaded except for the first time, based on the page element and the address of each designated portion in the mapping relationship, updating the incremental portion of the DOM content of the designated portion into the corresponding container element.

Here, the increment is different DOM content in the sub-page element and the main page element.

In the implementation process, after the DOM content is loaded in a full amount, the loading of the main page can be realized only by updating the incremental part of the DOM content to the corresponding container element each time the main page is loaded.

For example, as shown in fig. 4A, when there is a new added record in the corresponding sub-page element in the mapping relationship, the new added record is updated to the container element corresponding to the sub-page where the form is located according to the page element and the address of the form in the mapping relationship.

In some embodiments, in the step a2, in a case where the main page is loaded except for the first time, updating the incremental portion of the DOM content of the specified portion into the corresponding container element based on the page element and the address of each of the specified portions in the mapping relationship includes:

step A21, based on the page element and address of each said designated part in said mapping relation, monitoring the change of the page element and attribute of each said designated part;

step A22, comparing the change of DOM content of each appointed part 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 portion of the DOM content into a container element of the main page.

In some embodiments, the full update may be performed directly without comparison to the content within the corresponding container element on the master page.

In some embodiments, in the case that the comparison result is that the sub-page element is deleted, the updating process is: and directly deleting the sub-page element in the main page.

In some embodiments, in the case that the content such as the attribute of the sub-page element is modified as a result of the comparison, the sub-page element is synchronously modified in the container element of the main page.

In some embodiments, in the case that the comparison result is a new element, adding the new element in a container element of the main page.

An embodiment of the present application provides a method for synchronizing a web page, and fig. 3B is a schematic diagram illustrating an implementation flow of the method for synchronizing a web page according to the embodiment of the present application, and as shown in fig. 3B, the method includes:

step S31, determining at least one container element on the main page;

step S32, acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

step S33, under the condition of loading the main page for the first time, copying all DOM contents of the specified part to corresponding container elements based on the page element and the address of each specified part in the mapping relation;

step S34, in the case of loading the main page except the first time, monitoring changes of page elements and attributes of each of the specified parts based on the page elements and addresses of each of the specified parts in the mapping relationship;

step S35, comparing the change of DOM content of each appointed part 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, when the DOM content of each appointed part is synchronous, checking whether a new style label exists or the content of the style label is changed, and obtaining the increment part of the CSS content;

here, css (capturing Style sheets): cascading style sheets, styles define how to display or render HTML elements. The CSS is divided into two categories: one is as follows: embedding CSS style in < head > tag of DOM in form of style tag and CSS file; the other is CSS style in the page elements of the DOM.

Step S38, updating the increment part of the CSS content to the container element of the main page;

step S39, loading the main page to present a specified portion of at least one sub-page on the main page.

In some embodiments, the increments of CSS content in a page element may be synchronized by way of DOM incremental updates. In other embodiments, the style tag and the delta in the form of a CSS file may be encapsulated into the master application page in a one-way sync.

In some embodiments, prior to updating the incremental portion of the CSS content into the container element of the main page, the method further comprises:

step C, establishing a unique scope ID for each appointed part; the step S38, updating the incremental part of the CSS content into the container element of the main page, includes: updating the delta portion with the scope ID to a container element of the main page.

In some embodiments, the sub-pages of different sub-applications may have the same ID, so that the uniqueness of the scope ID cannot be guaranteed, and a conflict may be caused by the non-uniqueness of the scope ID. Therefore, a unique scope ID can be newly established for each sub-application, and therefore, the target elements in different sub-pages can be guaranteed to have unique scope IDs when the target elements are fully synchronized and incrementally synchronized to the main page. In this way, in the process of unidirectionally and synchronously encapsulating the CSS style in the main page, for example, in the process of unidirectionally and synchronously encapsulating the style tag (style tag) and the CSS file in the main page, the style synchronization can be maintained, and meanwhile, pollution caused by the same ID style used between different sub-applications can be avoided.

For example, the unique scope ID is sub-3, sub-3 is inserted into the container element as an attribute, the container element adds the scope ID attribute after insertion, e.g., < div sub-3> </div >, and then the outermost layer of all CSS styles of a subpage will be wrapped with [ sub-3], e.g., [ sub-3] { CSS styles of subpages }.

In the embodiment of the application, a unique scope ID is newly established for each specified part; updating the delta portion with the scope ID to a container element of the main page. In this way, style pollution caused by the use of the same ID style among different sub-applications can be avoided while style synchronization is maintained in the process of unidirectional synchronous encapsulation of CSS styles to a main page.

An embodiment of the present application provides a method for synchronizing a web page, and fig. 3C is a schematic diagram illustrating an implementation flow of the method for synchronizing a web page according to the embodiment of the present application, and as shown in fig. 3C, the method includes:

step S301, determining at least one container element on a main page;

step S302, monitoring user event operation triggered in each container element on the main page;

here, the user event operation may be a user event operation such as a mouse, a keyboard, or the like.

Step S303, acquiring a mapping relation set based on DOM management of the main page, wherein the mapping relation is used for representing the corresponding relation between each container element of the main page and the attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

step S304, updating DOM contents of the specified parts to corresponding container elements based on the page elements and the addresses of each specified part in the mapping relation;

step S305, based on the mapping relation, transmitting the user event operation to the designated part of the corresponding target sub-page;

in the implementation process, the target sub-page of the user event operation can be determined through the mapping relation, and the user event operation is transmitted to the designated part of the corresponding target sub-page.

Step S306, monitoring the change of DOM content in the appointed part of the target sub-page;

in the implementation process, the specified part of the target sub-page synchronously triggers the user event operation to cause the change of DOM content in the specified part of the target sub-page.

In some embodiments, a watcher MutationObserver may be employed for listening.

Here, the mutationObserver provides the Web API interface with the ability to monitor changes made to the DOM tree. Here, the api (application Programming interface) is an application program interface, and is some predefined functions or conventions for linking different components of the software system.

On one hand, the observer monitors the change of the sub-page elements in the container elements and the attribute of the sub-page elements; on the other hand, a change in CSS style in the < head > tag is detected.

Step S307, updating the updated DOM content to the corresponding container element;

step S308, loading the main page to present the appointed part of at least one sub page on the main page.

In some embodiments, the step S305, based on the mapping relationship, passing the user event operation to the designated portion of the corresponding target sub-page includes:

step S3051, determining a target sub-page of the user event operation based on a mapping relation;

step S3052, obtaining an adapter of the user event operation, where the adapter is configured to transfer 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 at least includes one of: the type of the user event operation, a target element of a specified part in the target sub-page and a DOM tree path of the target element;

here, the adapter is used to synchronize the main page user event operations to the sub-pages. The events of each main page can be adapted to the sub-pages using the same adapter.

For example, as shown in fig. 4A, when a content is input in an input element of a form interface of a main page, there is no corresponding input, and this problem can be solved by establishing an adapter. The adapter may synchronize the input content to the sub-page while the main page is inputting the content.

S3053, searching the target element in the specified part according to the DOM tree path of the target element configured in the adapter;

here, the DOM tree path may be a relative path of the target element in the main page with respect to the container elements of the sub-pages in the main page. For example, the child page is a form, the target element is an input box, and the DOM tree path is the relative path of the input element with respect to the container element of the form. And determining the relative position of the input element in the sub page according to the position of the container element of the form and the relative path.

Step S3054, according to the type of the user event operation configured in the adapter, triggering the user event operation on the target element, so as to transfer the user event operation to the specified part of the corresponding target sub-page.

For example, the type of user event operation triggered: input content → keyboard event, correspondingly, triggering a keyboard event in the target element of the designated part of the sub-page for content input; type of user event operation triggered: click enter → content change event, correspondingly, triggering a content change event in the input box to one of the target elements of the specified portion of the sub-page.

In some embodiments, the content configured in the adapter further includes parameters in a preset format, and the method further includes: and transmitting the parameters in the preset format configured in the adapter to the specified part of the target sub-page.

Here, the parameter of the preset format may be data obtained by the main page, or may be a method capable of obtaining an execution result of the specified portion of the sub page. The additional parameters of the agreed format may be stored in the adaptor, and during the synchronization of the user event operation of the main page to the designated part of the target sub-page, the additional parameters of the agreed format are synchronized by the adaptor to the designated part of the target sub-page.

For example, the additional parameter of the default format may be a callback function. The callback function is used for sending an execution method to the designated part of the target sub-page in the main page, the designated part of the target sub-page executes the corresponding method, a background needs to be called in the process of executing the corresponding method to acquire data, the main page does not wait for the designated part of the target sub-page to perform logic processing, and the main page can be informed that the method is executed completely through the callback function after the execution is completed.

For example, additional parameters of the agreed-upon format may be user information obtained for the home page, such as a user name and password for the user. And the appointed part of the target sub-page receives the user name and the password, executes the user identity authentication method on the appointed part, puts the execution result into the DOM of the sub-page, synchronizes the execution result to the main page through the synchronization process of the DOM, and completes the communication between the main page and the appointed part of the target sub-page.

In the embodiment of the application, on one hand, the parameters in the preset format configured in the adapter are transmitted to the specified part of the target sub-page, so that the communication between the main page and the specified part of the target sub-page can be realized through the parameters in the preset format; on the other hand, according to the type of the user event operation configured in the adapter, the user event operation is triggered on the target element, so that the user event operation is transmitted to the specified part of the corresponding target sub-page, and thus, the main page user event operation can be synchronized to the specified part of the target sub-page by using the adapter, a synchronization mechanism of corresponding contents between the main page and the sub-application is realized, and a technical framework of extension cooperation between web pages of different applications is provided.

In the related art, in the field of webpage development, two modes (1) of iframe nesting are provided for realizing a micro front end: by adding an iframe tag to a main application page, the address of the sub-application is specified through an src field, and pages of other sub-applications are directly nested and displayed. (2) The combined application route distribution mode comprises the following steps: each sub-application is independently constructed and deployed, an interface for carrying out loading, starting, unloading and other calling functions is provided according to the requirements of the main application, and the main application carries out the loading, starting, unloading and communication mechanisms of the routing management application during running. For example, in the mode (1), when the main application page is loaded, a loading interface provided by the sub application is called, and the content provided by the sub application is loaded to the main application page; when the main application page route jumps in the mode (2), the uninstalling interface provided by the sub-application needs to be called first to uninstall the sub-application, and then a new route is performed. It can be seen that, in the related art, the effect of implementation is to integrate the front-end pages implemented by multiple front-end technology stacks into one page to run, so as to form a composite single-page application.

It can be seen that the following disadvantages exist in the related art: with respect to the mode (1), there is a disadvantage that the sub-application needs to be modified, providing a set of function pages without headers, navigation, etc.; the size of a display area embedded in the iframe is not easy to control, and certain limitation exists; style display, compatibility, etc. of iframes have limitations (e.g., the inability to display global modal boxes). As for the mode (2), there is a disadvantage that each sub-application needs to be modified, providing the same loading, unloading, and building modes; the used public libraries need to be managed uniformly, otherwise, conflict can be caused.

In order to solve the above problems, the present application provides a method for synchronizing web pages, taking a micro front-end application scenario as an example, where sub-pages and a main page belong to different applications, and the method integrates specified portions of multiple sub-application pages into specified positions (including DOM content and style) of the main application page, thereby implementing integration of front-end interfaces of multiple application systems that can be independently developed and run into a page with the same URL address.

Fig. 4A is a schematic view of a scenario according to an embodiment of the present application, and as shown in fig. 4A, taking a micro front-end application scenario as an example, a sub-page and a main page belong to different applications, and a table part in the sub-application page a, a graph part in the sub-application page B, and a tree structure diagram part in the sub-application page C may be integrated into the main application page and placed at a designated position of the main application page by using the synchronization method for a web page provided in the present application.

According to the webpage synchronization method, the designated part of the sub application page to be integrated is divided into a DOM part, a CSS part and an Event part, wherein DOM change of the designated part of the sub application page is monitored through the DOM part, and the changed content is synchronized to a main application page; the style content of the sub application page is unidirectionally and synchronously sub-packaged to the main application page through the CSS; and mapping the Event response of the corresponding part of the main application page to the synchronous trigger of the sub-application through Event. Wherein Event represents an Event object representing the state of an Event, such as an element in which the Event occurs, the state of a keyboard key, the position of a mouse, and the state of a mouse button.

Taking a micro front-end application scenario as an example, a sub-page and a main page belong to different applications, and fig. 4B is a schematic diagram of a DOM implementation flow of a method for synchronizing web pages provided by an embodiment of the present application, as shown in fig. 4B, the method includes:

step S401, establishing a mapping relation;

here, the mapping relationship is a mapping relationship between the main application page and the sub application page.

In some embodiments, a mapping relationship of the sub-application page elements with the sub-application page addresses and the container elements to be exposed to the master application page is added to the master application page.

The format of the mapping relationship is as follows:

{ Container element of Main application Page

url the address of the sub-application page,

ele sub-application page elements

}}

Step S402, loading a main application page;

in some embodiments, 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 an address of the sub application page, so as to load the sub application page according to the address.

Step S403, loading a sub application page;

step S404, carrying out primary target element full-scale synchronization;

here, the target element is a child application page element in the mapping relationship.

In some embodiments, when the sub application page is loaded for the first time in the main application page, the sub application page elements are fully synchronized into the container elements of the main application page according to the mapping relationship.

In some embodiments, after the sub application page is loaded, the viewer MutationObserver may be used to monitor. On one hand, monitoring the change of the attributes of the sub application page elements and the sub application page elements in the container elements; on the other hand, a change in CSS style in the < head > tag is detected.

Since the JavaScript method is called when the change of the page element is monitored, and the observer multimedia observer cannot monitor the input change caused by the JavaScript, it is necessary to add monitoring to the page element to which the user can input the content, for example, add monitoring to the input element.

Step S405, monitoring change and incremental synchronization.

In some embodiments, the listening change may be periodically checked by establishing a timer for changes in the page elements and page element attributes corresponding to the sub-application.

Here, the increment is the different content in the child application page element than in the current master application page element.

In some embodiments, after the main page monitors the user event operation, the event management maps the user event operation to the sub application page, the sub application page triggers the synchronized user event operation, the execution method in the JavaScript is executed, and in order to synchronize only the sub page elements, the execution method in the JavaScript is executed in the event management process, and the < script > tag needs to be cleared. And after the < script > tag is removed and the change of the sub application page is monitored, comparing the element part of the sub application page with the element part of the current main application page, and synchronously updating different contents on the main application page.

In some embodiments, the sub-application page element may be compared to the current main application page element portion, and the full update may be performed directly.

In some embodiments, in the case that the comparison result is that the sub application page element is deleted, the updating process is: the child application page elements are deleted directly at the primary application page.

In some embodiments, in the case that the comparison result is that the content such as the attribute of the sub application page element is modified, the sub application page element is synchronously modified in the container element of the main application page.

In some embodiments, in the case that the comparison result is an added element, the added element is added in a container element of the master application page.

For example, some attributes such as check box (CheckBox), text Input box (Input) and the like are not present in the attribute (attribute) of HTML, or the latest attribute value exists only in the element of the DOM attribute.

Taking a micro front-end application scenario as an example, the sub-page and the main page belong to different applications, fig. 4C is a schematic diagram of a CSS implementation flow of a synchronization method for a web page provided in the embodiment of the present application, as shown in fig. 4C, the method includes:

step S410, synchronizing the target element CSS in the sub application page 42 to the main application page 41 for the first time;

here, the CSS is classified into two types: one is as follows: embedding the HTML tag into the DOM; the other is as follows: with CSS content on top of html tags of the DOM.

Here, the target element is the element in each sub-page designated to be synchronized to the master application page.

In some embodiments, different sub-application pages may have the same ID, so that the uniqueness of the scope ID cannot be guaranteed, and the conflict may be caused by 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 unique scope IDs when fully synchronized and incrementally synchronized to the main application page. In this way, in the process of unidirectionally and synchronously encapsulating the CSS style in the page of the main application, for example, in the process of unidirectionally and synchronously encapsulating the style tag (style tag) and the CSS file in the page of the main application, pollution caused by the use of the same ID style between different sub-applications can be avoided while the style synchronization is maintained.

In 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.

In some embodiments, each time the DOM is synchronized, it is checked whether there is a new style tag or whether the content of the style tag has been altered, and the update is synchronized.

Taking a micro front-end application scenario as an example, the sub-page and the main page belong to different applications, and fig. 4D is a schematic diagram of an event management implementation flow of the synchronization method for web pages provided by the embodiment of the present application, as shown in fig. 4D, the method includes:

step S41, monitoring user event operation of the main application page;

here, the user event operation may be a user event operation of a user such as a mouse or a keyboard.

Step S42, establishing an adapter for the user event operation;

here, the adapter is used to synchronize host application page user event operations to child application pages. The events of each main application page can be adapted to the sub-application pages using the same adapter.

For example, as shown in fig. 4A, when a content is input in an input element of a form interface of a host application page, a sub application does not have a corresponding input, and this problem can be solved by establishing an adapter. The adapter may synchronize the input content to the sub-page while the main page is inputting the content.

Here, the adapter may be used to record the type of event triggered, the target element, and the position of the target element relative to the container element of the host application page. Here the position of the target element relative to the container element of the primary application page may be a DOM tree path. Here, the DOM tree path may be a relative path of the target element in the main page with respect to the container element of the sub-application page in the main application page. For example, the sub-application page is a form, the target element is an input box, and the DOM tree path is the relative path of the input element with respect to the container element of the form. And determining the relative position of the input element in the sub application page according to the position of the container element of the form and the relative path.

In some embodiments, after establishing an adapter for the user event operation at the step S42, the method further comprises: and step S43, triggering the user event operation in the sub application page according to the adapter.

In some embodiments, the step S43, triggering the user event operation in the sub application page according to the adapter, includes:

determining a sub application page triggering the time operation in a main application page according to the mapping relation between the main application page and the sub application pages; determining a target element in the sub application page according to the DOM tree path stored in the adapter; triggering the event type stored in the adapter for the target element.

For example, the type of user event operation triggered: input content → keyboard event, correspondingly, triggering a keyboard event in the sub-page to input content; type of user event operation triggered: click enter → content change event, correspondingly, trigger a content change event in the input box for one in the subpage.

In some embodiments, when the sub-application page synchronization trigger event occurs, an additional parameter in an agreed format may be carried and transmitted to the sub-application, where the additional parameter in the agreed format may be data obtained by the main application page or a method capable of obtaining an execution result of the sub-application page.

Here, the additional parameter of the agreed-upon format may be stored in the adapter, and the additional parameter of the agreed-upon format may be synchronized to the sub application page through the adapter in the process of synchronizing the user event operation of the main application page to the sub application page.

For example, the additional parameter of the default format may be a callback function. The callback function is used for sending the execution method to the sub-page in the main page, the sub-page executes the corresponding method, a background needs to be called to acquire data in the process that the sub-page executes the corresponding method, the main page does not wait for the logic processing of the sub-page, and the sub-page can inform the main page that the execution of the method is completed through the callback function after the execution is completed.

For example, additional parameters of the agreed-upon format may be user information obtained from the host application page, such as a user name and password for the user. And the sub application page receives the user name and the password, executes a user identity authentication method on the sub application page, puts an execution result into a DOM (document object model) of the sub application page, synchronizes the execution result to the main application page through a synchronization process of the DOM, and completes communication between the main application page and the sub application page.

In some embodiments, the API provided by the main application page is injected into the sub-application page when the sub-application page is loaded for the first time. For example, a full screen popup, a global parameter reading method, a parameter returning method, and the like are presented. Therefore, the sub-application can cross the limitation of the iframe, operate the content except the current sub-application page element and communicate with the main application page.

Based on the foregoing embodiments, an embodiment of the present application provides a device for synchronizing a web page, where the device includes modules, sub-modules included in the modules, and units included in the sub-modules, and may be implemented by a processor in a computer device; of course, the implementation can also be realized through a specific logic circuit; in implementation, the processor may be a Central Processing Unit (CPU), a Microprocessor (MPU), a Digital Signal Processor (DSP), a Field Programmable Gate Array (FPGA), or the like.

Fig. 5 is a schematic structural diagram of a synchronization apparatus for web pages in an embodiment of the present application, and as shown in fig. 5, the apparatus 500 includes a first determining module 501, an obtaining module 502, a first updating module 503, and a first loading module 504, where:

a first determining module 501, configured to determine at least one container element on a main page;

an obtaining module 502, configured to obtain a mapping relationship set based on DOM management of the main page, where the mapping relationship is used to represent a correspondence between each container element of the main page and an attribute of a specified part in a sub page; the attributes of the specified portion include page elements and addresses of the specified portion;

a first updating module 503, configured to update, based on the page element and the address of each specified portion in the mapping relationship, the DOM content of the specified portion into a corresponding container element;

a first loading module 504 for loading the main page to present a specified portion of at least one sub-page on the main page.

In some embodiments, the apparatus 500 further comprises an add module, a configuration module, and a second load module, wherein: an adding module, configured to add an iframe element to each of the designated parts on the main page; a configuration module, configured to configure the iframe element based on the page element and the address of each of the specified portions in the mapping relationship; and the second loading module is used for loading the main page and comprises loading each iframe element in the main page.

In some embodiments, the first update module 503 includes a copy submodule and an update submodule, wherein: the copying submodule is used for copying all DOM contents of the specified part into corresponding container elements on the basis of the page elements and the addresses of each specified part in the mapping relation under the condition of loading the main page for the first time or each time; and the updating submodule is used for updating the incremental part of the DOM content of the specified part into the corresponding container element on the basis of the page element and the address of each specified part in the mapping relation under the condition that the main page is loaded except for the first time.

In some embodiments, the update submodule comprises a listening unit, a comparing unit and an updating unit, wherein: the monitoring unit is used for monitoring the change of the page elements and the attributes of each appointed part based on the page elements and the addresses of each appointed part in the mapping relation; the comparison unit is used for comparing the change of the DOM content of each appointed part with the content in the corresponding container element on the main page to obtain the incremental part of the DOM content; and the updating unit is used for updating the incremental part of the DOM content into the container element of the main page.

In some embodiments, the apparatus 500 further comprises a checking module and a second updating module, wherein: the checking module is used for checking whether a new style label exists or the content of the style label is changed when the DOM content of each appointed part is synchronous, so as to obtain an incremental part of the CSS content; a second update module to update the incremental portion of the CSS content into a container element of the master page.

In some embodiments, the apparatus 500 further comprises a first listening module, a first transferring module, a second listening module, and a third updating module, wherein: the first monitoring module is used for monitoring user event operation triggered in each container element on the main page; the first transmission module is used for transmitting the user event operation to the designated part of the corresponding target sub-page based on the mapping relation; the second monitoring module is used for monitoring the change of DOM content in the appointed part of the target sub-page; and the third updating module is used for updating the updated DOM content into the corresponding container element.

In some embodiments, the apparatus 500 further comprises a newly created module, wherein: the newly-built module is used for newly building a unique scope ID for each appointed part; the second update module is further to update the delta portion with the scope ID to a container element of the master page.

In some embodiments, the first delivery module comprises a determination sub-module, an obtaining sub-module, a lookup sub-module, and a trigger sub-module, wherein: the determining submodule is used for determining a target sub-page of the user event operation based on the mapping relation; an obtaining submodule, configured to obtain an adapter of the user event operation, where the adapter is configured to transfer a user event operation triggered on a main page to a specified portion of a target sub-page, and content configured in the adapter includes at least one of: the type of the user event operation, a target element of a specified part in the target sub-page and a DOM tree path of the target element; the searching submodule is used for searching the target element in the specified part according to the DOM tree path of the target element configured in the adapter; and the triggering sub-module is used for triggering 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.

In some embodiments, the content configured in the adapter further includes parameters in a preset format, and the apparatus 500 further includes a second delivery module, wherein: and the second transmission module is used for transmitting the parameters in the preset format configured in the adapter to the specified part of the target sub-page.

The above description of the apparatus embodiments, similar to the above description of the method embodiments, has similar beneficial effects as the method embodiments. For technical details not disclosed in the embodiments of the apparatus of the present application, reference is made to the description of the embodiments of the method of the present application for understanding.

It should be noted that, in the embodiment of the present application, if the synchronization method for web pages is implemented in the form of a software functional module and is sold or used as an independent product, the synchronization method may also be stored in a computer-readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the related art may be embodied in the form of a software product stored in a storage medium, and including instructions for causing a computer device (which may be a personal computer, a server, etc.) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read Only Memory (ROM), a magnetic disk, or an optical disk. Thus, embodiments of the present application are not limited to any specific combination of hardware and software.

Correspondingly, the embodiment of the present application provides a computer device, which includes 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 executing the program.

Correspondingly, the embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored, and the computer program realizes the steps of the above method when being executed by a processor.

Here, it should be noted that: the above description of the storage medium and device embodiments is similar to the description of the method embodiments above, with similar advantageous effects as the method embodiments. For technical details not disclosed in the embodiments of the storage medium and apparatus of the present application, reference is made to the description of the embodiments of the method of the present application for understanding.

It should be noted that fig. 6 is a schematic hardware entity diagram of a computer device in an embodiment of the present application, and as shown in fig. 6, 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 may enable the computer device to communicate with other terminals or servers via a network.

The Memory 603 is configured to store instructions and applications executable by the processor 601, and may also buffer data (e.g., image data, audio data, voice communication data, and video communication data) to be processed or already processed by the processor 601 and modules in the computer apparatus 600, and may be implemented by a FLASH Memory (FLASH) or a Random Access Memory (RAM).

It should be appreciated that reference throughout this specification to "one embodiment" or "an embodiment" means that a particular feature, structure or characteristic described in connection with the embodiment is included in at least one embodiment of the present application. Thus, the appearances of the phrases "in one embodiment" or "in an embodiment" in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. It should be understood that, in the various embodiments of the present application, the sequence numbers of the above-mentioned processes do not mean the execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present application. The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described device embodiments are merely illustrative, for example, the division of the unit is only a logical functional division, and there may be other division ways in actual implementation, such as: multiple units or components may be combined, or may be integrated into another system, or some features may be omitted, or not implemented. In addition, the coupling, direct coupling or communication connection between the components shown or discussed may be through some interfaces, and the indirect coupling or communication connection between the devices or units may be electrical, mechanical or other forms.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units; can be located in one place or distributed on a plurality of network units; some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be separately regarded as one unit, or two or more units may be integrated into one unit; the integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional unit.

Those of ordinary skill in the art will understand that: all or part of the steps for realizing the method embodiments can be completed by hardware related to program instructions, the program can be stored in a computer readable storage medium, and the program executes the steps comprising the method embodiments when executed; and the aforementioned storage medium includes: various media that can store program codes, such as a removable Memory device, a Read Only Memory (ROM), a magnetic disk, or an optical disk.

Alternatively, the integrated units described above in the present application may be stored in a computer-readable storage medium if they are implemented in the form of software functional modules and sold or used as independent products. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the related art may be embodied in the form of a software product stored in a storage medium, and including instructions for causing a computer device (which may be a personal computer, a server, etc.) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a removable storage device, a ROM, a magnetic or optical disk, or other various media that can store program code.

The above description is only for the embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily conceive of changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A method for synchronizing web pages, the method comprising:

determining at least one container element on the main page;

2. The method of claim 1, wherein the main page is a micro-front main application page, the sub-pages are sub-application pages of the micro-front, and at least two of the designated portions are located on the same or different sub-pages.

3. The method of claim 1, further comprising:

adding an iframe element to each of the specified portions on the main page;

configuring the iframe element based on the page element and the address of each specified part in the mapping relation;

and the loading the main page comprises loading each iframe element in the main page.

4. The method according to claim 1, wherein the updating DOM content of the specified portion into a corresponding container element based on the page element and the address of each of the specified portions in the mapping relationship comprises:

under the condition of loading the main page for the first time or each time, copying all DOM contents of the specified part into corresponding container elements based on the page elements and the addresses of each specified part in the mapping relation;

and under the condition that the main page is loaded except for the first time, updating the incremental part of the DOM content of the specified part into the corresponding container element based on the page element and the address of each specified part in the mapping relation.

5. The method of claim 4, wherein updating the incremental portions of DOM content of the specified portions into corresponding container elements based on the page elements and addresses of each of the specified portions in the mapping relationship comprises:

monitoring the change of the page elements and the attributes of each appointed part based on the page elements and the addresses of each appointed part in the mapping relation;

comparing the change of the DOM content of each appointed part with the content in the corresponding container element on the main page to obtain an incremental part of the DOM content;

updating the incremental portion of the DOM content into a container element of the main page.

6. The method of claim 5, further comprising:

when the DOM content of each appointed part is synchronous, checking whether a new style label exists or the content of the style label is changed to obtain an incremental part of the CSS content;

updating the incremental portion of the CSS content into a container element of the main page.

7. The method of claim 6, wherein prior to updating the delta portion of the CSS content into the container element of the main page, the method further comprises:

establishing a unique scope ID for each appointed part;

the updating the incremental portion of the CSS content into the container element of the main page includes: updating the delta portion with the scope ID to a container element of the main page.

8. The method according to any one of claims 1 to 7, further comprising:

monitoring user event operation triggered in each container element on the main page;

based on the mapping relation, transmitting the user event operation to a designated part of a corresponding target sub-page;

monitoring the change of DOM content in the appointed part of the target sub-page;

and updating the updated DOM content into the corresponding container element.

9. The method according to claim 8, wherein the passing the user event operation to a designated portion of a corresponding target sub-page based on the mapping relationship comprises:

determining a target sub-page of the user event operation based on the mapping relation;

the adapter is used for transmitting the user event operation triggered on the main page to the designated part of the target sub-page, and the configured content in the adapter at least comprises one of the following: the type of the user event operation, a target element of a specified part in the target sub-page and a DOM tree path of the target element;

searching the target element in the specified part according to the DOM tree path of the target element configured in the adapter;

and triggering the user event operation on the target element according to the type of the user event operation configured in the adapter so as to transfer the user event operation to the specified part of the corresponding target sub-page.

10. The method of claim 9, wherein the configured content in the adapter further comprises parameters in a preset format, the method further comprising:

and transmitting the parameters in the preset format configured in the adapter to the specified part of the target sub-page.

11. An apparatus for synchronizing web pages, the apparatus comprising:

12. A computer device comprising a memory and a processor, the memory storing a computer program operable on the processor, wherein the processor implements the steps of the method of any one of claims 1 to 10 when executing the program.

13. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 10.