CN-121979423-A - Labeling method, device and storage medium for static webpage

CN121979423ACN 121979423 ACN121979423 ACN 121979423ACN-121979423-A

Abstract

The invention relates to the technical field of computer Web front-end engineering, in particular to a method, a device and a storage medium for labeling a static webpage, wherein a browser window is created through a main process, and the static webpage to be labeled is loaded and displayed on the browser window through a rendering process; the method comprises the steps of monitoring a user action event through a rendering process, sending a labeling element generated by the user action event to a main process through an inter-process communication mechanism, enabling the main process to sequence the labeling element to obtain structural labeling data, storing the structural labeling data to be in a lasting mode to the local, physically isolating the structural labeling data from a source file of a static webpage to be labeled, and when the main process monitors a webpage loading completion event of the rendering process, reading the labeling data from the local and sending the labeling data to the rendering process, so that the rendering process displays the labeling element at a corresponding position of the static webpage according to the received labeling data. The method can be used for marking and displaying the marking under the condition of zero pollution to the static webpage source file.

Inventors

CHEN NAN
XUE JING
LI JIANXIANG
WANG XIAOLIN
YAO ZHIQIANG
ZHANG LEI

Assignees

厦门市美亚柏科信息安全研究所有限公司

Dates

Publication Date: 20260505
Application Date: 20251204

Claims (10)

1. A method for labeling a static web page, the method comprising: Creating a browser window through a main process, and loading and displaying a static webpage to be annotated on the browser window through a rendering process, wherein the static webpage to be annotated comprises an annotating tool; monitoring a user action event through a rendering process, wherein the user action event is the interaction behavior of the marking tool on the original DOM element; Transmitting the marking element generated by the user action event to a main process through an inter-process communication mechanism, so that the main process sequences the marking element to obtain structural marking data, and storing the structural marking data to a local place in a lasting mode, wherein the structural marking data is physically isolated from a source file of the static webpage to be marked; When the host process monitors a webpage loading completion event of the rendering process, the host process reads the annotation data locally and sends the annotation data to the rendering process through an inter-process communication mechanism, so that the rendering process displays the annotation elements at the corresponding positions of the static webpage according to the received annotation data.
2. The method according to claim 1, wherein when the host process monitors the webpage loading completion event of the rendering process, the host process reads the annotation data from the local and sends the annotation data to the rendering process through an inter-process communication mechanism, so that the rendering process displays the annotation element at the corresponding position of the static webpage according to the received annotation data, and the method comprises: when the main process monitors a webpage loading completion event of the rendering process, locally reading the annotation data and sending the annotation data to the rendering process through an inter-process communication mechanism; When the rendering process monitors the annotation data sent by the main process, analyzing the annotation data, determining an original DOM element to be annotated through a CSS selector, obtaining the position and the size of the original DOM element to be annotated, creating the annotation element corresponding to the annotation data, adding the annotation element to a transparent annotation layer covered on a static webpage, calculating the display position of the annotation element according to the position and the size of the original DOM element to be annotated, and displaying the annotation element on the display position.
3. The method according to claim 1, wherein the method further comprises: maintaining a mapping relation comprising the annotation element, the CSS selector and the annotation data ID through a rendering process; When the rendering process monitors the layout change event, acquiring all the marking data of the current webpage, and sequencing all the marking data according to the space position to obtain a to-be-scanned queue, wherein the to-be-scanned queue preferentially scans the marking data in the current viewport; determining an original DOM element corresponding to marked data in the queue to be scanned through a CSS selector; Re-measuring the position information and the size information of the original DOM element under the current viewport; finding out the corresponding labeling element through the labeling data ID; And dynamically calculating the updated position information of the labeling element according to the position information and the size information, and covering the labeling element on the original DOM element according to the updated position information.
4. The method according to claim 3, wherein dynamically calculating updated position information of the labeling element according to the position information and the size information, and overlaying the labeling element on the original DOM element according to the updated position information comprises: The method comprises the steps of enabling a labeling element to completely cover an original DOM element if the labeling element is highlighted on a text, keeping the relative position relation between the labeling element and the original DOM element if the labeling element is comment bubbles on the text, and pointing the labeling element to the original DOM element from an updated starting point if the labeling element is arrow representation on the text.
5. A method according to claim 3, characterized in that the method further comprises: Judging whether the updated position information of the labeling element is in a variation range or not; If not, acquiring the update position information and the labeling data ID of the labeling element, and generating an update queue; Sending the update queue to a main process through an inter-process communication mechanism; and reading the currently stored annotation data file through the main process, and updating the position information and version information of the corresponding annotation data by adopting an incremental updating strategy according to the annotation data ID in the updating queue.
6. A device for labeling a static web page, the device comprising: The static webpage loading display module to be marked is used for creating a browser window through a main process, loading and displaying the static webpage to be marked on the browser window through a rendering process, wherein the static webpage to be marked comprises a marking tool; the user action event monitoring module is used for monitoring user action events through a rendering process, wherein the user action events are interaction behaviors of the marking tool on the original DOM elements; the annotation information persistence module is used for sending the annotation element generated by the user action event to a main process through an inter-process communication mechanism, so that the main process sequences the annotation element to obtain structural annotation data, the structural annotation data is stored locally in a persistence mode, and the structural annotation data is physically isolated from a source file of the static webpage to be annotated; The annotation information display module is used for reading the annotation data from the local and sending the annotation data to the rendering process through an inter-process communication mechanism when the host process monitors a webpage loading completion event of the rendering process, so that the rendering process displays the annotation elements at the corresponding positions of the static webpage according to the received annotation data.
7. The apparatus of claim 6, wherein the labeling information presentation module is specifically configured to: when the main process monitors a webpage loading completion event of the rendering process, locally reading the annotation data and sending the annotation data to the rendering process through an inter-process communication mechanism; When the rendering process monitors the annotation data sent by the main process, analyzing the annotation data, determining an original DOM element to be annotated through a CSS selector, obtaining the position and the size of the original DOM element to be annotated, creating the annotation element corresponding to the annotation data, adding the annotation element to a transparent annotation layer covered on a static webpage, calculating the display position of the annotation element according to the position and the size of the original DOM element to be annotated, and displaying the annotation element on the display position.
8. The apparatus of claim 6, wherein the apparatus further comprises: The mapping module is used for maintaining a mapping relation comprising the marking element, the CSS selector and the marking data ID through a rendering process; The sequencing module is used for acquiring all the marking data of the current webpage when the rendering process monitors the layout change event, sequencing all the marking data according to the space position to obtain a to-be-scanned queue, and preferentially scanning the marking data in the current viewport by the to-be-scanned queue; The original DOM element determining module is used for determining an original DOM element corresponding to the marked data in the queue to be scanned through the CSS selector; the retest module is used for retesting the position information and the size information of the original DOM element under the current viewport; the marking element determining module is used for finding out the corresponding marking element through the marking data ID; And the updating position information determining module is used for dynamically calculating the updating position information of the labeling element according to the position information and the size information, and covering the labeling element on the original DOM element according to the updating position information.
9. The apparatus of claim 8, wherein the apparatus further comprises: the judging module is used for judging whether the updated position information of the labeling element is in a variation range or not; the update queue generating module is used for acquiring the update position information and the labeling data ID of the labeling element if not, and generating an update queue; the update queue sending module is used for sending the update queue to the main process through an inter-process communication mechanism; And the updating module is used for reading the currently stored annotation data file through the main process, and updating the position information and version information of the corresponding annotation data by adopting an incremental updating strategy according to the annotation data ID in the updating queue.
10. A computer readable storage medium, wherein a computer program is stored in the computer readable storage medium, and when the computer program is executed by a processor, the method for labeling a static web page according to any one of claims 1-5 is implemented.

Description

Labeling method, device and storage medium for static webpage Technical Field The invention relates to the technical field of computer Web front-end engineering, in particular to a method and a device for labeling static webpages and a storage medium. Background With the rapid development of Web technology and the popularization of digital content, static Web pages have been widely used in various fields such as education, design, online review, software testing, and electronic data evidence collection. In these application scenarios, users often need to interactively annotate the web content to complete operations such as annotating, highlighting, or question feedback. Currently, the main stream implementation mode of static webpage annotation is inline annotation, and the technology dynamically inserts DOM elements through JavaScript or directly modifies the existing node structure to realize annotation display. The core implementation thought is that when a user performs a labeling operation, a target position is positioned in an HTML structure of a webpage through a JavaScript script, and a new labeling element (such as a < div > tag for highlighting) is inserted or the style attribute of the existing element is directly modified. Although the method is simple to realize, the fundamental defect of the method is that the original HTML document structure can be directly modified, so that the code redundancy and the maintenance are difficult. Especially in a collaborative working environment, DOM modification generated by labeling is easy to collide with business code change in a version control system, and the complexity of merging and maintenance is increased. If both developers a and B work based on the same original HTML file. A adds some labels to the file. B simultaneously modifies some of the business logic of the file. When two persons try to merge codes, the version control system can find that different positions of the same file are modified, and conflict is easily generated. These conflicts are caused by labeling such modifications that are not related to the core functionality, are very cumbersome to resolve and are prone to error. In summary, the existing labeling technical scheme mainly has the following limitations that an original HTML is polluted by an inline labeling, code purity and maintainability are affected, and collaboration compatibility is poor, namely labeling data is coupled with a page structure, and conflicts are easily caused in version control and team collaboration. Therefore, there is a need for a static web page annotation solution that can maintain zero pollution of the original web page. Disclosure of Invention In order to perform static webpage labeling under the condition of keeping zero pollution of an original webpage, in a first aspect, an embodiment of the present application provides a labeling method of a static webpage, where the method includes: Creating a browser window through a main process, and loading and displaying a static webpage to be annotated on the browser window through a rendering process, wherein the static webpage to be annotated comprises an annotating tool; monitoring a user action event through a rendering process, wherein the user action event is the interaction behavior of the marking tool on the original DOM element; Transmitting the marking element generated by the user action event to a main process through an inter-process communication mechanism, so that the main process sequences the marking element to obtain structural marking data, and storing the structural marking data to a local place in a lasting mode, wherein the structural marking data is physically isolated from a source file of the static webpage to be marked; When the host process monitors a webpage loading completion event of the rendering process, the host process reads the annotation data locally and sends the annotation data to the rendering process through an inter-process communication mechanism, so that the rendering process displays the annotation elements at the corresponding positions of the static webpage according to the received annotation data. In one possible implementation manner, when the host process monitors a webpage loading completion event of the rendering process, the host process reads the annotation data locally and sends the annotation data to the rendering process through an inter-process communication mechanism, so that the rendering process displays the annotation element at a corresponding position of the static webpage according to the received annotation data, and the method includes: when the main process monitors a webpage loading completion event of the rendering process, locally reading the annotation data and sending the annotation data to the rendering process through an inter-process communication mechanism; When the rendering process monitors the annotation data sent by the main process, analyzing the annotation data, determining an