Method, processor, apparatus and storage medium for adjusting webpage layout

Abstract

Embodiments of the present application provide a method for adjusting webpage layout, a processor, an apparatus and a storage medium. The method comprises: loading a target webpage and generating a first virtual DOM tree corresponding to the target webpage; obtaining a drag operation of a user on a content element of the target webpage; determining an adjusted position of a selected content element according to the drag operation; generating a second virtual DOM tree corresponding to the target webpage according to the adjusted position of the selected content element; loading the target webpage again and generating a third virtual DOM tree corresponding to the reloaded target webpage; comparing the second virtual DOM tree and the third virtual DOM tree; and displaying the target webpage according to the comparison result. The technical solution can adjust the content of the entire webpage, and the adjusted content can be kept at the adjusted position without position change. The technical solution is flexible to use, not limited by the access end, and reduces the difficulty and cost of page development.

Description

Technical Field

[0001] This application relates to the field of computer technology, and specifically to a method, processor, device, and storage medium for adjusting web page layout. Background Technology

[0002] With the development of internet technology, a large number of web pages carrying various content have been generated. Static pages display the same content layout to all visitors. However, different visitors prioritize different content, requiring adjustments to the web page layout based on user preferences.

[0003] Existing drag-and-drop development technology can quickly create pages, but this technology is designed for web page developers rather than web page viewers, and it cannot adjust the layout of all content on a web page. Summary of the Invention

[0004] The purpose of this application is to provide a method, processor, device, and storage medium for adjusting web page layout.

[0005] To achieve the above objectives, the first aspect of this application provides a method for adjusting webpage layout, comprising:

[0006] Load the target webpage and generate the first virtual DOM tree corresponding to the target webpage. The virtual DOM tree is generated based on the virtual nodes corresponding to each content element included in the target webpage.

[0007] Get the user's drag-and-drop actions on content elements of the target webpage;

[0008] The position of the selected content element is determined based on the drag-and-drop operation;

[0009] Generate a second virtual DOM tree corresponding to the target webpage based on the adjusted positions of the selected content elements;

[0010] Reload the target webpage and generate a third virtual DOM tree corresponding to the reloaded target webpage;

[0011] Compare the second virtual DOM tree and the third virtual DOM tree;

[0012] The target webpage is displayed based on the comparison results.

[0013] In this embodiment, each virtual node has a corresponding node label, which is determined based on the tag name of the corresponding content element. The second virtual DOM tree includes multiple second virtual nodes, and the third virtual DOM tree includes multiple third virtual nodes. Comparing the second and third virtual DOM trees includes: obtaining the node label of each second virtual node and each third virtual node respectively; sequentially selecting a third virtual node as the target node, comparing the first node position and the second node position of the target node, where the first node position refers to the node position of the target node in the third virtual DOM tree, and the second node position is the node position of the second virtual node with the same node label as the target node in the second virtual DOM tree; if the first node position and the second node position are inconsistent, the second node position is determined as the target node position of the target node; displaying the target webpage according to the comparison result includes: for each target node, determining the target display position of the content element corresponding to the target node in the target webpage based on the target node position of the target node; adjusting the display position of the content element on the target webpage according to the target display position of each content element.

[0014] In this embodiment of the application, the method further includes: for any target node, if there is no second virtual target node with the same node label as the target node, determining that the target node does not have a corresponding second node position; and determining the first node position of the target node as the target node position of the target node.

[0015] In this embodiment of the application, determining the adjusted position of the selected content element based on the drag operation includes: loading a specific plugin for the target webpage to display a drag button on the target webpage; determining to start a layout adjustment operation for the target webpage when an operation instruction for the drag button is obtained; obtaining the target content element selected by the moving cursor operation, monitoring and determining the movement trajectory of the moving cursor, so as to determine the final position of the target content element.

[0016] In this embodiment of the application, loading a target webpage and generating a first virtual DOM tree corresponding to the target webpage includes: loading the target webpage and traversing all content elements on the target webpage; determining a first virtual node corresponding to each content element, wherein the node label of the first virtual node is the label name of the corresponding content element, and the node identifier of the first virtual node is generated based on all attribute key-value pairs of the corresponding content element; and arranging the first virtual nodes according to the hierarchical structure of the content elements to generate a first virtual DOM tree.

[0017] In this embodiment, for any first virtual node, when the content element corresponding to the first virtual node has no attributes, the node identifier of the first virtual node is generated based on the node identifier of the parent node of the corresponding content element; for any first virtual node, when the node identifier of the first virtual node is the same as the node identifier of other virtual nodes, the node identifier of the first virtual node is generated based on the node identifier of the first virtual node and the node identifier of the parent node of the corresponding content element.

[0018] In this embodiment of the application, the method further includes: after generating a third virtual DOM tree corresponding to the reloaded target webpage, displaying a restore button on the target webpage; and, upon receiving a selection instruction for the restore button, displaying the target webpage according to the third virtual DOM tree.

[0019] A second aspect of this application provides a processor configured to perform the above-described method for adjusting webpage layout.

[0020] A third aspect of this application provides an apparatus for adjusting the layout of a webpage, including the processor described above.

[0021] A fourth aspect of this application provides a machine-readable storage medium storing instructions that, when executed by a processor, configure the processor to perform the aforementioned method for adjusting webpage layout.

[0022] The above technical solution loads the target webpage and generates a first virtual DOM tree corresponding to it. Then, it captures the user's drag-and-drop operations on the content elements of the target webpage; determines the adjusted position of the selected content element based on the drag-and-drop operations; and generates a second virtual DOM tree corresponding to the target webpage based on the adjusted position of the selected content element. Finally, it compares the second and third virtual DOM trees and displays the target webpage based on the comparison result. This technical solution allows for the adjustment of the entire webpage content, and the adjusted content remains in its adjusted position without any change in location. This technical solution is flexible, not limited by the access terminal, and reduces the difficulty and cost of page development.

[0023] Other features and advantages of the embodiments of this application will be described in detail in the following detailed description section. Attached Figure Description

[0024] The accompanying drawings are provided to further illustrate the embodiments of this application and form part of the specification. They are used together with the following detailed description to explain the embodiments of this application, but do not constitute a limitation on the embodiments of this application. In the drawings:

[0025] Figure 1The illustration shows a flowchart of a method for adjusting a webpage layout according to an embodiment of this application;

[0026] Figure 2 This illustration schematically shows a process diagram for generating a first virtual DOM according to an embodiment of this application;

[0027] Figure 3 This diagram schematically illustrates an application of a method for adjusting a webpage layout according to an embodiment of this application.

[0028] Figure 4 The diagram illustrates the internal structure of a computer device according to an embodiment of this application. Detailed Implementation

[0029] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are only for illustration and explanation of the embodiments of this application and are not intended to limit the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0030] Figure 1 The illustration shows a flowchart of a method for adjusting a webpage layout according to an embodiment of this application. Figure 1 As shown in one embodiment of this application, a method for adjusting the layout of a webpage is provided, including the following steps:

[0031] Step 101: Load the target webpage and generate the first virtual DOM tree corresponding to the target webpage. The virtual DOM tree is generated based on the virtual nodes corresponding to each content element included in the target webpage.

[0032] Step 102: Obtain the user's drag-and-drop operations on the content elements of the target webpage.

[0033] Step 103: Determine the adjusted position of the selected content element based on the drag operation.

[0034] Step 104: Generate a second virtual DOM tree corresponding to the target webpage based on the adjusted positions of the selected content elements.

[0035] Step 105: Reload the target webpage and generate a third virtual DOM tree corresponding to the reloaded target webpage.

[0036] Step 106: Compare the second virtual DOM tree and the third virtual DOM tree.

[0037] Step 107: Display the target webpage based on the comparison results.

[0038] A webpage is a plain text file containing HTML tags. It is the basic element of a website and a platform that hosts various website applications. A webpage can be stored on a computer anywhere in the world; it is a "page" on the World Wide Web and is in Hypertext Markup Language format. A virtual DOM tree is a regular JavaScript object used to describe an HTML fragment. After the processor loads the target webpage, it can generate a first virtual DOM tree corresponding to the target webpage. The target webpage can be any webpage in any browser opened by the user, and it can contain multiple content elements, i.e., HTML elements. The virtual DOM tree can include multiple virtual nodes, each corresponding to a content element on the webpage. The processor can also capture drag-and-drop operations performed by the user on content elements of the target webpage. Drag-and-drop operations can move content elements within the target webpage. For example, the target webpage may include multiple content elements such as A, B, and C. The user can adjust the layout of A, B, C, etc., on the target webpage according to their usage habits; this adjustment can be done through drag-and-drop operations. That is, the user can drag A to change its position on the target webpage. The processor can then generate a second virtual DOM tree corresponding to the target webpage based on the adjusted position. The layout presented by the second virtual DOM tree is the webpage layout customized by the user. After the user reloads the target webpage, the processor generates a third virtual DOM tree corresponding to the reloaded target webpage, and displays the target webpage based on the comparison result between the second and third virtual DOM trees.

[0039] In one embodiment, the virtual DOM tree includes multiple virtual nodes, each with a corresponding node label, wherein the node label is determined based on the tag name of the corresponding content element. The second virtual DOM tree includes multiple second virtual nodes, corresponding to the target webpage after layout adjustment, with each second virtual node corresponding to a content element within the adjusted target webpage. The third virtual DOM tree includes multiple third virtual nodes, corresponding to the reloaded target webpage, with each third virtual node corresponding to a content element within the reloaded target webpage.

[0040] The processor can obtain the node tags of each second and third virtual node separately, and sequentially select one third virtual node as the target node, comparing the first node position of the target node with the second node position. Here, the first node position refers to the target node's position in the third virtual DOM tree, and the second node position is the position of the second virtual node with the same node tag as the target node in the second virtual DOM tree. If the first and second node positions are inconsistent, the second node position is determined as the target node position of the target node. For each target node, the processor can determine the target display position of the corresponding content element on the target webpage based on the target node position; and adjust the display position of each content element on the target webpage based on the target display position of each content element.

[0041] For example, the second virtual DOM tree includes three second virtual nodes, named x1, x2, and x3, with node labels 1, 2, and 3. The third virtual DOM tree includes three third virtual nodes, named y1, y2, and y3, with node labels 1, 2, and 3. The processor first selects y1 as the target node and compares its first node position with its second node position. The first node position is the location of y1 in the third virtual DOM tree, and the second node position is the location of x1 (with the same node label as y1) in the second virtual DOM tree. If the first and second node positions are inconsistent, the second node position is determined as the target node position for y1. The processor can then determine the target display position of the content element corresponding to y1 on the target webpage based on the target node position of y1, and adjust the display position of the content element on the target webpage accordingly.

[0042] In one embodiment, for any target node, if there is no second virtual target node with the same node label as the target node, the processor can determine that the target node does not have a corresponding second node position; the first node position of the target node can be determined as the target node position of the target node. For example, the second virtual DOM tree includes two second virtual nodes, x1 and x2, with node labels 1 and 2. The third virtual DOM tree includes three third virtual nodes, y1, y2, and y3, with node labels 1, 2, and 3. When the processor selects y3 as the target node, there is no second node position corresponding to node label 3 of y3. The first node position of y3 can be determined as the target node position of y3. The processor can determine the target display position of the content element corresponding to y3 on the target webpage based on the target node position of y3, and adjust the display position of the content element on the target webpage according to the display position of the content element.

[0043] In one embodiment, the processor can load a specific plugin for the target webpage to display a drag button on the target webpage; upon receiving an operation instruction for the drag button, it determines to initiate a layout adjustment operation for the target webpage; it acquires the target content element selected by the cursor movement operation, monitors and determines the movement trajectory of the cursor, and determines the final position of the target content element. For example, it can read the mouse's position on the target webpage in real time and highlight the border of the content element where the mouse is located. When the mouse is clicked, it determines the current content element as the target content element and monitors the mouse's movement trajectory. When the mouse is released, it determines the current position of the mouse as the final position of the target content element.

[0044] In one embodiment, the processor can load a target webpage, traverse all content elements on the target webpage, determine a first virtual node corresponding to each content element, the node label of the first virtual node being the tag name of the corresponding content element, and the node identifier of the first virtual node being generated based on all attribute key-value pairs of the corresponding content element. The first virtual nodes are arranged according to the hierarchical structure of the content elements to generate a first virtual DOM tree. For example... Figure 2As shown, the content elements on the target webpage are `img`, `span`, and `div`. The `div` element includes a tag name `label` and attribute key-value pairs `p`. The processor iterates through all content elements to determine the first virtual node corresponding to each element. Specifically, this is the first virtual node `v-img`, `v-span`, and `v-div` corresponding to `img`, `span`, and `div`, respectively. The first virtual node `v-div` includes a node tag `v-label` and a node identifier `vp`. The first virtual nodes `v-img`, `v-span`, and `v-div` are arranged according to the hierarchical structure of `img`, `span`, and `div` to generate the first virtual DOM tree.

[0045] In one embodiment, for any first virtual node, if the content element corresponding to the first virtual node has no attributes, the node identifier of the first virtual node can be generated based on the node identifier of the parent node of the corresponding content element. For any first virtual node, if the node identifier of the first virtual node is the same as the node identifier of other virtual nodes, the node identifier of the first virtual node can be generated based on the node identifier of the first virtual node and the node identifier of the parent node of the corresponding content element.

[0046] In one embodiment, after generating a third virtual DOM tree corresponding to the reloaded target webpage, a restore button is displayed on the target webpage; upon receiving a selection instruction for the restore button, the target webpage is displayed according to the third virtual DOM tree.

[0047] In one embodiment, the processor can load the target webpage, traverse all content elements (img, span, div) on the target webpage, determine the first virtual nodes (v-img, v-span, v-div) corresponding to each content element, and arrange the first virtual nodes (v-img, v-span, v-div) according to the hierarchical structure of img, span, and div to generate a first virtual DOM tree. The processor can load specific plugins for the target webpage to display drag buttons on the target webpage. Upon receiving an operation instruction for the drag button, it determines to initiate a layout adjustment operation for the target webpage. It can read the mouse's position on the target webpage in real time and highlight the border of the div where the mouse is located. When the mouse is clicked, the div is identified as the target content element, and the mouse movement trajectory is monitored. When the mouse is released, the current mouse position is determined to be the final position of the div.

[0048] like Figure 3As shown, the processor can generate a second virtual DOM tree (i.e., the saved virtual DOM tree structure) corresponding to the target webpage based on the adjusted position of the div (i.e., the final position). The target webpage is reloaded, and a third virtual DOM tree (i.e., the original webpage structure) corresponding to the reloaded target webpage is generated. The second and third virtual DOM trees are compared to determine the position of the third virtual node div in the third virtual DOM tree (i.e., the first node position) and the position of the second virtual node v-div (which has the same node label as the third virtual node div) in the second virtual DOM tree (i.e., the second node position). If the first and second node positions are inconsistent, the second node position is determined as the target node position of the div. The processor can determine the target display position of the content element corresponding to the div in the target webpage based on the div's target node position, adjust the display position of the content element on the target webpage according to the target display position, and finally display the target webpage (i.e., the structure after the last user adjustment). The processor can also display the target webpage based on the third virtual DOM tree if a selection instruction for the restore button is received.

[0049] The above technical solution involves loading the target webpage and generating a first virtual DOM tree corresponding to it. Then, it captures the user's drag-and-drop operations on the content elements of the target webpage. Based on these drag-and-drop operations, it determines the adjusted position of the selected content element and generates a second virtual DOM tree corresponding to the target webpage. Finally, it compares the second and third virtual DOM trees and displays the target webpage based on the comparison result. This technical solution allows for the adjustment of the entire webpage's content, ensuring that the adjusted content remains in its correct position without any change in location. This solution is flexible, not limited by the access terminal, and reduces the difficulty and cost of page development.

[0050] Figure 1 This is a flowchart illustrating a method for adjusting a webpage layout in one embodiment. It should be understood that, although... Figure 1 The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order in which these steps are executed, and they can be performed in other orders. Figure 1 At least some of the steps in the process may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least some of the sub-steps or stages of other steps.

[0051] This application provides a processor for running a program, wherein the program executes the above-described method for adjusting webpage layout.

[0052] This application provides an apparatus for adjusting webpage layout, including the processor described above.

[0053] This application provides a storage medium storing a program that, when executed by a processor, implements the above-described method for adjusting webpage layout.

[0054] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 4 As shown, the computer device includes a processor A01, a network interface A02, memory (not shown), and a database (not shown) connected via a system bus. The processor A01 provides computing and control capabilities. The memory includes internal memory A03 and a non-volatile storage medium A04. The non-volatile storage medium A04 stores an operating system B01, a computer program B02, and a database (not shown). The internal memory A03 provides an environment for the operation of the operating system B01 and the computer program B02 stored in the non-volatile storage medium A04. The database stores web page data. The network interface A02 communicates with external terminals via a network connection. When executed by the processor A01, the computer program B02 implements a method for adjusting the layout of web pages.

[0055] Those skilled in the art will understand that Figure 4 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0056] This application provides an apparatus including a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, it performs the following steps: loading a target webpage and generating a first virtual DOM tree corresponding to the target webpage, wherein the virtual DOM tree is generated based on virtual nodes corresponding to each content element included in the target webpage; acquiring drag operations performed by a user on content elements of the target webpage; determining the adjusted position of the selected content element based on the drag operations; generating a second virtual DOM tree corresponding to the target webpage based on the adjusted position of the selected content element; reloading the target webpage and generating a third virtual DOM tree corresponding to the reloaded target webpage; comparing the second virtual DOM tree and the third virtual DOM tree; and displaying the target webpage based on the comparison result.

[0057] In one embodiment, each virtual node has a corresponding node label, wherein the node label is determined based on the tag name of the corresponding content element. The second virtual DOM tree includes multiple second virtual nodes, and the third virtual DOM tree includes multiple third virtual nodes. Comparing the second and third virtual DOM trees includes: obtaining the node label of each second virtual node and each third virtual node respectively; sequentially selecting a third virtual node as the target node, comparing the first node position and the second node position of the target node, wherein the first node position refers to the node position of the target node in the third virtual DOM tree, and the second node position is the node position of the second virtual node with the same node label as the target node in the second virtual DOM tree; if the first node position and the second node position are inconsistent, the second node position is determined as the target node position of the target node; displaying the target webpage according to the comparison result includes: for each target node, determining the target display position of the content element corresponding to the target node in the target webpage based on the target node position of the target node; adjusting the display position of the content element on the target webpage according to the target display position of each content element.

[0058] In one embodiment, for any target node, if there is no second virtual target node with the same node label as the target node, it is determined that the target node does not have a corresponding second node position; the first node position of the target node is determined as the target node position of the target node.

[0059] In one embodiment, determining the adjusted position of the selected content element based on the drag operation includes: loading a specific plugin for the target webpage to display a drag button on the target webpage; determining to initiate a layout adjustment operation for the target webpage upon receiving an operation instruction for the drag button; obtaining the target content element selected by the moving cursor operation, monitoring and determining the movement trajectory of the moving cursor, and determining the final position of the target content element.

[0060] In one embodiment, loading a target webpage and generating a first virtual DOM tree corresponding to the target webpage includes: loading the target webpage and traversing all content elements on the target webpage; determining a first virtual node corresponding to each content element, wherein the node label of the first virtual node is the tag name of the corresponding content element, and the node identifier of the first virtual node is generated based on all attribute key-value pairs of the corresponding content element; and arranging the first virtual nodes according to the hierarchical structure of the content elements to generate a first virtual DOM tree.

[0061] In one embodiment, for any first virtual node, if the content element corresponding to the first virtual node has no attributes, the node identifier of the first virtual node is generated based on the node identifier of the parent node of the corresponding content element; if the node identifier of the first virtual node is the same as the node identifier of other virtual nodes, the node identifier of the first virtual node is generated based on the node identifier of the first virtual node and the node identifier of the parent node of the corresponding content element.

[0062] In one embodiment, after generating a third virtual DOM tree corresponding to the reloaded target webpage, a restore button is displayed on the target webpage; upon receiving a selection instruction for the restore button, the target webpage is displayed according to the third virtual DOM tree.

[0063] This application also provides a computer program product that, when executed on a data processing device, is suitable for executing a program that initializes a method with the following steps for adjusting the layout of a webpage.

[0064] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0065] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0066] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0067] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0068] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0069] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0070] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0071] It should also be noted that 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 process, method, article, or apparatus. Unless otherwise specified, 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 that element.

[0072] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A method for adjusting the layout of a webpage, characterized in that, The method includes: Load the target webpage and generate a first virtual DOM tree corresponding to the target webpage. The virtual DOM tree is generated based on the virtual nodes corresponding to each content element included in the target webpage. Each virtual node has a corresponding node tag, which is determined based on the tag name of the corresponding content element. Obtain the user's drag-and-drop operations on the content elements of the target webpage; The adjusted position of the selected content element is determined based on the drag-and-drop operation; A second virtual DOM tree corresponding to the target webpage is generated based on the adjusted position of the selected content element; the second virtual DOM tree includes multiple second virtual nodes. The target webpage is reloaded, and a third virtual DOM tree corresponding to the reloaded target webpage is generated, the third virtual DOM tree including multiple third virtual nodes; Compare the second virtual DOM tree and the third virtual DOM tree; The target webpage is displayed based on the comparison results; The comparison of the second virtual DOM tree and the third virtual DOM tree includes: Obtain the node labels for each second virtual node and each third virtual node respectively; A third virtual node is selected as the target node in sequence, and the first node position and the second node position of the target node are compared. The first node position refers to the node position of the target node in the third virtual DOM tree, and the second node position is the node position of the second virtual node with the same node label as the target node in the second virtual DOM tree. If the positions of the first node and the second node are inconsistent, the position of the second node shall be determined as the target node position of the target node; For any given target node, if there is no second virtual target node with the same node label as the target node, it is determined that the target node does not have a corresponding second node position. The first node position of the target node is determined as the target node position of the target node; The step of displaying the target webpage based on the comparison results includes: For each target node, determine the target display position of the content element corresponding to the target node in the target webpage based on the target node position of the target node; Adjust the display position of each content element on the target webpage according to the target display position of each content element.

2. The method for adjusting webpage layout according to claim 1, characterized in that, Determining the adjusted position of the selected content element based on the drag operation includes: A specific plugin is loaded for the target webpage to display a drag button on the target webpage; Upon receiving an operation instruction for the drag button, determine to initiate a layout adjustment operation for the target webpage; The target content element of the cursor selection operation is obtained, and the movement trajectory of the cursor is monitored and determined to determine the final position of the target content element.

3. The method for adjusting webpage layout according to claim 1, characterized in that, The process of loading the target webpage and generating a first virtual DOM tree corresponding to the target webpage includes: Load the target webpage and iterate through all content elements on the target webpage; Determine the first virtual node corresponding to each content element. The node label of the first virtual node is the label name of the corresponding content element. The node identifier of the first virtual node is generated based on all attribute key-value pairs of the corresponding content element. The first virtual nodes are arranged according to the hierarchical structure of the content elements to generate a first virtual DOM tree.

4. The method for adjusting webpage layout according to claim 3, characterized in that, For any first virtual node, if the content element corresponding to the first virtual node has no attributes, the node identifier of the first virtual node is generated based on the node identifier of the parent node of the corresponding content element. For any first virtual node, if the node identifier of the first virtual node is the same as the node identifier of other virtual nodes, the node identifier of the first virtual node is generated based on the node identifier of the first virtual node and the node identifier of the parent node of the corresponding content element.

5. The method for adjusting webpage layout according to claim 1, characterized in that, The method further includes: After generating the third virtual DOM tree corresponding to the reloaded target webpage, a restore button is displayed on the target webpage; Upon receiving a selection instruction for the restore button, the target webpage is displayed according to the third virtual DOM tree.

6. A processor, characterized in that, Configured to perform the method for adjusting the layout of a webpage as described in any one of claims 1 to 5.

7. A device for adjusting the layout of a webpage, characterized in that, Includes the processor according to claim 6.

8. A machine-readable storage medium storing instructions thereon, characterized in that, When executed by a processor, this instruction causes the processor to be configured to perform the method of adjusting the layout of a webpage according to any one of claims 1 to 5.

Images