Search

CN-121984955-A - SVG synchronization method, device, equipment and medium of remote browser for DOM reconstruction

CN121984955ACN 121984955 ACN121984955 ACN 121984955ACN-121984955-A

Abstract

The invention provides an SVG synchronization method, device, equipment and medium of a remote browser for DOM reconstruction, which comprises the steps of receiving incremental data, determining a target parent element according to a parent element selector, a child node serialization character string to be inserted and insertion position information, judging the name space of the target parent element, creating a temporary SVG container element, injecting the child node serialization character string into the temporary SVG container element to enable the browser to analyze and generate a DOM node with a correct SVG name space, extracting the DOM node from the temporary SVG container element as a new child node to be inserted, and inserting the new child node into a designated position of the target parent element according to the insertion position information, so that the synchronization of SVG can be perfectly realized without losing any style and animation effect.

Inventors

  • LIU ZHIHAI
  • WANG WENSHENG
  • SU FUQING

Assignees

  • 福建紫讯信息科技有限公司

Dates

Publication Date
20260505
Application Date
20251204

Claims (10)

  1. 1. A SVG synchronization method of a remote browser for DOM reconstruction is characterized by comprising the following steps: Step 1, receiving incremental data, wherein the incremental data at least comprises a father element selector, a child node serialization character string to be inserted and insertion position information; Step 2, determining a target parent element according to the parent element selector, judging the name space of the target parent element, and executing SVG child node creation operation when the target parent element is an element under an SVG name space, wherein the creation operation comprises the steps of creating a temporary SVG container element, injecting the child node serialization character string into the temporary SVG container element so as to enable a browser to analyze and generate a DOM node with a correct SVG name space; and step3, inserting the new child node into the appointed position of the target parent element according to the insertion position information.
  2. 2. The SVG synchronization method of a remote browser for DOM reconstruction of claim 1, wherein the type of the incremental data is a node addition operation, and the data structure comprises a field for identifying whether the parent element is an SVG element.
  3. 3. The SVG synchronization method of a remote browser for DOM reconstruction according to claim 1, wherein the step 2 is specifically to detect namespaceURI attributes of the target parent element, determine that the target parent element is an element under an SVG namespace when the namespaceURI attributes are equal to a preset SVG namespace identifier, the preset SVG namespace identifier is http:// www.w3.org/2000/SVG, and execute an SVG child node creation operation when the target parent element is an element under the SVG namespace, the creation operation includes: calling a document.createElementNS method, and introducing an SVG naming space identifier and an element label name "SVG" to create the temporary SVG container element; And the child node serialization character string is assigned to INNERHTML attributes of the temporary SVG container element so that a browser can analyze and generate DOM nodes with correct SVG namespaces, and the DOM nodes are extracted from the temporary SVG container element to serve as new child nodes to be inserted.
  4. 4. The SVG synchronization method of the remote browser reconstructed by the DOM according to claim 1, wherein the step 3 is specifically that if the insertion position information is valid and the indicated position is smaller than the number of existing child nodes of the target parent element, insertBefore operations are executed at the corresponding position of the target parent element; Otherwise, executing an appendChild operation on the target parent element.
  5. 5. The SVG synchronization device of the remote browser for reconstructing DOM is characterized by comprising the following components: The data receiving module is used for receiving incremental data, wherein the incremental data at least comprises a father element selector, a child node serialization character string to be inserted and insertion position information; The determination creation module determines a target parent element according to the parent element selector and judges the name space of the target parent element; when the target parent element is an element under an SVG namespace, executing an SVG child node creation operation, wherein the creation operation comprises the steps of creating a temporary SVG container element, injecting the child node serialization character string into the temporary SVG container element so as to enable a browser to analyze and generate a DOM node with a correct SVG namespace; And the synchronization module inserts the new child node into the appointed position of the target parent element according to the insertion position information.
  6. 6. The SVG synchronization apparatus of a DOM reconstructed remote browser of claim 5, wherein the type of incremental data is a node addition operation, and wherein the data structure explicitly comprises a field for identifying whether the parent element is an SVG element.
  7. 7. The SVG synchronization apparatus of a DOM reconstructed remote browser according to claim 5, wherein the determining and creating module is specifically configured to detect namespaceURI attributes of the target parent element, determine that the target parent element is an element under an SVG namespace when the namespaceURI attributes are equal to a preset SVG namespace identifier, the preset SVG namespace identifier is http:// www.w3.org/2000/SVG, and execute an SVG child node creating operation when the target parent element is an element under the SVG namespace, the creating operation includes: calling a document.createElementNS method, and introducing an SVG naming space identifier and an element label name "SVG" to create the temporary SVG container element; And the child node serialization character string is assigned to INNERHTML attributes of the temporary SVG container element so that a browser can analyze and generate DOM nodes with correct SVG namespaces, and the DOM nodes are extracted from the temporary SVG container element to serve as new child nodes to be inserted.
  8. 8. The SVG synchronization device of the DOM reconstructed remote browser of claim 5, wherein the synchronization module is configured to perform insertBefore operations at corresponding positions of the target parent element if the insertion position information is valid and the indicated position is less than the number of existing child nodes of the target parent element; Otherwise, executing an appendChild operation on the target parent element.
  9. 9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of any one of claims 1 to 4 when the program is executed by the processor.
  10. 10. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the method according to any one of claims 1 to 4.

Description

SVG synchronization method, device, equipment and medium of remote browser for DOM reconstruction Technical Field The invention relates to the technical field of remote browsers, in particular to a SVG synchronization method, device, equipment and medium of a remote browser for DOM reconstruction. Background Modern browsers face a variety of security threats, including malicious websites, malicious scripts, and the like. These threats may lead to user data leakage, device infection, or system damage. Conventional browsers use sandboxed technology to isolate web pages from interaction with operating systems and other applications. However, many modern web sites and applications contain complex JavaScript code, advertisements, plug-ins, etc., which may present additional security risks. To address these security issues, remote browser technology has evolved. The remote browser isolates the user's network activity from the local device by running browser instances on the remote server. The browser operation and data processing of the user are carried out at the cloud end, and the local computer only receives the processed content. This quarantine can effectively prevent direct threat of malicious code to the local system. When the SVG label content is processed, the existing remote browser realized by a DOM mode treats SVG subelements as common DOM nodes, so that the SVG incremental synchronization can lose the appearance or animation effect. Disclosure of Invention The invention aims to solve the technical problem of providing a SVG synchronization method, device, equipment and medium of a remote browser for DOM reconstruction, which can perfectly realize the synchronization of SVG without losing any style and animation effect. In a first aspect, the present invention provides a method for synchronizing SVG of a remote browser for DOM reconstruction, comprising the steps of: Step 1, receiving incremental data, wherein the incremental data at least comprises a father element selector, a child node serialization character string to be inserted and insertion position information; Step 2, determining a target parent element according to the parent element selector, judging the name space of the target parent element, and executing SVG child node creation operation when the target parent element is an element under an SVG name space, wherein the creation operation comprises the steps of creating a temporary SVG container element, injecting the child node serialization character string into the temporary SVG container element so as to enable a browser to analyze and generate a DOM node with a correct SVG name space; and step3, inserting the new child node into the appointed position of the target parent element according to the insertion position information. In a second aspect, the present invention provides an SVG synchronization device for a DOM reconstructed remote browser, including: The data receiving module is used for receiving incremental data, wherein the incremental data at least comprises a father element selector, a child node serialization character string to be inserted and insertion position information; The determination creation module determines a target parent element according to the parent element selector and judges the name space of the target parent element; when the target parent element is an element under an SVG namespace, executing an SVG child node creation operation, wherein the creation operation comprises the steps of creating a temporary SVG container element, injecting the child node serialization character string into the temporary SVG container element so as to enable a browser to analyze and generate a DOM node with a correct SVG namespace; And the synchronization module inserts the new child node into the appointed position of the target parent element according to the insertion position information. In a third aspect, the invention provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method of the first aspect when executing the program. In a fourth aspect, the present invention provides a computer readable storage medium having stored thereon a computer program which when executed by a processor implements the method of the first aspect. The one or more technical schemes provided by the invention have at least the following technical effects or advantages: 1. thoroughly solving the industrial problem of SVG namespace loss The conventional insertion of SVG fragments directly through INNERHTML or document.createElement () results in child nodes being incorrectly parsed into the HTML namespace (http:// www.w3. Org/1999/xhtml) and therefore SVG-specific attributes (e.g., x, dy, fill, etc.) cannot be rendered or lost. The invention ensures that the child nodes inherit the correct SVG naming space by 100% in a mode of 'temporary SVG container + INNERHTML analysis',