Html page labeling method and device, and storage medium

Abstract

The application provides an HTML page marking method and device and a storage medium, the method comprising: obtaining position information of a mouse click on the HTML page through an HTML standard event; inserting a script into the HTML page, generating an interactive window based on the script and according to the position information; obtaining marking information through the interactive window, saving the position information and the marking information into a database, wherein the position information corresponds to the marking information; obtaining the position information and the marking information from the database, and displaying the marking information in the HTML page according to the position information. The HTML page marking method provided by the application simplifies the cumbersome operation of adding marking information to the HTML page, which needs to take a screenshot and transmit a file through a third-party tool, and can greatly improve the information marking efficiency.

Description

Technical Field

[0001] This invention relates to HTML technology in the field of Internet development, and in particular to an HTML page annotation method, apparatus and storage medium. Background Technology

[0002] HTML stands for Hyper Text Markup Language. Hypertext documents written in HTML are called HTML documents, and they are independent of various operating system platforms (e.g., UNIX, Windows, etc.). Using HTML, information is written according to certain rules into HTML files, which are then recognized by a dedicated browser and "translated" into recognizable information—the web pages we see today. HTML plays a crucial role and holds a significant position in the rapid development of the Web.

[0003] In existing technologies, if a user needs to add extra annotations to a part of an HTML page, including text, graphics, tables, animations, links, etc., but wants the HTML page itself to remain unchanged, the usual approach is to take a screenshot of the HTML page, save it to software like Word or WPS, add text descriptions to the desired annotation locations, and then send the annotated document with the added text and images to the target user via a file transfer tool. This method is inefficient, requires multiple third-party tools, and can only record static HTML pages. Summary of the Invention

[0004] This invention provides an HTML page annotation method, apparatus, and storage medium, which simplifies the cumbersome operation of taking screenshots and transferring files through third-party tools to add annotation information to HTML pages, and can greatly improve the efficiency of information annotation.

[0005] Specifically, the present invention is achieved through the following technical solutions:

[0006] In a first aspect, the present invention provides an HTML page annotation method, the method comprising:

[0007] The mouse position information when the HTML page is clicked is obtained through standard HTML events.

[0008] Insert the script into the HTML page, and generate an interactive window based on the script and the location information;

[0009] The location information and the annotation information are obtained through the interactive window and saved to the database, wherein the location information corresponds to the annotation information.

[0010] Furthermore, the method also includes:

[0011] The location information and the annotation information are obtained from the database, and the annotation information is displayed on the HTML page based on the location information.

[0012] Furthermore, based on the location information, displaying the annotation information in the HTML page includes:

[0013] The offset relative to the root node of the HTML page DOM is determined based on the location information.

[0014] The rendering and display position of the annotation information is determined based on the offset.

[0015] Set the positioning method of the annotation information to absolute positioning, and adjust the order weight of the annotation information in the document flow z-axis stacking display to the highest.

[0016] Furthermore, the script is stored on the server and loaded into the body node of the HTML page when it is used.

[0017] Furthermore, the script is inserted into the HTML page through the Document interface of the HTML page.

[0018] Furthermore, obtaining the location information and the annotation information from the database includes: obtaining the location information and the annotation information from the database through an annotation server interface, wherein the annotation server interface is used to transmit data with the database.

[0019] Furthermore, the annotation information includes at least one of text, graphics, tables, animations, and links.

[0020] Secondly, the present invention provides an HTML page annotation device, the device comprising:

[0021] The location information acquisition module acquires the location information when the mouse clicks the HTML page through HTML standard events;

[0022] An interactive window generation module inserts a script into the HTML page and generates an interactive window based on the script and the location information.

[0023] The annotation information acquisition module obtains annotation information through the interactive window;

[0024] The information storage module saves the location information and the annotation information to the database.

[0025] The annotation information display module retrieves the location information and the annotation information from the database, and displays the annotation information in the HTML page based on the location information.

[0026] Thirdly, the present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the HTML page annotation method as described in any one of the first aspects.

[0027] Fourthly, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the HTML page annotation method as described in any one of the first aspects.

[0028] This invention obtains the position information of an HTML page when the mouse clicks on it using standard HTML events; inserts a script into the HTML page, generates an interactive window based on the script and the position information; obtains annotation information through the interactive window, and saves the position information and the annotation information to a database, wherein the position information corresponds to the annotation information; retrieves the position information and the annotation information from the database, and displays the annotation information on the HTML page based on the position information. This simplifies the cumbersome operation of adding annotation information to an HTML page, which requires taking screenshots and transferring files through third-party tools, greatly improving the efficiency of information annotation and overcoming the problems existing in the prior art. Attached Figure Description

[0029] To more clearly illustrate the technical solutions in this invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0030] Figure 1 This is a flowchart of an HTML page annotation method according to an embodiment of the present invention;

[0031] Figure 2 This is a flowchart of an HTML page annotation method according to another embodiment of the present invention;

[0032] Figure 3 This is a flowchart of an HTML page annotation apparatus according to yet another embodiment of the present invention;

[0033] Figure 4 This is a schematic diagram of the structure of an electronic device according to another embodiment of the present invention. Detailed Implementation

[0034] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0035] Figure 1 This is a flowchart of an HTML page annotation method according to an embodiment of the present invention. (Refer to...) Figure 1 The method may include the following steps:

[0036] Step 101: Obtain the position information when the mouse clicks the HTML page using standard HTML events;

[0037] Step 102: Insert the script into the HTML page, and generate an interactive window based on the script and the location information;

[0038] Step 103: Obtain the annotation information through the interactive window, and save the location information and the annotation information into the database, wherein the location information corresponds to the annotation information.

[0039] Specifically, the process of this HTML page annotation method may include:

[0040] When accessing the host page (i.e., the HTML page) that needs to be labeled, first obtain the global variables of the host page window, and then obtain the position information when the mouse clicks on the HTML page through the HTML standard events. That is, capture the user's mouse click behavior in real time through the mouse event in the HTML standard events, obtain the horizontal coordinate position screen X and the vertical coordinate position screen Y of the mouse event relative to the user's screen when the mouse event occurs, and record the position information.

[0041] Furthermore, a script is inserted into the HTML page, and an interactive window is generated based on the script and the location information. This script is a pre-configured code snippet stored on the server and ready to be loaded at any time. It generates an interactive pop-up window, allowing users to fill in annotation information according to their page location. The interactive window corresponds to the recorded location information. When needed, the script is loaded after the body node of the HTML page via the Document interface. Additionally, the annotation information added by the user through the interactive window can include at least one of the following: text, graphics, tables, animations, and links.

[0042] Furthermore, the annotation information is obtained through the interactive window, and the location information and annotation information are saved to the database through the annotation server interface used for data transmission with the database, wherein the location information corresponds to the annotation information.

[0043] Figure 2 This is a flowchart of an HTML page annotation method according to another embodiment of the present invention; see reference. Figure 2 The method may also include:

[0044] Step 204: Obtain the location information and the annotation information from the database, and display the annotation information on the HTML page according to the location information.

[0045] After completing the information annotation using the HTML page annotation method described above, when the HTML page is reopened, the location information and corresponding annotation information can be retrieved from the database, and the corresponding annotation information can be displayed on the HTML page based on the location information. Specifically, after obtaining the annotation information, the location information (i.e., coordinate information) of the annotation information can be extracted. Based on the coordinate information, the offset relative to the DOM root node of the HTML page (host page) can be determined. Then, based on the offset, the rendering and display position of the annotation information can be calculated and determined. Furthermore, the positioning method of the annotation information in the host page is set to absolute positioning, deviating from the original document flow layout. At the same time, the z-axis stacking order weight of the annotation information in the document flow is adjusted to the highest to display the annotation information. It should also be noted that the location information and annotation information are obtained from the database through the annotation server interface, where the annotation server interface is used for data transmission with the database, and the annotation information includes at least one of text, graphics, tables, animations, and links.

[0046] Steps 201, 202, and 203 in this embodiment are exactly the same as steps 101, 102, and 103 in the previous embodiment, so detailed descriptions of them are omitted. Furthermore, the specific process of loading the script may include: loading it into the host page via a browser, traversing the HTML element DOM node tree, inserting a script tag after finding the body node, specifying the src source as the script address, binding a loading success event callback function to the script tag, executing the script code after loading is complete, and finally performing page node operations through the Document interface, the entry point for accessing and manipulating webpage content.

[0047] As can be seen from the above, the HTML page annotation method provided by the present invention obtains the position information when the mouse clicks on the HTML page through HTML standard events; inserts a script into the HTML page, generates an interactive window based on the script and the position information; obtains annotation information through the interactive window, saves the position information and the annotation information to a database, wherein the position information corresponds to the annotation information; retrieves the position information and the annotation information from the database, and displays the annotation information on the HTML page according to the position information. This simplifies the cumbersome operation of taking screenshots and transferring files through third-party tools to add annotation information to an HTML page, greatly improves the efficiency of information annotation, and thus overcomes the problems existing in the prior art.

[0048] In addition, embodiments of the present invention provide an HTML page annotation device, the device comprising:

[0049] The location information acquisition module acquires the location information when the mouse clicks the HTML page through HTML standard events;

[0050] An interactive window generation module inserts a script into the HTML page and generates an interactive window based on the script and the location information.

[0051] The annotation information acquisition module obtains annotation information through the interactive window;

[0052] The information storage module saves the location information and the annotation information to the database.

[0053] The annotation information display module retrieves the location information and the annotation information from the database, and displays the annotation information in the HTML page based on the location information.

[0054] Since the HTML page annotation device provided in this embodiment can be used to execute the HTML page annotation method described in the above embodiment, and its working principle and beneficial effects are similar, it will not be described in detail here. For details, please refer to the description of the above embodiment.

[0055] Based on the same inventive concept, another embodiment of the present invention provides an electronic device, see [link to previous document]. Figure 4 The electronic device specifically includes the following components: a processor 401, a memory 402, a communication interface 403, and a communication bus 404; wherein the processor 401, the memory 402, and the communication interface 403 communicate with each other through the communication bus 404.

[0056] The processor 401 is used to call the computer program in the memory 402. When the processor executes the computer program, it implements all the steps of the above-described HTML page annotation method. For example, when the processor executes the computer program, it implements the following process: obtaining the position information when the mouse clicks the HTML page through HTML standard events; inserting a script into the HTML page, generating an interactive window based on the script and the position information; obtaining annotation information through the interactive window, saving the position information and the annotation information to a database, wherein the position information corresponds to the annotation information; retrieving the position information and the annotation information from the database, and displaying the annotation information in the HTML page according to the position information.

[0057] It is understood that the refined and extended functions that the computer program can execute can be referred to the description of the above embodiments.

[0058] Based on the same inventive concept, another embodiment of the present invention provides a non-transitory computer-readable storage medium storing a computer program. When executed by a processor, the computer program implements all the steps of the above-described HTML page annotation method. For example, when the processor executes the computer program, it performs the following process: obtaining the position information when the mouse clicks the HTML page through HTML standard events; inserting a script into the HTML page and generating an interactive window based on the script and the position information; obtaining annotation information through the interactive window and saving the position information and the annotation information to a database, wherein the position information corresponds to the annotation information; retrieving the position information and the annotation information from the database and displaying the annotation information in the HTML page according to the position information.

[0059] It is understood that the refined and extended functions that the computer program can execute can be referred to the description of the above embodiments.

[0060] Based on the same inventive concept, another embodiment of the present invention provides a computer program product, which includes a computer program that, when executed by a processor, implements all the steps of the above-described HTML page annotation method. For example, when the processor executes the computer program, it performs the following process: obtaining the position information when the mouse clicks the HTML page through HTML standard events; inserting a script into the HTML page, generating an interactive window based on the script and the position information; obtaining annotation information through the interactive window, saving the position information and the annotation information to a database, wherein the position information corresponds to the annotation information; retrieving the position information and the annotation information from the database, and displaying the annotation information on the HTML page according to the position information.

[0061] It is understood that the refined and extended functions that the computer program can execute can be referred to the description of the above embodiments.

[0062] Furthermore, the logical instructions in the aforementioned memory can be implemented as software functional units and sold or used as independent products, and can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0063] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of the embodiments of the present invention according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0064] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., including several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the HTML page annotation method described in various embodiments or some parts of embodiments.

[0065] Furthermore, in this invention, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0066] Furthermore, in this invention, the use of terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refers to a specific feature, structure, material, or characteristic described in connection with that embodiment or example, which is included in at least one embodiment or example of the invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Furthermore, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0067] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for annotating an HTML page, characterized by, The method comprises: obtaining position information of a mouse click on the HTML page through an HTML standard event; inserting a script into the HTML page, generating an interactive window based on the script and according to the position information, wherein the script is pre-configured and stored in a server; obtaining annotation information through the interactive window, and saving the position information and the annotation information into a database, wherein the position information corresponds to the annotation information; and obtaining the position information and the annotation information from the database, and displaying the annotation information in the HTML page according to the position information. The displaying of the annotation information in the HTML page according to the position information comprises: determining an offset relative to a DOM root node of the HTML page according to the position information, calculating a rendering display position of the annotation information based on the offset, setting a positioning mode of the annotation information to absolute positioning, and adjusting an order weight of z-axis layering display of the annotation information in a document flow to the highest.

2. The HTML page annotation method of claim 1, wherein, The script is stored in a server and loaded into a body node of the HTML page after use.

3. The HTML page annotation method of claim 1, wherein, The script is inserted into the HTML page through a Document interface of the HTML page.

4. The HTML page annotation method of claim 1, wherein, The obtaining of the position information and the annotation information from the database comprises: obtaining the position information and the annotation information from the database through an annotation server interface, wherein the annotation server interface is used for data transmission with the database.

5. The HTML page annotation method according to any one of claims 1 to 4, characterized in that, The annotation information comprises at least one of text, graphics, tables, animations, and links.

6. An HTML page labeling apparatus characterized by comprising: The device comprises: a position information obtaining module, which obtains position information of a mouse click on the HTML page through an HTML standard event; an interactive window generating module, which inserts a script into the HTML page, generates an interactive window based on the script and according to the position information, wherein the script is pre-configured and stored in a server; an annotation information obtaining module, which obtains annotation information through the interactive window; an information storing module, which saves the position information and the annotation information into a database; an annotation information displaying module, which obtains the position information and the annotation information from the database, and displays the annotation information in the HTML page according to the position information. The displaying of the annotation information in the HTML page according to the position information comprises: determining an offset relative to a DOM root node of the HTML page according to the position information, calculating a rendering display position of the annotation information based on the offset, setting a positioning mode of the annotation information to absolute positioning, and adjusting an order weight of z-axis layering display of the annotation information in a document flow to the highest.

7. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor implements the steps of the HTML page annotation method according to any one of claims 1 to 5 when executing the program.

8. A non-transitory computer-readable storage medium having stored thereon a computer program, characterized in that, The computer program implements the steps of the HTML page annotation method according to any one of claims 1 to 5 when executed by the processor.

Images