CN113986322B - Method, device and storage medium for dynamically modifying page codes - Google Patents
Method, device and storage medium for dynamically modifying page codes Download PDFInfo
- Publication number
- CN113986322B CN113986322B CN202111625348.6A CN202111625348A CN113986322B CN 113986322 B CN113986322 B CN 113986322B CN 202111625348 A CN202111625348 A CN 202111625348A CN 113986322 B CN113986322 B CN 113986322B
- Authority
- CN
- China
- Prior art keywords
- page
- dom
- rendering
- injection
- node
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
- G06F8/656—Updates while running
-
- 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
Abstract
The invention provides a method and a device for dynamically modifying page codes, wherein a page is a network disk page, and when the network disk page is opened through a browser, the life cycle of rendering of a DOM (document object model) of the page is monitored; and performing code injection on the life cycle node after the DOM node tree in the life cycle of the DOM rendering of the page, and loading the source code of the customized function to the current page. The invention does not need to modify the source code of the standard function of the network disk when the standard function of the network disk is customized and developed, the network disk does not cover the customized function when the updating patch is installed, the normal use of the network disk is prevented from being influenced, and the customized function is added to the network disk, so that the non-perception effect can be realized.
Description
Technical Field
The invention belongs to the technical field of network disk development, and particularly relates to a method, a device and a storage medium for dynamically modifying page codes.
Background
When the standard function of the network disk cannot meet the requirement of a customer, the customized function development needs to be carried out for the customer on the basis of the original function of the network disk. Because the web disk provides services in the form of browser pages, the methods adopted by the current customized function development are mainly divided into two types, one type of page developed by js native language needs to add customized function codes in a source file, then the modified source file is covered in a patch package mode, and the other type of page function developed by using a virtual DOM technical frame (such as vue frame) needs to repack and edit the functions after the functions are developed on the basis of the frame source codes and fully cover all front-end files. However, in either of these two schemes, when the patch is installed and updated on the network disk, the customized function may be covered, the use of the customized function may be affected, and even the normal use of the network disk may be affected.
Disclosure of Invention
The invention aims to provide a method, a device and a storage medium for dynamically modifying page codes, which do not modify source codes of a standard function of a network disk and do not influence a customization function when the network disk is updated.
In order to achieve the purpose, the technical scheme of the invention is realized as follows:
a method for dynamically modifying page codes, wherein the page is a network disk page, and the method comprises the following steps:
monitoring the life cycle of rendering of a page DOM when a webpage of a network disk is opened through a browser; and performing code injection on the life cycle node after the DOM node tree in the life cycle of the DOM rendering of the page, and loading the source code of the customized function to the current page.
Further, the method for monitoring the life cycle of the rendering of the page DOM comprises the following steps: and monitoring the change of the DOM rendering of the page by using a browser MutationObserver interface, and observing the state of the DOM node tree by using an observer mode.
Further, the code injection method comprises the following steps: and setting a trigger logic and an injection logic of the source code of the customization function in advance, wherein the trigger logic is used for capturing the completion of the rendering of the DOM node tree, and the injection logic is used for connecting the context of the injection node with the page and loading the source code of the customization function to the current page.
Further, the injection logic specifically includes: and acquiring the context of the injection node through an observer mode of the DOM rendering state, and transmitting DOM node elements in the context into a main method of the customized function to realize the connection of the customized function and the DOM node of the page.
Furthermore, the method also comprises the step of monitoring various events of the incoming DOM node in the main method of the customized function.
Another aspect of the present invention provides an apparatus for dynamically modifying page code, including:
the monitoring module is used for monitoring the life cycle of the rendering of the DOM of the page when the webpage of the network disk is opened through the browser;
and the injection module is used for injecting codes into the life cycle nodes which are rendered in the DOM node tree in the life cycle of the rendering of the DOM of the page, and loading the source codes of the customized functions to the current page.
Further, the listening module includes:
the interface monitoring unit monitors the change of the rendering of the DOM of the page by using a MutationObserver interface of the browser;
and the observation unit is used for observing the state of the DOM node tree by using the observer mode.
Further, the injection module includes:
the setting unit is used for setting the trigger logic and the injection logic of the source code of the customization function in advance;
the trigger logic unit is used for setting the trigger logic to capture the completion of the rendering of the DOM node tree;
and the injection logic unit is set to load the source code of the customized function to the current page by using the connection between the context of the injection node and the page.
Further, the injection logic unit includes: and acquiring the context of the injection node through an observer mode of the DOM rendering state, transmitting DOM node elements in the context into a main method of the customization function, realizing the connection between the customization function and the page DOM node, and monitoring various transmitted events of the DOM node in the main method of the customization function.
The present invention also provides a computer-readable storage medium storing a computer program for executing the above-mentioned method for dynamically modifying a page code.
Compared with the prior art, the invention has the following beneficial effects:
according to the method and the device for dynamically modifying the webpage codes of the network disk, the source codes of the standard functions of the network disk do not need to be modified when the standard functions of the network disk are customized and developed, the network disk does not cover the customized functions when the update patches are installed on the network disk, the normal use of the network disk is prevented from being influenced, and the customized functions are added to the network disk, so that the non-perception effect can be realized.
Drawings
FIG. 1 is a schematic diagram of a page DOM node tree rendering process;
FIG. 2 is a schematic flow chart of a first embodiment of the present invention;
FIG. 3 is a schematic flow chart of a second embodiment of the present invention;
FIG. 4 is a schematic flow chart of a third embodiment of the present invention;
fig. 5 is a schematic structural diagram of a fourth embodiment of the present invention.
Detailed Description
It should be noted that the embodiments and features of the embodiments may be combined with each other without conflict.
The present invention will be described in detail below with reference to the embodiments with reference to the attached drawings.
The first embodiment is as follows:
in the first embodiment, the present invention provides a method for dynamically modifying a page code, mainly for a new customized function of a browser page of a web disk, where the method is provided based on a web disk page DOM rendering process, and the page DOM rendering process is as shown in fig. 1, and is specifically explained as follows:
HTML Parser: HTML analysis;
DOM Tree: the browser analyzes the HTML into a tree-shaped data structure;
CSS Parser: analyzing the style;
style Rules, the browser parses the CSS into a tree-shaped data structure, namely CSSOM;
attachment, namely constructing a Render Tree by using DOM Tree and Style Rules;
rendering Tree, wherein the visible nodes and style information contained in the webpage can be known through the rendering Tree;
calculating according to the generated rendering tree to obtain the geometric information of the nodes;
painting, namely obtaining absolute pixels of nodes through Painting according to geometric information obtained by the rendering tree and the layout;
display, the pixels are sent to the GPU and displayed on the page.
The process of rendering the page DOM, also referred to as the lifecycle of rendering the page DOM, is described above.
Therefore, the method for dynamically modifying page codes proposed by the present invention, as shown in fig. 2, includes:
s1, monitoring the life cycle of rendering of a DOM (document object model) of the page when the webpage of the network disk is opened through the browser;
s2, injecting codes in the life cycle nodes of the DOM node tree rendering in the life cycle of the DOM rendering of the page, and loading the source codes of the customized functions to the current page.
In the life cycle of the rendering of the DOM of the page shown in FIG. 1, the life cycle node of the DOM node Tree after rendering is a Render Tree, and the method mainly comprises the step of injecting codes of a new customized function into the life cycle node of the Render Tree. The source codes of the standard functions of the web disk pages do not need to be modified, and when the pages are loaded each time, the source codes of the customized functions are loaded when the Render Tree is constructed in the process of page DOM rendering, so that the customized functions cannot be covered when the update patches are installed, and the normal use of the web disk is prevented from being influenced.
Example two:
embodiment two provides specific method steps for step S1 in embodiment one, namely, listening to the lifecycle of the rendering of the page DOM, as shown in fig. 3, including:
s101, monitoring the change of page DOM rendering by using a browser' S mutationObserver interface;
the parameter of the browser behavior observer interface is a callback function, which is executed after the change is sent by the designated DOM node and is introduced into two parameters, one is a change record array and the other is the observer object itself, so that the monitoring operation and the corresponding processing are executed asynchronously after the execution of other scripts is completed, and after all changes are triggered, the changes are recorded in the array and the callback is performed uniformly.
S102, observing the state of the DOM node tree by using an observer mode.
The watcher model is also called publish-subscribe model. This is a one-to-many object dependency relationship, and when the state of a depended object changes, all objects that depend on it will be notified. In this step S102, a publish-subscribe mode is adopted for the state change of the DOM node tree, and it is not necessary to pay much attention to other states of the DOM node tree during the asynchronous operation, and it is only necessary to subscribe the state change of the DOM node tree after the rendering.
It should be noted that, since the technology of monitoring page rendering is more advanced, it is not very compatible with the old browser that is not mainstream, and a progressive enhancement principle needs to be adopted for processing.
By the method of the second embodiment, the imperceptible effect can be achieved by adding the customized function to the network disk.
Example three:
the third embodiment provides specific method steps for step S2, i.e. code injection in the first embodiment, as shown in fig. 4, including:
s201, setting triggering logic and injection logic of source codes of the customization function in advance;
the trigger logic is trigger function logic for triggering the injection of the source code of the customized function, the injection logic is a specific mode for the injection of the source code of the customized function, and the logic needs to be preset in the page code in advance.
S202, the trigger logic is used for finishing rendering of the DOM node tree;
the trigger logic is a specific method for monitoring the life cycle of the page DOM rendering in the second embodiment, and triggers the injection of the customized function source code after finishing the rendering of the DOM node tree.
S203, the injection logic acquires the context of the injection node through an observer mode of a DOM rendering state, and transmits DOM node elements in the context into a main method of the customization function, so that the connection between the customization function and the page DOM node is realized;
the context of the injection node is obtained through the observer mode, that is, the DOM element in the context of the injection node is obtained, and there are many implementation methods, for example, a jQuery function may be used, and the second parameter of the jQuery function may specify the search range of the DOM element. And the acquired DOM elements in the context are transmitted to a main method of the customization function and are connected with the page through the DOM elements in the context.
S204, monitoring various events of the incoming DOM nodes is realized in the main method of the customized function.
By monitoring, the business logic in the customized function can be triggered on the network disk page.
By the method of the third embodiment, the non-perception injection of the newly developed customized function of the web disk page can be realized, and the influence on the normal use of the web disk is avoided.
Example four:
an embodiment of the present invention provides a device for dynamically modifying a page code, as shown in fig. 5, specifically including:
the monitoring module is used for monitoring the life cycle of the rendering of the DOM of the page when the webpage of the network disk is opened through the browser;
and the injection module is used for injecting codes into the life cycle nodes which are rendered in the DOM node tree in the life cycle of the rendering of the DOM of the page, and loading the source codes of the customized functions to the current page.
The monitoring module comprises:
the interface monitoring unit monitors the change of the rendering of the DOM of the page by using a MutationObserver interface of the browser;
and the observation unit is used for observing the state of the DOM node tree by using the observer mode.
The injection module includes:
the setting unit is used for setting the trigger logic and the injection logic of the source code of the customization function in advance;
the trigger logic unit is used for setting the trigger logic to capture the completion of the rendering of the DOM node tree;
and the injection logic unit is set to load the source code of the customized function to the current page by using the connection between the context of the injection node and the page.
Wherein the injection logic unit comprises: and acquiring the context of the injection node through an observer mode of the DOM rendering state, transmitting DOM node elements in the context into a main method of the customization function, realizing the connection between the customization function and the page DOM node, and monitoring various transmitted events of the DOM node in the main method of the customization function.
The device for dynamically modifying page codes, which is provided by the fourth embodiment of the present invention, can execute the methods provided by the first to third embodiments of the present invention, and has the corresponding functional modules and beneficial effects of the execution methods.
Example five:
fifth embodiment of the present invention further provides a storage medium containing computer-executable instructions, which when executed by a computer processor, are configured to perform a method for dynamically modifying page code as described in any of the first to third embodiments.
Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The above-described embodiments are merely exemplary embodiments of the present invention, which should not be construed as limiting the invention, and any modifications, equivalents, improvements, etc. made within the spirit of the present invention should be included in the scope of the present invention.
Claims (8)
1. A method for dynamically modifying page codes, wherein the page is a network disk page, the method comprising:
monitoring the life cycle of rendering of a page DOM when a webpage of a network disk is opened through a browser; code injection is carried out on the life cycle node which is rendered in the DOM node tree in the life cycle of the rendering of the DOM of the page, and the source code of the customized function is loaded to the current page;
the code injection method comprises the following steps: and setting a trigger logic and an injection logic of the source code of the customization function in advance, wherein the trigger logic is used for capturing the completion of the rendering of the DOM node tree, and the injection logic is used for connecting the context of the injection node with the page and loading the source code of the customization function to the current page.
2. A method for dynamically modifying page code according to claim 1, characterized in that said method for listening to the lifecycle of the rendering of the page DOM comprises: and monitoring the change of the DOM rendering of the page by using a browser MutationObserver interface, and observing the state of the DOM node tree by using an observer mode.
3. The method of claim 1, wherein the injection logic specifically comprises: and acquiring the context of the injection node through an observer mode of the DOM rendering state, and transmitting DOM node elements in the context into a main method of the customized function to realize the connection of the customized function and the DOM node of the page.
4. A method for dynamically modifying page code as recited in claim 3, further comprising implementing snooping of incoming DOM node events within the custom function master method.
5. An apparatus for dynamically modifying page code, comprising:
the monitoring module is used for monitoring the life cycle of the rendering of the DOM of the page when the webpage of the network disk is opened through the browser;
the injection module is used for injecting codes into the life cycle nodes which are rendered in the DOM node tree in the life cycle of the rendering of the DOM of the page, and loading the source codes of the customized functions to the current page;
the injection module includes:
the setting unit is used for setting the trigger logic and the injection logic of the source code of the customization function in advance;
the trigger logic unit is used for setting the trigger logic to capture the completion of the rendering of the DOM node tree;
and the injection logic unit is set to load the source code of the customized function to the current page by using the connection between the context of the injection node and the page.
6. The apparatus for dynamically modifying page code according to claim 5, wherein said listening module comprises:
the interface monitoring unit monitors the change of the rendering of the DOM of the page by using a MutationObserver interface of the browser;
and the observation unit is used for observing the state of the DOM node tree by using the observer mode.
7. The apparatus for dynamically modifying page code as recited in claim 5, wherein said injection logic unit comprises: and acquiring the context of the injection node through an observer mode of the DOM rendering state, transmitting DOM node elements in the context into a main method of the customization function, realizing the connection between the customization function and the page DOM node, and monitoring various transmitted events of the DOM node in the main method of the customization function.
8. A computer-readable storage medium, in which a computer program is stored, the computer program being adapted to perform the method of dynamically modifying page code according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111625348.6A CN113986322B (en) | 2021-12-29 | 2021-12-29 | Method, device and storage medium for dynamically modifying page codes |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111625348.6A CN113986322B (en) | 2021-12-29 | 2021-12-29 | Method, device and storage medium for dynamically modifying page codes |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113986322A CN113986322A (en) | 2022-01-28 |
| CN113986322B true CN113986322B (en) | 2022-03-11 |
Family
ID=79734723
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111625348.6A Active CN113986322B (en) | 2021-12-29 | 2021-12-29 | Method, device and storage medium for dynamically modifying page codes |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113986322B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111026638A (en) * | 2019-10-29 | 2020-04-17 | 贝壳技术有限公司 | Webpage automatic testing method and device, electronic equipment and storage medium |
| CN112637361A (en) * | 2020-12-29 | 2021-04-09 | 北京天融信网络安全技术有限公司 | Page proxy method, device, electronic equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10466989B2 (en) * | 2011-09-02 | 2019-11-05 | Microsoft Technology Licensing, Llc. | Fast presentation of markup content having script code |
-
2021
- 2021-12-29 CN CN202111625348.6A patent/CN113986322B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111026638A (en) * | 2019-10-29 | 2020-04-17 | 贝壳技术有限公司 | Webpage automatic testing method and device, electronic equipment and storage medium |
| CN112637361A (en) * | 2020-12-29 | 2021-04-09 | 北京天融信网络安全技术有限公司 | Page proxy method, device, electronic equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| layui-tree如何实现懒加载以及动态局部渲染树节点;astroQi;《https://mbd.baidu.com/ma/s/w4Xg4E33》;20200703;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113986322A (en) | 2022-01-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| CN109634598B (en) | Page display method, device, equipment and storage medium | |
| US8875098B2 (en) | Workflow engine for execution of web mashups | |
| CN109634490B (en) | List display method, device, equipment and storage medium | |
| CN106354483B (en) | Data processing method and device and electronic equipment | |
| CN114077430A (en) | Interface generation method and device, electronic equipment and storage medium | |
| CN111078217A (en) | Brain graph generation method, apparatus and computer-readable storage medium | |
| CN114048415A (en) | Form generation method and device, electronic equipment and computer readable storage medium | |
| CN114217789A (en) | Function component expansion method, device, equipment, storage medium and program product | |
| CN110188308B (en) | Client automatic dotting reporting method, storage medium, equipment and system | |
| CN115809056B (en) | Component multiplexing implementation method and device, terminal equipment and readable storage medium | |
| CN110045952B (en) | Code calling method and device | |
| CN113986322B (en) | Method, device and storage medium for dynamically modifying page codes | |
| CN109408057B (en) | Method, device, medium and computing equipment for automatically generating codes | |
| CN116360735A (en) | Form generation method, device, equipment and medium | |
| CN114911541A (en) | Configuration information processing method and device, electronic equipment and storage medium | |
| CN115268861A (en) | Introduction method, system, equipment and storage medium of custom component | |
| CN111124386B (en) | Animation event processing method, device, equipment and storage medium based on Unity | |
| CN112417827A (en) | Method and device for editing and displaying online document, electronic equipment and storage medium | |
| CN109725932B (en) | Method and device for generating description document of application component | |
| CN112306324B (en) | Information processing method, apparatus, device and medium | |
| CN117215543B (en) | Component development method suitable for different service scene types and corresponding system thereof | |
| CN111241538B (en) | Method, device, medium and electronic equipment for protecting node object variable | |
| CN114691131A (en) | Frame code file generation method and device for user interface UI file | |
| CN116204226A (en) | Application development system, method, device and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |