WO2022142743A1 - 可视化页面渲染方法、装置、设备及存储介质 - Google Patents

可视化页面渲染方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2022142743A1
WO2022142743A1 PCT/CN2021/129470 CN2021129470W WO2022142743A1 WO 2022142743 A1 WO2022142743 A1 WO 2022142743A1 CN 2021129470 W CN2021129470 W CN 2021129470W WO 2022142743 A1 WO2022142743 A1 WO 2022142743A1
Authority
WO
WIPO (PCT)
Prior art keywords
source data
page
data
tag
displayed
Prior art date
Application number
PCT/CN2021/129470
Other languages
English (en)
French (fr)
Inventor
王光辉
Original Assignee
京东科技控股股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 京东科技控股股份有限公司 filed Critical 京东科技控股股份有限公司
Priority to JP2023516608A priority Critical patent/JP2023541186A/ja
Priority to US18/038,054 priority patent/US20230419016A1/en
Publication of WO2022142743A1 publication Critical patent/WO2022142743A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/117—Tagging; Marking up; Designating a block; Setting of attributes
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/131—Fragmentation of text files, e.g. creating reusable text-blocks; Linking to fragments, e.g. using XInclude; Namespaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • the embodiments of the present application relate to the field of computer technologies, for example, to a visual page rendering method, apparatus, device, and storage medium.
  • HTML5/H5 Hypertext Markup Language
  • the present application provides a visual page rendering method, device, device and storage medium, so as to render and display custom template source data, improve the compatibility of the visual page, and realize fast loading and rendering of the visual page.
  • the present application provides a visual page rendering method, including:
  • the page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed;
  • custom template source data is data in an HTML file that references external resources
  • the page is rendered and displayed based on the first to-be-displayed page data.
  • the present application also provides a visual page rendering device, which includes:
  • the first obtaining module is configured to obtain page source data; wherein, the current page source data includes data in a plurality of HTML files corresponding to a plurality of modules in the page to be displayed;
  • An identification module configured to identify custom template source data in the page source data; wherein, the custom template source data is data in an HTML file that references external resources;
  • a first determining module configured to add the custom template source data to the newly created DIV tag in the page source data, and determine a set of child nodes corresponding to the DIV tag;
  • a first adding module configured to obtain the external resource referenced by the label in the sub-node set, and add the external resource to the DIV label to obtain the first to-be-displayed page data
  • the first display module is configured to perform page rendering and display based on the first to-be-displayed page data.
  • the present application also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, where the processor implements the above-mentioned visual page rendering method when executing the program.
  • the present application also provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, implements the above-mentioned visual page rendering method.
  • FIG. 1 is a flowchart of a visual page rendering method provided in Embodiment 1 of the present application;
  • Fig. 2a is a flowchart of a visual page rendering method provided in Embodiment 2 of the present application.
  • FIG. 2b is a flowchart of another method for rendering a visual page provided in Embodiment 2 of the present application.
  • FIG. 3 is a schematic structural diagram of a visual page rendering apparatus provided in Embodiment 3 of the present application.
  • FIG. 4 is a schematic structural diagram of a computer device according to Embodiment 4 of the present application.
  • custom templates are often unable to adapt to different business requirement scenarios, and cannot meet the diverse business needs of users. Therefore, a custom template needs to be added during the page building process.
  • custom templates are generally more complex, and page rendering cannot be achieved through the Vue front-end framework.
  • the method of using the iframe frame to render pages also has many disadvantages, such as slow loading of web pages, prone to local confusion, poor compatibility, and is not suitable for rendering added custom templates.
  • Embodiment 1 is a flowchart of a visual page rendering method provided in Embodiment 1 of the present application. This embodiment is applicable to the process of rendering and displaying the page to be displayed when the page source data of the page to be displayed includes custom template source data.
  • the method may be performed by the visual page rendering apparatus in the embodiment of the present application, and the apparatus may be implemented in software and/or hardware. As shown in FIG. 1 , the method includes the following steps:
  • S110 Acquire current page source data; wherein, the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed, respectively.
  • a visualization page is generally composed of multiple modules. Usually, each module exhibits a function, and the visualization page is divided into functional divisions, such as title module, content template, main menu module, and so on. Each module can be built from multiple templates. Acquire data in multiple HTML files corresponding to multiple modules in the page to be displayed from the server.
  • Errors may occur in the process of downloading and transmitting page data.
  • the message digest algorithm (Message-Digest Algorithm 5, MD5) is used to The current page source data is verified.
  • MD5 is a widely used hash function that can be used as a unique fingerprint for a file.
  • the basic principle of MD5 is to generate an MD5 check code by performing a hash operation on the current page source data. If the MD5 check code is the same as the MD5 code attached to the page source data, it means that the received transmission data is complete and correct. Different from the MD5 code attached to the transmitted data, you need to re-obtain the current page source data.
  • the current page source data obtained is the data encoded by the encodeURIComponent.
  • the encodeURIComponent is used to convert the data except letters, numbers, "(", ")", “.”, “!, “ ⁇ ", “*", "'” All characters except , "-” and “_” are escaped into Uniform Resource Locator (URL) of Universal Transformation Format (Unicode Transformation Format-8bit, utf-8). Therefore, it is also necessary to call the decodeURIComponent function to decode the current page source data.
  • S120 Identify custom template source data in the current page source data; wherein the custom template source data is data in an HTML file that references external resources.
  • the current page source data includes at least one custom template source data, and may also include at least one regular template source data, wherein the custom template source data is data in an HTML file that references external resources.
  • Data in multiple HTML files corresponding to multiple modules in the page to be displayed are sequentially loaded and rendered in a top-to-bottom parsing order.
  • SCRIPT tags that reference external resources cannot be loaded and rendered. Therefore, it is necessary to identify the custom template source data and process the SCRIPT tags containing the src attribute in the custom template source data.
  • the template identifier (Identifier, ID) may be used as the unique identifier of the template, and the template ID is allocated by the server during the template creation process.
  • the file type indicates the type of template, e.g. "auto-banner” for a carousel template, "slide-column” for a slide template, "anchor-nav” for an anchor navigation template, and "custom-def” for a custom template.
  • S130 Add the custom template source data to the newly created DIV tag in the current page source data, and determine a set of child nodes corresponding to the DIV tag.
  • the DIV tag in the HTML file is called a section tag, and it is recorded as ⁇ div> in HTML. It is a block-level element that defines a section or section in the document.
  • the DIV tag has purity, that is, it does not have the default margin tag and padding tag.
  • the margin tag represents the distance between different elements
  • the padding tag represents the distance between the content of the element and the border of the element. Therefore, adding the custom template source data to the newly created DIV tag in the current page source data makes it easier to control the display layout of the custom template source data.
  • the custom template source data is added to the newly created DIV tag in the current page source data, that is, the custom template source data is added between ⁇ div> and ⁇ /div>.
  • the child nodes of the custom template source data in the DIV tag are determined as a child node set ChildNodes, and the child node set represents an ordered node list.
  • the set of child nodes includes text nodes and element nodes.
  • S140 Acquire an external resource referenced by a tag in the child node set, and add the external resource to the DIV tag to obtain first page data to be displayed.
  • the src attribute specifies the URL of the external script file
  • the external resource can be a js file, that is, a web page JavaScript client script file.
  • the external resource is added to the DIV tag to obtain the data of the first page to be displayed. If multiple external resources are included, they are added to the DIV tag in order from top to bottom according to the positions of the external resources.
  • S150 Perform page rendering and display based on the first to-be-displayed page data.
  • Rendering is performed based on the data of the first to-be-displayed page and displayed on the browser.
  • the technical solution of this embodiment is to identify the custom template source data in the current page source data, add the custom template source data to the newly created DIV tag in the current page source data, and determine the The set of child nodes corresponding to the DIV label; obtain the external resource referenced by the label in the child node set, and add the external resource to the DIV label to obtain the first page data to be displayed; based on the first The page data to be displayed is rendered and displayed, and a custom template can be added to the visual page design to meet the diverse business needs of users.
  • FIG. 2 a is a flowchart of a method for rendering a visual page according to Embodiment 2 of the present application, and Embodiment 2 is described on the basis of Embodiment 1.
  • FIG. 2a the method includes:
  • S210 Acquire current page source data; wherein, the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed, respectively.
  • S220 Read template identifiers and file types corresponding to the template identifiers from the multiple HTML files, respectively.
  • the current page source data includes at least one custom template source data, and may also include at least one regular template source data, wherein the custom template source data is data in an HTML file that references external resources.
  • custom template source data is data in an HTML file that references external resources.
  • the conventional HTML rendering method in the related art can be used for rendering and display, but for custom template source data that references external resources, due to the different compatibility of different browsers, different rendering methods need to be used to achieve To quickly load and render a visual page, you first need to identify the custom template source data from the current page source data.
  • S230 Determine the template identifier whose corresponding file type is the target type as the custom template identifier, and determine the data in the HTML file corresponding to the custom template identifier as the custom template source data.
  • the target type is the type of the custom template, and the type name is defined as custom-def; if the file type corresponding to the template identifier is custom-def, it is determined that the template corresponding to the template identifier is a custom template.
  • the type name of the custom template can be set according to user requirements, and is used to distinguish the custom template from other conventional templates, such as a sliding template, a carousel template, and the like.
  • the element collection HTMLCollection of the custom template source data is obtained by calling the method of creating document fragments, the HTMLCollection contains all root node tags and elements of the custom template source data, and the root node tags include SCRIPT tags, LINK tags and DIV Label.
  • the HTMLCollection is traversed to determine the SCRIPT tag and the elements of the SCRIPT tag.
  • node.onload() method to load the external resource referenced by the src attribute of the SCRIPT tag, where the external resource is a package file in js format. js files will depend on each other, and multiple js files will have a loading order when they are mutually dependent. In this case, you need to use a queue to load js files in order from top to bottom.
  • js files generally have a large amount of data, and uploading large files directly on the web page will face many problems.
  • the upload time is long, and if an error occurs in the middle, it will lead to failure.
  • the external resources are sequentially added to the document partition. Because document fragments exist in memory and not in the Document Object Model (DOM) tree, inserting child elements into document partitions will not cause page reflow to optimize performance.
  • DOM Document Object Model
  • the second to-be-displayed page data is obtained by adding all child nodes in the document partition to the current page source data through appendChild. This operation only happens one re-rendering operation, instead of each node being inserted into the document separately, which can avoid multiple re-rendering operations.
  • the method of creating document fragments cannot be invoked to obtain the HTMLCollection of the element collection of the custom template source data. Therefore, an instruction is sent to trigger the execution of adding the custom template source data.
  • the operation in the newly created DIV tag in the source data of the current page is to obtain the set of child nodes of the source data of the custom template.
  • adding the custom template source data to the newly created DIV tag in the current page source data, and determining the set of child nodes corresponding to the DIV tag including:
  • the label element's child node collection childNodes includes text nodes and element nodes.
  • the custom template source data before adding the custom template source data to the newly created DIV tag in the current page source data, it also includes:
  • S262 Acquire the external resources referenced by the tags in the child node set, and add the external resources to the DIV tag to obtain the data of the first page to be displayed.
  • the acquiring the external resources referenced by the tags in the sub-node set, and adding the external resources to the DIV tag, to obtain the data of the first page to be displayed including:
  • Array.prototypr.slice.call can be called to convert the child node set childNodes into a child node array, and then the src attribute of the script SCRIPT tag can be determined by traversing the child node array, for example, the forEach function can be used to realize the traversal.
  • the external resource referenced by the src attribute of the SCRIPT tag is obtained from the server through a get request, and the external resource may be a file encapsulated as js.
  • the external resource is added to a blank DIV tag using innerHTML. If there are multiple js files, the multiple js files are sequentially added to the DIV tag according to the positions of the external resources from top to bottom to obtain the data of the first page to be displayed.
  • S263 Render and display a page based on the data of the first page to be displayed.
  • the steps of the embodiment of the present application are: the R&D personnel perform template development on the end of the visual orchestration personal computer (Personal Computer, PC) to obtain conventional templates and custom templates.
  • the development of conventional templates and custom templates is essentially The above is the development of HTML files.
  • the HTML files of conventional templates do not reference external resources, and users can directly use conventional templates to build pages, while the HTML files of custom templates reference external resources, and users need to modify the custom templates according to their needs. page.
  • the developed conventional templates and custom templates are encoded and sent to the server through the application programming interface (API) of the server for preprocessing and storage.
  • API application programming interface
  • the template source data When the user needs to display the page built by the template on the visual H5 side, he obtains the conventional template and custom template of the page to be displayed from the server, and parses and parses the template source data from top to bottom after decoding the MD5 checksum data. rendered and displayed on the browser.
  • Conventional templates can be parsed and rendered using conventional rendering methods. If the template type is identified as a custom template, the template source data will be parsed in different ways according to the browser version, that is, whether the browser supports calling the createContextualFragment method to create document fragments. . If the browser supports calling the createContextualFragmen method of creating document fragments, the template source data is parsed by the fragment parsing method.
  • the principle of the fragment parsing method is to use createContextualFragmen to obtain the HTMLCollection of the child node collection of the template source data, determine the SCRIPT tag by traversing the HTMLCollection, and load the SCRIPT The external resource referenced by the SRC attribute of the tag, and create a document partition, add the external resources to the document partition in sequence, and finally add the document partition to the current page source data to obtain the second to-be-displayed page data, and based on The second to-be-displayed page data is used for page rendering and display. If the browser supports calling the createContextualFragmen method of creating document fragments, a custom parsing method is used for parsing.
  • the principle of the custom parsing method is to add the custom template source data to the newly created DIV tag in the current page source data , determine the set of child nodes corresponding to the DIV label; obtain the external resources referenced by the labels in the set of child nodes, and add the external resources to the DIV label to obtain the first page data to be displayed; based on The first to-be-displayed page data is rendered and displayed on the page.
  • the technical solution of this embodiment is to identify the custom template source data in the current page source data, add the custom template source data to the newly created DIV tag in the current page source data, and determine the The set of child nodes corresponding to the DIV label; obtain the external resource referenced by the label in the child node set, and add the external resource to the DIV label to obtain the first page data to be displayed; based on the first The page data to be displayed is rendered and displayed, and a custom template can be added to the visual page design to meet the diverse business needs of users. And according to the compatibility of the browser, the custom template is rendered in different ways, to improve the compatibility of the visual page, and to realize the fast loading and rendering of the visual page.
  • FIG. 3 is a schematic structural diagram of a visual page rendering apparatus according to Embodiment 3 of the present application.
  • This embodiment can be applied to the situation of rendering a custom template in an HTML5 page, the device can be implemented in software and/or hardware, and the device can be integrated in any device that provides the function of visual page rendering, as shown in FIG. 3
  • the apparatus for visualizing page rendering includes: a first acquiring module 310 , an identifying module 320 , a first determining module 330 , a first adding module 340 and a first displaying module 350 .
  • the first obtaining module 310 is configured to obtain the current page source data; wherein, the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed; the identifying module 320 is configured to identify the The custom template source data in the current page source data; wherein, the custom template source data is the data in the HTML file that references external resources; the first determining module 330 is set to the custom template source data It is added to the newly created DIV tag in the source data of the current page, and determines the set of sub-nodes corresponding to the DIV tag; the first adding module 340 is configured to obtain the external resources referenced by the tags in the set of sub-nodes, The external resource is added to the DIV tag to obtain first page data to be displayed; the first display module 350 is configured to perform page rendering and display based on the first page data to be displayed.
  • the identification module 320 includes:
  • the first obtaining unit is set to obtain the file type corresponding to the template identification and the template identification respectively read from the plurality of HTML files; the determining unit is configured to determine that the corresponding file type is the template identification of the target type as A custom template identifier, and the data in the HTML file corresponding to the custom template identifier is determined as the custom template source data.
  • the first determining module 330 includes:
  • a creating unit is configured to create a DIV tag in the current page source data; a first adding unit is configured to add the root tag element of the custom template source data to the DIV tag; a first determining unit is configured To determine the set of child nodes in the DIV tag according to the root tag element.
  • the first adding module 340 includes:
  • a conversion unit configured to convert the set of sub-nodes into a sub-node array; a traversal unit, configured to traverse the sub-node array to determine a script SCRIPT label; a second acquisition unit, configured to obtain from the server the contents of the SCRIPT label. the referenced external resource; the second adding unit is configured to add the external resource to the DIV tag to obtain the data of the first to-be-displayed page.
  • the device further includes:
  • a matching module configured to determine the error ticket label in the custom template source data through regular matching before the custom template source data is added to the newly created DIV label in the current page source data;
  • the modification module is configured to modify the error ticket label.
  • the device further includes:
  • the second determination module is configured to determine whether the current browser supports calling the method for creating document fragments before adding the custom template source data to the newly created DIV tag in the current page source data; the trigger module is configured as If the current browser does not support invoking the method for creating document fragments, the operation of adding the custom template source data to the newly created DIV tag in the current page source data is triggered to be executed.
  • the device further includes:
  • the second obtaining module is configured to obtain the element set of the custom template source data by calling the method for creating document fragments if the current browser supports calling the method for creating document fragments, wherein the method for creating document fragments is used to
  • the custom template source data is analyzed into document fragments and an element set of the custom template source data is obtained based on the document fragments;
  • a third determining module is configured to traverse the element set to determine a SCRIPT tag; a loading module , set to load the external resources referenced by the SCRIPT tag; create a module, set to create a document partition; a second adding module, set to sequentially add the external resources to the document partition; second display module, set
  • the second page data to be displayed is obtained in order to add the document partition to the current page source data, and the page is rendered and displayed based on the second page data to be displayed.
  • the above product can execute the method provided by any embodiment of the present application, and has functional modules and effects corresponding to the execution method.
  • the technical solution of this embodiment is to identify the custom template source data in the current page source data, add the custom template source data to the newly created DIV tag in the current page source data, and determine the The set of child nodes corresponding to the DIV label; obtain the external resource referenced by the label in the child node set, and add the external resource to the DIV label to obtain the first page data to be displayed; based on the first The page data to be displayed is rendered and displayed, and a custom template can be added to the visual page design to meet the diverse business needs of users. And according to the compatibility of the browser, the custom template is rendered in different ways, to improve the compatibility of the visual page, and to realize the fast loading and rendering of the visual page.
  • FIG. 4 is a schematic structural diagram of a computer device according to Embodiment 4 of the present application.
  • FIG. 4 shows a block diagram of an exemplary computer device 12 suitable for use in implementing embodiments of the present application.
  • the computer device 12 shown in FIG. 4 is only an example, and should not impose any limitations on the functions and scope of use of the embodiments of the present application.
  • computer device 12 takes the form of a general-purpose computing device.
  • Components of computer device 12 may include, but are not limited to, one or more processors or processing units 16 , system memory 28 , and a bus 18 connecting various system components including system memory 28 and processing unit 16 .
  • Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of a variety of bus structures.
  • these architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, MicroChannel Architecture (MCA) bus, enhanced ISA bus, Video Electronics Standards Association (Video Electronics Standards Association) , VESA) local bus and Peripheral Component Interconnect (PCI) bus.
  • ISA Industry Standard Architecture
  • MCA MicroChannel Architecture
  • VESA Video Electronics Standards Association
  • PCI Peripheral Component Interconnect
  • Computer device 12 includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12, including both volatile and nonvolatile media, removable and non-removable media.
  • System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and/or cache 32 .
  • Computer device 12 may include other removable/non-removable, volatile/non-volatile computer system storage media.
  • storage system 34 may be configured to read and write to non-removable, non-volatile magnetic media (not shown in FIG. 4, commonly referred to as a "hard drive").
  • magnetic disk drives configured to read and write to removable non-volatile magnetic disks (eg "floppy disks") and removable non-volatile optical disks (eg compact disk-read only memory) may be provided Disc Read-Only Memory, CD-ROM), portable compact disk read-only memory (Digital Video Disc-ROM, DVD-ROM) or other optical media) read and write optical drives.
  • each drive may be connected to bus 18 through one or more data media interfaces.
  • System memory 28 may include at least one program product having a set (eg, at least one) of program modules configured to perform the functions of embodiments of the present application.
  • a program/utility 40 having a set (at least one) of program modules 42, which may be stored, for example, in system memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other Program modules and program data, each or a combination of these examples may include implementations of a network environment.
  • Program modules 42 generally perform the functions and/or methods of the embodiments described herein.
  • Computer device 12 may also communicate with one or more external devices 14 (eg, keyboard, pointing device, display 24, etc.), may also communicate with one or more devices that enable a user to interact with computer device 12, and/or communicate with Any device (eg, network card, modem, etc.) that enables the computer device 12 to communicate with one or more other computing devices. Such communication may take place through an input/output (I/O) interface 22 .
  • the display 24 does not exist as an independent entity, but is embedded in the mirror surface. When the display surface of the display 24 is not displayed, the display surface of the display 24 and the mirror surface are visually integrated.
  • computer device 12 may communicate with one or more networks (eg, Local Area Network (LAN), Wide Area Network (WAN), and/or public networks such as the Internet) through network adapter 20.
  • network adapter 20 communicates with other modules of computer device 12 via bus 18 .
  • other hardware and/or software modules may be used in conjunction with computer device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, redundant independent disk arrays (Redundant Arrays of Independent Disks, RAID) systems, tape drives and data backup storage systems, etc.
  • the processing unit 16 executes a variety of functional applications and data processing by running the programs stored in the system memory 28, such as implementing the visual page rendering method provided by the embodiments of the present application: obtaining the current page source data; wherein, the current page The source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed; identifying the custom template source data in the current page source data; wherein the custom template source data refers to external The data in the HTML file of the resource; add the custom template source data to the newly created DIV tag in the current page source data, and determine the child node set corresponding to the DIV label; obtain the child node set in the The external resource referenced by the tag is added to the DIV tag to obtain the first to-be-displayed page data; the page is rendered and displayed based on the first to-be-displayed page data.
  • the fifth embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, implements the visual page rendering methods provided by all the application embodiments of the present application:
  • the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed; identifying custom template source data in the current page source data; wherein , the custom template source data is data in an HTML file that references external resources; the custom template source data is added to the newly created DIV tag in the current page source data, and it is determined that the DIV tag corresponds to the set of child nodes; obtain the external resources referenced by the labels in the set of child nodes, and add the external resources to the DIV label to obtain the data of the first to-be-displayed page; based on the first to-be-displayed page The data is rendered and displayed on the page.
  • the computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium.
  • the computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or a combination of any of the above.
  • Examples (non-exhaustive list) of computer-readable storage media include: electrical connections with one or more wires, portable computer disks, hard disks, RAM, ROM, Erasable Programmable Read-Only Memory (Erasable Programmable Read-Only Memory) Memory, EPROM or flash memory), optical fiber, CD-ROM, optical storage devices, magnetic storage devices, or any suitable combination of the above.
  • a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.
  • a computer-readable signal medium may include a propagated data signal in baseband or as part of a carrier wave, with computer-readable program code embodied thereon. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing.
  • a computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device .
  • Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wire, optical fiber cable, radio frequency (RF), etc., or any suitable combination of the foregoing.
  • suitable medium including but not limited to wireless, wire, optical fiber cable, radio frequency (RF), etc., or any suitable combination of the foregoing.
  • Computer program code for carrying out the operations of the present application may be written in one or more programming languages, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional A procedural programming language, such as the "C" language or similar programming language.
  • the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer, or entirely on the remote computer or server.
  • the remote computer may be connected to the user's computer through any kind of network, including a LAN or WAN, or may be connected to an external computer (eg, using an Internet service provider to connect through the Internet).

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Artificial Intelligence (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本文公开了一种可视化页面渲染方法、装置、设备及存储介质。该可视化页面渲染方法包括：获取页面源数据；识别所述页面源数据中的自定义模板源数据；将所述自定义模板源数据添加在所述页面源数据中新创建的区隔DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的渲染显示。

Description

可视化页面渲染方法、装置、设备及存储介质
本申请要求在2020年12月31日提交中国专利局、申请号为202011634449.5的中国专利申请的优先权，该申请的全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及计算机技术领域，例如涉及一种可视化页面渲染方法、装置、设备及存储介质。
背景技术
随着移动互联网的快速发展和智能手机的全面普及，人们的生活方式和消费模式发生了巨大变化。通过最新修订版本的超文本标记语言(Hyper Markup Language 5，HTML5/H5)设计网页成为企业宣传品牌形象和吸引受众群体关注的重要途径。
发明内容
本申请提供一种可视化页面渲染方法、装置、设备及存储介质，以实现能够对自定义模板源数据进行渲染显示，提高可视化页面的兼容性，实现快速加载和渲染可视化页面。
本申请提供了一种可视化页面渲染方法，包括：
获取页面源数据；其中，所述页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据；
识别所述页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；
将所述自定义模板源数据添加在所述页面源数据中新创建的区隔(Division，DIV)标签中，确定所述DIV标签对应的子节点集合；
获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；
基于所述第一待显示页面数据进行页面的渲染显示。
本申请还提供了一种可视化页面渲染装置，该装置包括：
第一获取模块，设置为获取页面源数据；其中，所述当前页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据；
识别模块，设置为识别所述页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；
第一确定模块，设置为将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；
第一添加模块，设置为获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；
第一显示模块，设置为基于所述第一待显示页面数据进行页面的渲染显示。
本申请还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述的可视化页面渲染方法。
本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的可视化页面渲染方法。
附图说明
图1是本申请实施例一提供的一种可视化页面渲染方法的流程图；
图2a是本申请实施例二提供的一种可视化页面渲染方法的流程图；
图2b是本申请实施例二提供的另一种可视化页面渲染方法的流程图；
图3是本申请实施例三提供的一种可视化页面渲染装置的结构示意图；
图4是本申请实施例四提供的一种计算机设备的结构示意图。
具体实施方式
下面结合附图和实施例对本申请进行说明。此处所描述的具体实施例仅仅用于解释本申请。可以为了便于描述，附图中仅示出了与本申请相关的部分。
相似的标号和字母在下面的附图中表示类似项，因此，一旦一项在一个附图中被定义，则在随后的附图中不需要对其进行定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
相关技术中，在设计网页时，模板往往不能适配不同业务需求场景，无法满足用户多样的业务需求。因此，需要在页面搭建过程中添加自定义模板。但是，自定义模板一般较为复杂，无法通过Vue前端框架实现页面渲染。使用iframe框架渲染页面的方法也存在很多缺点，例如网页加载速度慢、易出现局部混乱、 兼容性较差，不适用于对添加的自定义模板进行渲染。
实施例一
图1为本申请实施例一提供的一种可视化页面渲染方法的流程图，本实施例可适用于在待显示页面的页面源数据中包含自定义模板源数据时，对待显示页面进行渲染显示的情况，该方法可以由本申请实施例中的可视化页面渲染装置来执行，该装置可采用软件和/或硬件的方式实现，如图1所示，该方法包括如下步骤：
S110，获取当前页面源数据；其中，所述当前页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据。
可视化页面一般由多个模块组成，通常每个模块展现一种功能，对可视化的页面进行功能分区，例如标题模块、内容模板、主菜单模块等。每个模块都可以由多个模板搭建而成。从服务器获取待显示页面中的多个模块分别对应的多个HTML文件中的数据。
页面数据在下载和传输的过程中可能会发生错误，为了保证获取当前页面源数据的完整性和正确性，在获取当前页面源数据后，采用消息摘要算法(Message-Digest Algorithm 5，MD5)对当前页面源数据进行校验。MD5是一种广泛使用的散列函数，可以作为一个文件的唯一指纹码。MD5的基本原理是通过对当前页面源数据执行散列运算生成MD5校验码，若MD5校验码和页面源数据附带的MD5码相同，则表示接收的传输数据完整正确，若MD5校验码和传输数据附带的MD5码不同，则需要重新获取当前页面源数据。
一般获取的当前页面源数据是经过encodeURIComponent编码的数据，encodeURIComponent用于将除了字母、数字、“(”、“)”、“.”、“！”、“～”、“*”、“'”、“-”和“_”之外的所有字符转义成通用转换格式(Unicode Transformation Format-8bit，utf-8)的统一资源定位符(Uniform Resource Locator，URL)。因此还需要调用decodeURIComponent函数对当前页面源数据进行数据解码。
S120，识别所述当前页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据。
当前页面源数据包括至少一个自定义模板源数据，还可以包括至少一个常规模板源数据，其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据。对待显示页面中的多个模块分别对应的多个HTML文件中的数据采用从上至下的解析顺序依次进行加载渲染。但是，基于浏览器渲染的原理，无法对引用外部资源的SCRIPT标签进行加载渲染，因此，需要识别出自定义模板源数据，对自定义模板源数据中包含src属性的SCRIPT标签进行处理。
识别所述当前页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据。其中，模板标识(Identifier，ID)可以作为模板的唯一标识，所述模板ID在模板制作过程中由服务器分配。文件类型表示模板的类型，例如，“auto-banner”表示轮播模板，“slide-column”表示滑动模板，“anchor-nav”表示锚定导航模板，“custom-def”表示自定义模板。
S130，将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合。
在HTML文件中的DIV标签称为区隔标记，在HTML中记为<div>，是一个块级元素，用于定义文档中的分区或节。DIV标签具有纯洁性，即不具有默认的外边距margin标签和内边距padding标签，所述margin标签表示不同元素间的距离，所述padding标签表示元素的内容与元素边框的距离。因此，将自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，更容易控制自定义模板源数据的显示布局。
将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，即将所述自定义模板源数据添加到<div>和</div>之间。将所述DIV标签中自定义模板源数据的子节点确定为子节点集合ChildNodes，所述子节点集合表示一个有序的节点列表。子节点集合包括文本节点和元素节点。
S140，获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据。
获取所述子节点集合ChildNodes中的SCRIPT标签中src属性所引用的外部资源，所述src属性规定外部脚本文件的URL，外部资源可以为js文件，即网页Java Script客户端脚本文件。将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据。若包含多个外部资源，则按照外部资源的位置从上至下依次添加到所述DIV标签中。
示例性的，子节点集合childNodes中的SCRIPT标签中的内容可以为<script src＝"http://www.example.com/example.js"></script>，或者可以为<script src＝"/scripts/example.js"></script>。则将example.js的内容添加到所述DIV标签中，得到第一待显示页面数据。
S150，基于所述第一待显示页面数据进行页面的渲染显示。
基于所述第一待显示页面数据进行渲染并显示在浏览器上。
本实施例的技术方案，通过识别所述当前页面源数据中的自定义模板源数据，将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引 用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的渲染显示，能够在可视化页面设计中增加自定义模板，以满足用户的多样的业务需求。
实施例二
图2a为本申请实施例二提供的一种可视化页面渲染方法的流程图，本实施例二在实施例一的基础上进行说明。如图2a所示，所述方法包括：
S210，获取当前页面源数据；其中，所述当前页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据。
S220，从所述多个HTML文件中分别读取模板标识和所述模板标识对应的文件类型。
当前页面源数据包括至少一个自定义模板源数据，还可以包括至少一个常规模板源数据，其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据。对于常规模板数据可以采用相关技术中常规的HTML渲染方法进行渲染显示，但是对于引用了外部资源的自定义模板源数据，由于不同的浏览器的兼容性不同，需要采用不同的渲染方法，以实现快速加载和渲染可视化页面，进而首先需要从当前页面源数据中识别出自定义模板源数据。
采用document.createElement('INPUT')函数获取当前页面源数据的INPUT标签，采用input.id和input.type分别获取模板标识ID和模板ID对应的文件类型。
示例性的，当前页面源数据的INPUT标签为<input id＝"template1"type＝"auto-banner">；<input id＝"template2"type＝"custom-def">。
S230，将所对应的文件类型为目标类型的模板标识确定为自定义模板标识，将所述自定义模板标识对应的HTML文件中的数据确定为自定义模板源数据。
目标类型为自定义模板的类型，类型名称定义为custom-def；若所述模板标识对应的文件类型为custom-def，则确定所述模板标识对应的模板为自定义模板。其中，自定义模板的类型名称可以根据用户需求设定，用于区别自定义模板和其他常规模板，例如滑动模板，轮播模板等。
S240，确定当前浏览器是否支持调用创建文档碎片方法。
通过查询浏览器的兼容模式确定当前浏览器是否支持调用创建文档碎片createContextualFragment方法。在IE10+版本浏览器上支持调用创建文档碎片方法，而IE9版本或者iOS9***及以下版本的浏览器不支持创建文档碎片createContextualFragment方法。若当前浏览器支持调用创建文档碎片方法，则执 行步骤S250～S255；若当前浏览器不支持调用创建文档碎片方法，则执行步骤S260～S263。
S250，若当前浏览器支持调用创建文档碎片方法，则通过调用所述创建文档碎片方法获取所述自定义模板源数据的元素集合，其中，所述创建文档碎片方法用于将所述自定义模板源数据分析为文档碎片DocumentFragment并基于所述文档碎片获得所述自定义模板源数据的元素集合。
通过调用所述创建文档碎片方法获取所述自定义模板源数据的元素集合HTMLCollection，所述HTMLCollection中包含自定义模板源数据的所有根节点标签和元素，根节点标签包括SCRIPT标签、LINK标签和DIV标签。
S251，对所述元素集合进行遍历以确定SCRIPT标签。
对HTMLCollection进行遍历确定SCRIPT标签和所述SCRIPT标签的元素。
S252，加载所述SCRIPT标签所引用的外部资源。
使用node.onload()方法加载所述SCRIPT标签的src属性所引用的外部资源，所述外部资源为采用js格式的封装文件。js文件会有相互依赖，多个js文件在相互依赖的情况下会有加载顺序，该情况就需要使用队列按照从上到下的顺序依次来实现js文件加载。
S253，创建文档分区。
js文件一般数据量较大，在网页中直接上传大文件会面临许多问题，一是，上传时间长，中途一旦出错会导致前功尽弃，二是服务端配置复杂，要考虑接收超大表单和超时问题。若把大文件分割成小片段加载再合并，一旦上传失败只是损失一个分片，不用整个文件重传。因此，调用let docF:DocumentFragment＝document.createDocumentFragment()函数创建至少一个新空白的文档分区，即DocumentFragment。
S254，将所述外部资源依次添加到所述文档分区中。
将所述外部资源依次添加到所述文档分区中。因为文档片段存在于内存中，并不在文档对象模型(Document Object Model，DOM)树中，所以将子元素***到文档分区时不会引起页面回流，以优化性能。
S255，将所述文档分区添加至所述当前页面源数据得到第二待显示页面数据，并基于所述第二待显示页面数据进行页面的渲染显示。
将所述文档分区中的所有子节点通过appendChild添加至所述当前页面源数据得到第二待显示页面数据。这个操作仅发生一个重渲染的操作，而不是每个节点分别被***到文档中，可以避免多次重渲染的操作。
S260，若当前浏览器不支持调用创建文档碎片方法，则触发执行S261中将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中的操作。
若当前浏览器不支持调用创建文档碎片方法，则无法调用所述创建文档碎片方法获取所述自定义模板源数据的元素集合HTMLCollection，因此，发送指令以触发执行将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中的操作，以实现获取所述自定义模板源数据的子节点集合。
S261，将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合。
可选的，所述将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合，包括：
在当前页面源数据中创建DIV标签；将所述自定义模板源数据的根标签元素添加到所述DIV标签中；根据所述根标签元素确定所述DIV标签中的子节点集合。
采用document.createElement("div")函数创建一个空白的DIV标签，调用innerHTML函数将所述自定义模板源数据的根标签元素添加到空白的DIV标签中，确定所述自定义模板源数据的根标签元素的子节点集合childNodes。所述子节点集合包括文本节点和元素节点。
可选的，在所述将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中之前，还包括：
通过正则匹配确定所述自定义模板源数据中的错误单标签；对所述错误单标签进行修改。
对于html、head、body等双标签在自定义模板源数据中是单标签，则无法执行加载。采用正则匹配方法singleRE.test()确定所述自定义模板源数据中的错误单标签，正则表达式为singleRE＝/^<(\w+)\s*\/？>(？:<\/\1>|)$/。对所述错误单标签对应的元素内容后增加错误单标签对应的结束标签，以保证所有的标签为双标签。
S262，获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据。
可选的，所述获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据，包括：
将所述子节点集合转换为子节点数组；遍历所述子节点数组以确定脚本 SCRIPT标签；从服务端获取所述SCRIPT标签所引用的外部资源；将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据。
由于子节点集合childNodes为节点列表，无法使用遍历方法。因此，可以调用Array.prototypr.slice.call将子节点集合childNodes转换为子节点数组，进而通过遍历所述子节点数组以确定脚本SCRIPT标签的src属性，例如可以采用forEach函数实现遍历。通过get请求从服务端获取所述SCRIPT标签的src属性所引用的外部资源，所述外部资源可以为封装为js的文件。采用innerHTML将所述外部资源添加到空白的DIV标签中。若存在多个js文件，则按照外部资源的位置从上至下依次将多个js文件添加到所述DIV标签中，得到第一待显示页面数据。
S263，基于所述第一待显示页面数据进行页面的渲染显示。
如图2b所示，本申请实施例的步骤为：研发人员在可视化编排个人计算机(Personal Computer，PC)端进行模板开发得到常规模板和自定义模板，常规模板和自定义模板的开发，其本质上是HTML文件的开发，常规模板的HTML文件没有引用外部资源，用户可是直接使用常规模板搭建页面，而自定义模板的HTML文件引用了外部资源，需要用户根据需求对自定义模板进行修改后搭建页面。对开发后的常规模板和自定义模板进行数据编码后通过服务端的应用程序接口(Application Programming Interface，API)发送到服务端进行预处理和存储。用户在可视化H5端上需要显示模板所搭建的页面时，从服务端获取待显示页面的常规模板和自定义模板，经过MD5校验和数据解码后对模板源数据进行从上至下的解析和渲染，并显示在浏览器上。对于常规模板可采用常规渲染方法进行解析和渲染，若识别到模板类型为自定义模板，则根据浏览器的版本，即浏览器是否支持调用创建文档碎片createContextualFragment方法采用不同方式对模板源数据进行解析。若浏览器支持调用创建文档碎片createContextualFragmen方法，则采用碎片解析方法对模板源数据进行解析，碎片解析方法的原理为采用createContextualFragmen获取模板源数据的子节点集合HTMLCollection，通过遍历HTMLCollection确定SCRIPT标签，加载SCRIPT标签的SRC属性引用的外部资源，并创建文档分区，将所述外部资源依次添加到所述文档分区中，最终将所述文档分区添加至当前页面源数据得到第二待显示页面数据，并基于所述第二待显示页面数据进行页面的渲染显示。若浏览器支持调用创建文档碎片createContextualFragmen方法，则采用自定义解析方法进行解析，自定义解析方法的原理为将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的 渲染显示。
本实施例的技术方案，通过识别所述当前页面源数据中的自定义模板源数据，将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的渲染显示，能够在可视化页面设计中增加自定义模板，以满足用户的多样的业务需求。并根据浏览器的兼容性对自定义模板进行不同方法的渲染，提高可视化页面的兼容性，实现快速加载和渲染可视化页面。
实施例三
图3为本申请实施例三提供的一种可视化页面渲染装置的结构示意图。本实施例可适用于在HTML5页面中渲染自定义模板的情况，该装置可采用软件和/或硬件的方式实现，该装置可集成在任何提供可视化页面渲染的功能的设备中，如图3所示，所述可视化页面渲染的装置包括：第一获取模块310、识别模块320、第一确定模块330、第一添加模块340和第一显示模块350。
第一获取模块310，设置为获取当前页面源数据；其中，所述当前页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据；识别模块320，设置为识别所述当前页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；第一确定模块330，设置为将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；第一添加模块340，设置为获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；第一显示模块350，设置为基于所述第一待显示页面数据进行页面的渲染显示。
可选的，所述识别模块320，包括：
第一获取单元，设置为获从所述多个HTML文件中分别读取模板标识和所述模板标识对应的文件类型；确定单元，设置为将所对应的文件类型为目标类型的模板标识确定为自定义模板标识，将所述自定义模板标识对应的HTML文件中的数据确定为所述自定义模板源数据。
可选的，所述第一确定模块330，包括：
创建单元，设置为在所述当前页面源数据中创建DIV标签；第一添加单元，设置为将所述自定义模板源数据的根标签元素添加到所述DIV标签中；第一确 定单元，设置为根据所述根标签元素确定所述DIV标签中的子节点集合。
可选的，所述第一添加模块340，包括：
转换单元，设置为将所述子节点集合转换为子节点数组；遍历单元，设置为遍历所述子节点数组以确定脚本SCRIPT标签；第二获取单元，设置为从服务端获取所述SCRIPT标签所引用的外部资源；第二添加单元，设置为将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据。
可选的，所述装置还包括：
匹配模块，设置为在所述将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中之前，通过正则匹配确定所述自定义模板源数据中的错误单标签；修改模块，设置为对所述错误单标签进行修改。
可选的，所述装置还包括：
第二确定模块，设置为在将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中之前，确定当前浏览器是否支持调用创建文档碎片方法；触发模块，设置为若当前浏览器不支持调用创建文档碎片方法，则触发执行将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中的操作。
可选的，所述装置还包括：
第二获取模块，设置为若当前浏览器支持调用创建文档碎片方法，则通过调用所述创建文档碎片方法获取所述自定义模板源数据的元素集合，其中，所述创建文档碎片方法用于将所述自定义模板源数据分析为文档碎片并基于所述文档碎片获得所述自定义模板源数据的元素集合；第三确定模块，设置为对所述元素集合进行遍历以确定SCRIPT标签；加载模块，设置为加载所述SCRIPT标签所引用的外部资源；创建模块，设置为创建文档分区；第二添加模块，设置为将所述外部资源依次添加到所述文档分区中；第二显示模块，设置为将所述文档分区添加至所述当前页面源数据得到第二待显示页面数据，并基于所述第二待显示页面数据进行页面的渲染显示。
上述产品可执行本申请任意实施例所提供的方法，具备执行方法相应的功能模块和效果。
本实施例的技术方案，通过识别所述当前页面源数据中的自定义模板源数据，将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的渲染显示，能够在可视化页 面设计中增加自定义模板，以满足用户的多样的业务需求。并根据浏览器的兼容性对自定义模板进行不同方法的渲染，提高可视化页面的兼容性，实现快速加载和渲染可视化页面。
实施例四
图4为本申请实施例四提供的一种计算机设备的结构示意图。图4示出了适于用来实现本申请实施方式的示例性计算机设备12的框图。图4显示的计算机设备12仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图4所示，计算机设备12以通用计算设备的形式表现。计算机设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，***存储器28，连接不同***组件(包括***存储器28和处理单元16)的总线18。
总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，***总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry Standard Architecture，ISA)总线，微通道体系结构(MicroChannel Architecture，MCA)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及***组件互连(Peripheral Component Interconnect，PCI)总线。
计算机设备12包括多种计算机***可读介质。这些介质可以是任何能够被计算机设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
***存储器28可以包括易失性存储器形式的计算机***可读介质，例如随机存取存储器(Random Access Memory，RAM)30和/或高速缓存32。计算机设备12可以包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例，存储***34可以设置为读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供设置为对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如光盘-只读存储器(Compact Disc Read-Only Memory，CD-ROM)，便携式紧凑磁盘只读存储器(Digital Video Disc-ROM，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。***存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本申 请实施例的功能。
具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如***存储器28中，这样的程序模块42包括——但不限于——操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或一种组合中可能包括网络环境的实现。程序模块42通常执行本申请所描述的实施例中的功能和/或方法。
计算机设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备12交互的设备通信，和/或与使得该计算机设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(Input/Output，I/O)接口22进行。另外，本实施例中的计算机设备12，显示器24不是作为独立个体存在，而是嵌入镜面中，在显示器24的显示面不予显示时，显示器24的显示面与镜面从视觉上融为一体。并且，计算机设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(Local Area Network，LAN)，广域网(Wide Area Network，WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与计算机设备12的其它模块通信。应当明白，尽管图中未示出，可以结合计算机设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、独立冗余磁盘阵列(Redundant Arrays of Independent Disks，RAID)***、磁带驱动器以及数据备份存储***等。
处理单元16通过运行存储在***存储器28中的程序，从而执行多种功能应用以及数据处理，例如实现本申请实施例所提供的可视化页面渲染方法：获取当前页面源数据；其中，所述当前页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据；识别所述当前页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的渲染显示。
实施例五
本申请实施例五提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有申请实施例提供的可视化页面渲染方法：
获取当前页面源数据；其中，所述当前页面源数据包括待显示页面中的多个模块分别对应的多个HTML文件中的数据；识别所述当前页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；将所述自定义模板源数据添加在所述当前页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合；获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；基于所述第一待显示页面数据进行页面的渲染显示。
可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、RAM、ROM、可擦式可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM或闪存)、光纤、CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、射频(Radio Frequency，RF)等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本申请操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括LAN或WAN—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

Claims (10)

  1. 一种可视化页面渲染方法，包括：
    获取页面源数据；其中，所述页面源数据包括待显示页面中的多个模块分别对应的多个超文本标记语言HTML文件中的数据；
    识别所述页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；
    将所述自定义模板源数据添加在所述页面源数据中新创建的区隔DIV标签中，确定所述DIV标签对应的子节点集合；
    获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；
    基于所述第一待显示页面数据进行页面的渲染显示。
  2. 根据权利要求1所述的方法，其中，所述识别所述页面源数据中的自定义模板源数据，包括：
    从所述多个HTML文件中分别读取模板标识和所述模板标识对应的文件类型；
    将所对应的文件类型为目标类型的模板标识确定为自定义模板标识，将所述自定义模板标识对应的HTML文件中的数据确定为所述自定义模板源数据。
  3. 根据权利要求1所述的方法，其中，所述将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中，确定所述DIV标签对应的子节点集合，包括：
    在所述页面源数据中创建所述DIV标签；
    将所述自定义模板源数据的根标签元素添加到所述DIV标签中；
    根据所述根标签元素确定所述DIV标签对应的子节点集合。
  4. 根据权利要求1所述的方法，其中，所述获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据，包括：
    将所述子节点集合转换为子节点数组；
    遍历所述子节点数组以确定脚本SCRIPT标签；
    从服务端获取所述SCRIPT标签所引用的外部资源；
    将所述外部资源添加到所述DIV标签中，得到所述第一待显示页面数据。
  5. 根据权利要求1所述的方法，在所述将所述自定义模板源数据添加在所 述页面源数据中新创建的DIV标签中之前，还包括：
    通过正则匹配确定所述自定义模板源数据中的错误单标签；
    对所述错误单标签进行修改。
  6. 根据权利要求1所述的方法，在所述将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中之前，还包括：
    确定浏览器是否支持调用创建文档碎片方法；
    所述将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中，包括：
    响应于所述浏览器不支持调用所述创建文档碎片方法，触发执行将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中的操作。
  7. 根据权利要求6所述的方法，还包括：
    响应于所述浏览器支持调用所述创建文档碎片方法，通过调用所述创建文档碎片方法获取所述自定义模板源数据的元素集合，其中，所述创建文档碎片方法用于将所述自定义模板源数据分析为文档碎片并基于所述文档碎片获得所述自定义模板源数据的元素集合；
    对所述元素集合进行遍历以确定SCRIPT标签；
    加载所述SCRIPT标签所引用的外部资源；
    创建文档分区；
    将所述外部资源依次添加到所述文档分区中；
    将所述文档分区添加至所述页面源数据得到第二待显示页面数据，并基于所述第二待显示页面数据进行页面的渲染显示。
  8. 一种可视化页面渲染装置，包括：
    第一获取模块，设置为获取页面源数据；其中，所述页面源数据包括待显示页面中的多个模块分别对应的多个超文本标记语言HTML文件中的数据；
    识别模块，设置为识别所述页面源数据中的自定义模板源数据；其中，所述自定义模板源数据是引用了外部资源的HTML文件中的数据；
    第一确定模块，设置为将所述自定义模板源数据添加在所述页面源数据中新创建的区隔DIV标签中，确定所述DIV标签对应的子节点集合；
    第一添加模块，设置为获取所述子节点集合中的标签所引用的外部资源，并将所述外部资源添加到所述DIV标签中，得到第一待显示页面数据；
    第一显示模块，设置为基于所述第一待显示页面数据进行页面的渲染显示。
  9. 一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如权利要求1-7中任一项所述的可视化页面渲染方法。
  10. 一种计算机可读存储介质，存储有计算机程序，其中，所述程序被处理器执行时实现如权利要求1-7中任一项所述的可视化页面渲染方法。
PCT/CN2021/129470 2020-12-31 2021-11-09 可视化页面渲染方法、装置、设备及存储介质 WO2022142743A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
JP2023516608A JP2023541186A (ja) 2020-12-31 2021-11-09 可視化ページレンダリング方法、装置、機器及び記憶媒体
US18/038,054 US20230419016A1 (en) 2020-12-31 2021-11-09 Visualized Page Rendering Method, Device, Equipment, and Storage Medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011634449.5 2020-12-31
CN202011634449.5A CN113158101B (zh) 2020-12-31 2020-12-31 一种可视化页面渲染方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
WO2022142743A1 true WO2022142743A1 (zh) 2022-07-07

Family

ID=76878580

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/129470 WO2022142743A1 (zh) 2020-12-31 2021-11-09 可视化页面渲染方法、装置、设备及存储介质

Country Status (4)

Country Link
US (1) US20230419016A1 (zh)
JP (1) JP2023541186A (zh)
CN (1) CN113158101B (zh)
WO (1) WO2022142743A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115586896A (zh) * 2022-09-29 2023-01-10 通号智慧城市研究设计院有限公司 基于模板引擎的页面项目开发方法、设备及存储介质
CN117331557A (zh) * 2023-10-24 2024-01-02 北京饼干科技有限公司 一种表单渲染方法、装置、介质及设备

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113158101B (zh) * 2020-12-31 2023-09-05 京东科技控股股份有限公司 一种可视化页面渲染方法、装置、设备及存储介质
CN114419197B (zh) * 2021-12-15 2023-03-24 北京力控元通科技有限公司 一种基于svg的功能定义***、方法及计算机设备
CN115392887B (zh) * 2022-10-31 2023-04-18 江西省地质局地理信息工程大队 自然资源一体化平台构建方法、装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106339226A (zh) * 2016-08-26 2017-01-18 南威软件股份有限公司 一种网页页面的展示方法和页面展示插件
CN108279903A (zh) * 2018-02-24 2018-07-13 北京车和家信息技术有限公司 页面展示的方法及装置
CN109101300A (zh) * 2018-06-14 2018-12-28 腾讯科技（深圳）有限公司 一种页面渲染方法、装置及终端
US20200311174A1 (en) * 2019-03-29 2020-10-01 Microsoft Technology Licensing, Llc Content serving service generated html content
CN113158101A (zh) * 2020-12-31 2021-07-23 京东数字科技控股股份有限公司 一种可视化页面渲染方法、装置、设备及存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6553393B1 (en) * 1999-04-26 2003-04-22 International Business Machines Coporation Method for prefetching external resources to embedded objects in a markup language data stream
KR101062215B1 (ko) * 2009-03-24 2011-09-06 엠어트랙션 주식회사 웹 서비스 시스템 및 하이퍼 텍스트 마크업 언어로 제작된 웹페이지에 다양한 형식의 서브 웹페이지를 하이퍼 링크시키는 방법
US20160012023A1 (en) * 2014-07-10 2016-01-14 MyMojo Corporation Self-Referencing of Running Script Elements in Asynchronously Loaded DOM Modules
US20160012147A1 (en) * 2014-07-10 2016-01-14 MyMojo Corporation Asynchronous Initialization of Document Object Model (DOM) Modules

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106339226A (zh) * 2016-08-26 2017-01-18 南威软件股份有限公司 一种网页页面的展示方法和页面展示插件
CN108279903A (zh) * 2018-02-24 2018-07-13 北京车和家信息技术有限公司 页面展示的方法及装置
CN109101300A (zh) * 2018-06-14 2018-12-28 腾讯科技（深圳）有限公司 一种页面渲染方法、装置及终端
US20200311174A1 (en) * 2019-03-29 2020-10-01 Microsoft Technology Licensing, Llc Content serving service generated html content
CN113158101A (zh) * 2020-12-31 2021-07-23 京东数字科技控股股份有限公司 一种可视化页面渲染方法、装置、设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
ANONYMOUS: "Interpretation of Vue3.0 Core Source Code - Component Rendering: How is vnode converted into Real DOM?", 21 December 2020 (2020-12-21), XP055948902, Retrieved from the Internet <URL:www.eggcake.cn/posts/2020-12-21-vue3-core-source-code-1> [retrieved on 20220804] *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115586896A (zh) * 2022-09-29 2023-01-10 通号智慧城市研究设计院有限公司 基于模板引擎的页面项目开发方法、设备及存储介质
CN115586896B (zh) * 2022-09-29 2023-08-04 通号智慧城市研究设计院有限公司 基于模板引擎的页面项目开发方法、设备及存储介质
CN117331557A (zh) * 2023-10-24 2024-01-02 北京饼干科技有限公司 一种表单渲染方法、装置、介质及设备
CN117331557B (zh) * 2023-10-24 2024-05-14 北京饼干科技有限公司 一种表单渲染方法、装置、介质及设备

Also Published As

Publication number Publication date
CN113158101B (zh) 2023-09-05
JP2023541186A (ja) 2023-09-28
US20230419016A1 (en) 2023-12-28
CN113158101A (zh) 2021-07-23

Similar Documents

Publication Publication Date Title
WO2022142743A1 (zh) 可视化页面渲染方法、装置、设备及存储介质
US8572494B2 (en) Framework for development and customization of web services deployment descriptors
US9665256B2 (en) Identifying selected dynamic content regions
US9355081B2 (en) Transforming HTML forms into mobile native forms
JP5148612B2 (ja) 永続保存ポータル
US10565293B2 (en) Synchronizing DOM element references
CN109522018B (zh) 页面处理方法、装置及存储介质
US20140089786A1 (en) Automated Processor For Web Content To Mobile-Optimized Content Transformation
JP2010519611A (ja) アプリケーションベースのコピー・アンド・ペースト操作
US20140281859A1 (en) Enhanced mobilization of existing web sites
CN113126990B (zh) 一种页面开发方法、装置、设备及存储介质
JP2013528859A (ja) クライアントアプリケーションとウェブページの統合
CN110780874B (zh) 用于生成信息的方法和装置
CN112148356A (zh) 文档生成方法、接口开发方法、装置、服务器及存储介质
CN111783004A (zh) 页面嵌入方法、装置及***
CN113495730A (zh) 资源包的生成及解析方法和装置
US9772986B2 (en) Transforming HTML forms into mobile native forms
JP5039946B2 (ja) クライアント装置およびサーバ装置の間の通信を中継する技術
CN112783482B (zh) 一种可视化表单生成方法、装置、设备及存储介质
CN112632425B (zh) 一种离线资源文件的生成方法、装置、设备及存储介质
US20100299626A1 (en) Systems and Methods of Providing Rich User Interface and Animation to Auxiliary Display Devices
CN113419711A (zh) 页面引导方法、装置、电子设备及存储介质
CN111737621A (zh) 基于wasm的ofd渲染方法、***及装置
US20130254157A1 (en) Computer-implemented methods and systems for associating files with cells of a collaborative spreadsheet
US11758016B2 (en) Hosted application as web widget toolkit

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21913486

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2023516608

Country of ref document: JP

Kind code of ref document: A

WWE Wipo information: entry into national phase

Ref document number: 18038054

Country of ref document: US

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21913486

Country of ref document: EP

Kind code of ref document: A1