Page embedding method and related device

Abstract

The application discloses a page embedding method and related equipment. The method comprises the following steps: obtaining a link address of a first page description file and a compiling script corresponding to the first page description file, the compiling script being used for parsing the first page description file, and the first page description file being used for describing a first page; embedding the compiling script in a second page description file, the second page description file being used for describing a second page, and the domain name of the second page being different from that of the first page; obtaining the first page description file based on the link address through the compiling script, embedding description information of the first page description file on the first page into the second page description file to obtain a third page description file, and the third page description file being used for describing the second page after the first page is embedded; and loading the third page description file.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page embedding method and related equipment. Background Technology

[0002] Traditional methods of opening web pages require loading Hyper Text Markup Language (HTML) files, Cascading Style Sheets (CSS), and JavaScript (JS) scripts. Generally, a specific web domain address will open a specific page and related resource links, and one web domain address points to one page.

[0003] In related technologies, embedding one page within another requires the use of an iframe. However, with iframes, the embedded page remains within its original domain environment, isolated from the domain environment of the embedding page. This results in extremely poor navigation, login status, and user experience between the embedded and recursive pages. Furthermore, interaction between the two pages requires postMessage, making it extremely inconvenient to use. Summary of the Invention

[0004] The purpose of this application is to provide a page embedding method and related device, which can realize page embedding by loading the embedded page locally into the embedded page, thereby avoiding the problem of isolation between the domain environment of the embedded page and the domain environment of the embedded page.

[0005] To achieve the above objectives, the embodiments of this application adopt the following technical solutions:

[0006] In a first aspect, embodiments of this application provide a page embedding method, including:

[0007] Obtain the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page.

[0008] The compilation script is embedded in the second page description file, which is used to describe the second page, and the domain name of the second page is different from that of the first page.

[0009] The compilation script obtains the first page description file based on the link address, and embeds the description information of the first page in the first page description file into the second page description file to obtain a third page description file. The third page description file is used to describe the second page after the first page is embedded.

[0010] Load the third page description file.

[0011] Secondly, embodiments of this application provide a page embedding device, including:

[0012] The acquisition unit is used to acquire the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page.

[0013] The first embedding unit is used to embed the compilation script in the second page description file, the second page description file is used to describe the second page, and the domain name of the second page is different from the domain name of the first page;

[0014] The second embedding unit is used to obtain the first page description file based on the link address through the compilation script, and to embed the description information of the first page in the first page description file into the second page description file to obtain a third page description file, wherein the third page description file is used to describe the second page after the first page is embedded.

[0015] The loading unit is used to load the third page description file.

[0016] Thirdly, embodiments of this application provide an electronic device, including: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement the method as described in the first aspect.

[0017] Fourthly, embodiments of this application provide a computer-readable storage medium that, when instructions in the storage medium are executed by a processor of an electronic device, enables the electronic device to perform the method described in the first aspect.

[0018] The above-mentioned at least one technical solution adopted in the embodiments of this application can achieve the following beneficial effects: by embedding a pre-written compilation script for parsing the first page description file into the second page, the compilation script can simulate the effect of a browser loading the first page description file, loading the description information of the first page in the first page description file into the local embedded domain, and merging it with the second page description file into a single page description file. Thus, by loading the merged page description file, the localized display of the first page can be achieved. As a result, the second page and its embedded first page are in the same domain environment, breaking down the cross-domain restrictions between the original domain and the embedded domain. The first page in the original domain can seamlessly execute its original logic within the embedded domain, facilitating interactive operations between the second page and its embedded first page within the embedded domain, and realizing the rapid integration and development of business between the original domain and the embedded domain. Attached Figure Description

[0019] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0020] Figure 1 This is a schematic diagram illustrating page embedding via Iframe in related technologies;

[0021] Figure 2 A schematic diagram illustrating a page embedding method according to an embodiment of this application;

[0022] Figure 3 A flowchart illustrating a page embedding method provided in one embodiment of this application;

[0023] Figure 4 A schematic diagram of a page embedding device provided in one embodiment of this application;

[0024] Figure 5 This is a schematic diagram of the structure of an electronic device provided in one embodiment of this application. Detailed Implementation

[0025] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0026] The terms "first," "second," etc., used in this specification and claims are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein. Furthermore, in this specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0027] Explanation of some concepts:

[0028] HTML, short for Hypertext Markup Language, is a markup language. It consists of a series of tags that unify the formatting of documents on the web, connecting disparate online resources into a logical whole. HTML text is descriptive text composed of HTML commands, which can specify text, graphics, animations, sounds, tables, links, etc.

[0029] Hypertext is a way of organizing information that uses hyperlinks to link text, icons, and other information media within a text file. These linked information media may be within the same text, other files, or files on geographically distant computers. This method of organizing information connects information resources distributed in different locations in a random manner, making it convenient for people to find and retrieve information.

[0030] CSS, short for Cascading Style Sheets, is a computer language used to style HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language) documents. CSS can not only statically format web pages, but also dynamically format elements on a webpage in conjunction with various scripting languages. CSS allows for pixel-level precise control over the layout and positioning of elements on a webpage, supports almost all font sizes and styles, and has the ability to edit the styles of webpage objects and models.

[0031] JavaScript (JS) is a lightweight, interpreted or just-in-time (JIT) programming language with a function-first approach. While it's best known as a scripting language for developing web pages, it's also used in many non-browser environments. JavaScript is a prototype-based, multi-paradigm dynamic scripting language that supports object-oriented, imperative, declarative, and functional programming paradigms. JavaScript was first designed and implemented in 1995 by Brendan Eich of Netscape for the Netscape Navigator browser. Because Netscape collaborated with Sun, Netscape management wanted it to look like Java, hence the name JavaScript. However, its syntax is actually closer to Self and Scheme. The standard for JavaScript is ECMAScript. As of 2012, all browsers fully supported ECMAScript 5.1, and older browsers supported at least ECMAScript 3. On June 17, 2015, the ECMA International organization released the sixth edition of ECMAScript, officially named ECMAScript 2015, but commonly referred to as ECMAScript 6 or ES2015.

[0032] iframe: This is an HTML tag that acts as a document within a document, or a floating frame. The iframe element creates an inline frame (i.e., an inline frame) that contains another document.

[0033] A domain name, also known as a network domain, is a string of names separated by dots on the Internet, used to identify a computer or group of computers during data transmission (sometimes also referring to geographical location). Because Internet Protocol (IP) addresses are inconvenient to remember and cannot display the name and nature of the address organization, domain names were designed. The Domain Name System (DNS) maps domain names to IP addresses, making it easier for people to access the Internet without having to remember strings of numbers that can be directly read by machines.

[0034] Vue: Vue (pronounced / vju: / , similar to "view") is a JavaScript framework for building user interfaces. It's built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model to help you develop user interfaces efficiently. Whether the interface is simple or complex, Vue can handle it.

[0035] CDN (Content Delivery Network): A virtual distributed network built on top of a carrier network, it intelligently caches content (including various dynamic and static resources) from the origin server to servers on nodes around the world. This not only makes it easier for users to access content from the nearest location and improves resource access speed, but also reduces the pressure on the origin server.

[0036] Webpack is a code compilation tool with an entry point, an exit point, loaders, and plugins. Webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it internally builds a dependency graph that maps to each module needed by the project and generates one or more bundles, which are static resources used to display your content.

[0037] CORS: Cross-Origin Resource Sharing. CORS is a new W3C standard that adds a set of HTTP header fields that allow servers to declare which origin servers have permission to access which resources. In other words, it allows browsers to send XMLHttpRequest requests to cross-origin servers that have declared CORS, thus overcoming the limitation that Ajax can only be used within the same origin.

[0038] DOM (Document Object Model): The DOM allows you to access and modify a document's content and structure in a platform- and language-independent way. In other words, it's a common method for representing and manipulating HTML.

[0039] As described in the background section, in related technologies, embedding one page within another requires the use of an iframe. However, when embedding pages using an iframe, the embedded page remains within its original domain environment, isolated from the domain environment of the embedding page. This results in extremely poor navigation, login status, and user experience between the embedded and reverting pages, and the interaction between them requires using postMessage, which is extremely inconvenient.

[0040] For example, such as Figure 1 As shown, in related technologies, if a first page is to be embedded into a second page, it is necessary to use an iframe to create an inline frame of the first page's HTML file within the second page's HTML file (i.e., ...). Figure 1The "iframe-originating-domain" in the code refers to the frame within the first page. The browser then parses the HTML file of the first page and sets the resource references (Source, src) of the inline frame to the content of the first page's HTML file, such as DOM nodes, JavaScript scripts, CSS stylesheets, and static resources. This allows the first page to be embedded within the second page. However, the first page after embedding the second page still belongs to the original domain, while the second page belongs to the embedded domain. The domain environments of the two pages remain isolated. This results in extremely poor navigation, login status, and user experience between the second page and the embedded first page. Furthermore, interaction between the second page and the embedded first page requires using `postMessage`, which is extremely inconvenient.

[0041] In view of this, the embodiments of this application aim to propose a page embedding method. This method involves embedding a pre-written compilation script, WebTransplant.js, used to parse a first page description file (such as the HTML file of the first page), into a second page. This compilation script, based on the page loading method loadWeb, simulates the effect of a browser loading the first page description file, loading the description information of the first page (such as DOM nodes, JS scripts, CSS stylesheets, and static resources) into the local embedded domain. This information is then integrated with the second page description file into a single page description file, thereby enabling the localized display of the first page. Consequently, the second page and its embedded first page are within the same domain environment, breaking down cross-domain restrictions between the original and embedded domains. The first page in the original domain can seamlessly execute its original logic within the embedded domain, facilitating interactive operations between the second page and its embedded first page within the embedded domain. This enables rapid integration and development of business processes between the original and embedded domains.

[0042] It should be understood that the page embedding methods proposed in the embodiments of this application can all be executed by electronic devices or software installed in electronic devices. The electronic devices referred to herein may include terminal devices, such as smartphones, tablets, laptops, desktop computers, smart voice interaction devices, smart home appliances, smartwatches, vehicle terminals, aircraft, etc.; or, the electronic devices may also include servers, such as independent physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers providing cloud computing services.

[0043] The technical solutions provided by the various embodiments of this application are described in detail below with reference to the accompanying drawings.

[0044] Please see Figure 3 The following is a flowchart illustrating a page embedding method according to an embodiment of this application. The method may include the following steps:

[0045] S302, obtain the link address of the first page description file and the compilation script corresponding to the first page description file.

[0046] The first page description file describes the first page. It includes descriptive information about the first page, such as, but not limited to, at least one of the following: DOM nodes, CSS nodes, JS nodes, CSS linked resources, script linked resources, and static resources of the first page. For example, the first page description file can be the HTML file of the first page. This HTML file is descriptive text composed of HTML commands, which can describe text, graphics, animations, sounds, tables, links, etc. The structure of the HTML file includes a header and a body (if the body is large), where the header describes the information required by the browser, and the body contains the specific content to be described.

[0047] In practical applications, the link address of the first page description file (FBML) indicates its storage location. Specifically, the FBML can be stored on a storage server, such as a Content Delivery Network (CDN), so that it can be used by different browsers, achieving write-once, reuse-many functionality. In this case, the link address of the FBML is its storage address on the storage server.

[0048] The compilation script corresponding to the first page description file is used to parse the first page description file. Specifically, this compilation script contains a page loading method, such as loadWeb. By passing the link address of the first page description file to the page loading method in this compilation script, the page loading method can be triggered to retrieve the first page description file from the storage server based on the link address. Afterwards, the compilation script can parse the content of the first page description file to obtain the description information of the first page and embed it into the second page description file.

[0049] S304, embed the compilation script corresponding to the first page description file into the second page description file.

[0050] The second page description file is used to describe the second page. For example, the second page description file can be the HTML file of the second page. This HTML file is descriptive text composed of HTML commands, which can describe text, graphics, animations, sounds, tables, links, etc. The structure of the HTML file includes a header and a body (if there are many parts). The header describes the information required by the browser, while the body contains the specific content to be described.

[0051] The domain name of the second page is different from that of the first page. For example, such as... Figure 2 As shown, the first page refers to the embedded page, whose domain name is called the original domain; the second page refers to the embedded page, whose domain name is called the embedded domain. The original domain and the embedded domain belong to two different domains.

[0052] To achieve localized display of the first page within the embedded domain's second page, the compilation script corresponding to the first page's description file can be embedded into the second page's description file. In this way, the compilation script can parse the first page's description file locally within the embedded domain and load the description information of the first page into the embedded domain, merging it with the second page's description file into a single page description file. This enables the first page to be displayed locally within the embedded domain, meaning that the second page and its embedded first page are in the same domain environment, thus overcoming cross-domain restrictions between the original domain and the embedded domain.

[0053] Specifically, in S304 above, a script tag can be inserted into the second page description file, and the file name and path of the compilation script can be written in the script tag, thereby enabling the compilation script to be introduced into the second page.

[0054] S306, the first page description file is obtained by compiling the script based on the link address, and the description information of the first page in the first page description file is embedded into the second page description file to obtain the third page description file.

[0055] The third page description file is used to describe the second page that is embedded after the first page.

[0056] Specifically, the page loading method loadWeb of the above-mentioned compiled script can be called in the second page of the embedded domain. The link address of the first page description file is passed as a parameter to the page loading method. The page loading method will simulate the page loading process of the browser, load the first page description file and parse it to obtain the description information of the first page, and then embed the description information of the first page into the second page description file.

[0057] In this embodiment of the application, in order to ensure the embedding effect of the first page in the second page, different descriptive information can be embedded into the second page description file in different ways. The following describes the method of embedding each type of descriptive information into the second page description file.

[0058] For the embedding of the Document Object Model (DOM) nodes of the first page, S306 above may include: calling the page loading method in the above-mentioned compilation script to parse the first page description file, obtain the DOM nodes of the first page, and embedding the DOM nodes of the first page into the body node of the second page description file.

[0059] The Body node in the second page description file defines the body of the second page, which contains all the content of the second page, such as text, hyperlinks, images, tables, and lists.

[0060] For example, prior to S306 above, the location of the embedded area in the description file of the second page can be entered according to the embedded area in the first page and the second page. <web-transplant>< / web-transplant> Tags; Correspondingly, in S306 above, by calling the page loading method loadWeb in the above compilation script to parse the first page description file, the first page description file can be obtained. <div id＝"webtransplantapp"> The content within the `` tag represents the DOM node information of the first page. This DOM node information is then retrieved and compared with the information in the description file of the second page. <web-transplant>< / web-transplant> If the tags are replaced uniformly, then the DOM nodes of the first page will be embedded into the description file of the second page.

[0061] For embedding the Cascading Style Sheets (CSS) nodes of the first page, S306 above may include: calling the page loading method in the compilation script to parse the first page description file, obtaining the CSS nodes of the first page, and embedding the CSS nodes of the first page into the page (Header) node of the second page description file. The Header node of the second page description file is used to define the header (introduction information) of the second page.

[0062] For example, by calling the page loading method loadWeb in the above compilation script to parse the first page description file, the text content within the tags of the first page description file can be obtained. This text content contains the CSS nodes of the first page. Furthermore, the document.head.appendChild() method in the above compilation script can be called to add the CSS nodes of the first page to the second page description file for parsing the styles of the second page.

[0063] For embedding the script node of the first page, S306 above may include: calling the page loading method in the compiled script to parse the first page description file, obtaining the script node of the first page, and embedding the script node of the first page into the body node of the second page description file. The script node of the first page is used to define the client-side script of the first page, such as a JavaScript script. This client-side script executes when the first page is loaded to implement common page functions, such as image manipulation, form validation, and dynamic content updates.

[0064] For example, calling the `loadWeb` method in the above compilation script to parse the first page description file will yield the first page description file. <script>< / script> The text content within the tag is the webpack modular static client-side script of the first page; further, the webpack modular static client-side script of the first page is put into a list, and then the list is traversed in order to retrieve the client-side scripts and add them to the description file of the second page.

[0065] For the Cascading Style Sheets (CSS) link resource loaded by the domain name of the first page, S306 above may include: calling the page loading method in the above-mentioned compilation script to parse the external style sheet tag of the first page description file to obtain the CSS link resource loaded by the domain name of the first page; then, creating a new external style sheet tag and pointing the hypertext reference (href) attribute of the new external style sheet tag to the CSS link resource to obtain the target external style sheet tag; finally, embedding the target external style sheet tag into the header node of the second page description file.

[0066] For example, in the HTML first page description file, the external stylesheet is marked with a `<link>` tag, which defines the relationship between the first page and external resources to link to an external stylesheet. For instance, <link rel＝"stylesheet"type＝”text css"href＝" html csstest1.css”> The `rel` property specifies the relationship between the first page and its CSS linked resources, the `type` property specifies the MIME type of the CSS linked resources, and the `href` property specifies the location of the CSS linked resources.

[0067] Accordingly, in S306 above, the page loading method loadWeb in the above compilation script is called to parse the first page description file, which can obtain the text content in the link tag of the first page description file and obtain the CSS link resource loaded from the original domain (i.e., the domain name of the first page); then, a new link tag is created and the href attribute of the new link tag is set to the CSS link resource to obtain the target link tag; finally, the target link tag is embedded into the Header node of the second page description file.

[0068] For the script link resources loaded by the domain name of the first page, S306 above may include: calling the page loading method in the compilation script to parse the external script tags of the first page description file to obtain the link resource table loaded by the domain name of the first page, which includes at least one script link resource loaded by the domain name of the first page; then, traversing the link resource table, creating a new external script tag for each script link resource traversed, and pointing the src attribute of the new external script tag to the currently traversed script link resource to obtain the target external script tag; further, embedding the target external script tag into the body node of the second page description file; after the target external script tag is embedded, continuing to traverse the next script link resource.

[0069] For example, in the HTML format first page description file, the external stylesheet tag is a script tag, which can point to an external script file via the src attribute. In S306 above, the page loading method loadWeb in the above-mentioned compilation script is called to parse the first page description file, and the first page description file can be obtained. <script src"">< / script> The text content within the tag contains at least one script link resource loaded from the original domain (i.e., the domain name of the first page). These script link resources are placed into a list to obtain a link resource table. Further, the link resource table is traversed in a predetermined order. For each script link resource encountered, a new external script tag is created, and its `src` attribute is set to the currently encountered script link resource, resulting in a target external script tag. This target external script tag is then embedded into the `Body` node of the second page's description file. After the target external script tag is embedded, the traversal continues to the next script link resource. Accordingly, during page load, the next script link resource is loaded only after the previous one has been loaded, thus simulating the effect of a browser parsing script link resources online.

[0070] For embedding static resources on the first page, S306 above may include: calling the page loading method in the compilation script to parse the first page description file, obtaining the static resources of the first page and the addresses of the static resources; if the address of the static resource is an absolute address, then referencing the address of the static resource in the second page description file, wherein the absolute address refers to the storage address of the static resource in the storage server; if the address of the static resource is a relative address, then converting the address of the static resource to an absolute address, and referencing the absolute address in the second page description file, wherein the relative address refers to the address of the static resource relative to the root directory where the first page description file is located.

[0071] For example, by calling the page loading method `loadWeb` in the above compilation script, the browser can be simulated to parse the content of the first page description file within the `loadWeb` method to obtain the address of the static resources of the first page. If the address is an absolute address, such as a link address starting with `http` in the CDN, then the absolute address is directly referenced in the second page description file. If the address is a relative address, such as an address relative to the root directory where the first page description file is located, where the static resource is packaged and uniformly starts with `. / ` or ` / `, then the `replace` method is used to globally replace the address with an absolute address, such as a link address starting with `http` in the CDN, and then the absolute address is referenced in the second page description file.

[0072] S308, Load the third page description file.

[0073] Since the third page description file describes the second page after it is embedded in the first page, the effect of embedding the first page in the second page can be achieved by loading the third page description file.

[0074] In this embodiment of the application, the first page description file and its link address can be obtained in any appropriate way, and the specific method can be selected according to actual needs. This embodiment of the application does not limit this.

[0075] Optionally, in order to achieve the containerized display effect of the first page locally in the embedded domain, the first page description file and its link address can be obtained in the following way: First, write the single-page application corresponding to the first page; then, package the single-page application into a static HTML file as the first page description file; further, upload the first page description file to the storage server to obtain the link address of the first page description file.

[0076] For example, the single-page application corresponding to the first page can be a Vue-based single-page application used to display the first page in a browser. Various existing Vue-based page application development technologies can be used to develop such single-page applications, and this embodiment does not limit this approach. Afterwards, the single-page application can be packaged into a static HTML file using webpack and uploaded to a storage server to obtain the corresponding link address.

[0077] The Vue framework can be used to mount single-page applications, as shown below:

[0078] A Vue application instance will only be rendered after the `.mount()` method is called. The `.mount()` method accepts a "container" parameter, which can be an actual DOM element or a CSS selector string:

[0079] <div id＝"webtransplantapp">

[0080] app.mount('#webTransplantApp')

[0081] The content of the application's root component will be rendered inside the container element. The container element itself will not be considered part of the application.

[0082] The `.mount()` method is always called after the entire application configuration and resource registration are complete. Also, unlike other resource registration methods, its return value is the root component instance, not the application instance.

[0083] Root component template in the DOM #

[0084] When using Vue without a build process, you can write the root component template directly in the mount container:

[0085]

[0086] When the root component does not have the `template` option set, Vue will automatically use the container's `innerHTML` as the template.

[0087] The above describes how to mount a single-page application.

[0088] In this embodiment, the compilation script corresponding to the first page description file can be written in any appropriate way, and the specific choice can be made according to actual needs. This embodiment does not limit this. Optionally, the compilation script corresponding to the first page description file can be written based on an asynchronous request method so as to use the native JavaScript XMLHTTPRequest object to interact with the storage server and obtain and parse the first page description file. For example, the asynchronous request method can be an AJAX request method.

[0089] For example, first write the AJAX request method, as follows:

[0090]

[0091]

[0092] / / datat should be a string format like 'a=a1&b=b1'. In jQuery, if data is an object, it will automatically be converted to this string format.

[0093]

[0094] Next, the pre-defined `msManages_Ajax.get(url)` method is further encapsulated with the `loadWeb(url)` method. This completes the writing of the compilation script corresponding to the first page description file.

[0095] By passing the link address of the first page description file to the loadWeb(url) method using the above compilation script, the first page description file returned by the storage server can be received. Furthermore, within loadWeb(url), the browser can be simulated to parse the content of the first page description file, obtain the description information of the first page, and embed it into the second page description file.

[0096] Optionally, the written single-page application may include multiple single-page applications corresponding to multiple first pages, and each first page description file corresponding to a first page has a corresponding link address. Accordingly, after obtaining the link addresses of the first page description files corresponding to each first page, the page embedding method provided in this application embodiment may further include: generating dynamic variables based on the link addresses of the first page description files corresponding to multiple first pages. Accordingly, the above S306 may include: based on the dynamic variables, traversing the link addresses of the first page description information corresponding to multiple first pages, calling the above compilation script based on the currently traversed link address, obtaining the first page description file to which the currently traversed link address belongs, and embedding the description information of the first page description file to which the currently traversed link address belongs into the second page description file to obtain the corresponding third page description file. Further, the above S308 may include: loading the currently obtained third page description file to embed the first page described by the first page description file to which the currently traversed link address belongs into the second page.

[0097] For example, the link addresses of all first-page description files corresponding to the first pages can be recorded in the database of the second page and configured as a dynamic variable. This dynamic variable can then be used as a parameter to call the page loading method `loadWeb` in the aforementioned compilation script. The page loading method sequentially retrieves the first-page description file corresponding to each first page, parses it to obtain the description information for that first page, and then embeds this description information into the second-page description file. Loading the second-page description file then embeds the first page into the second page. The page loading method then retrieves the first-page description file corresponding to the next first page and repeats the above operation until all first pages are embedded. Thus, the embedded domain locally displays the effect of dynamically embedding multiple first pages sequentially within the second page, achieving a local containerized display effect for multiple first pages within the second page. Compared to the method of embedding pages using Iframes in related technologies, this method eliminates the need to change the first-page description file in the second-page description file each time to open different first pages, making it more convenient.

[0098] Optionally, after writing the single-page application corresponding to the first page, the page embedding method provided in this application embodiment may further include: sending a sharing enable request to the application server called by the single-page application, wherein the sharing enable request is used to request the application server to enable cross-source resource sharing.

[0099] It is understandable that, since single-page applications call the application server (or business server) of the single-page application during the development process, by requesting the application server to enable Cross-Origin Resource Sharing (CORS), the second page, after embedding the first page corresponding to the single-page application, can also call the application server to implement the corresponding business.

[0100] One or more embodiments of this application provide a page embedding method that embeds a pre-written compilation script for parsing a first page description file into a second page. This compilation script can simulate the effect of a browser loading the first page description file, loading the description information of the first page from the first page description file into the local embedding domain, and merging it with the second page description file into a single page description file. By loading this merged page description file, the first page can be displayed locally. As a result, the second page and its embedded first page are in the same domain environment, breaking down the cross-domain restrictions between the original domain and the embedded domain. The first page in the original domain can seamlessly execute its original logic within the embedded domain, facilitating interactive operations between the second page and its embedded first page within the embedded domain, and enabling rapid integration and development of business between the original domain and the embedded domain.

[0101] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0102] In addition, with the above Figure 3 Corresponding to the page embedding method shown, this application embodiment also provides a page embedding device. Please refer to... Figure 4 The following is a schematic diagram of the structure of a page embedding device 400 provided in one embodiment of this application. The device 400 includes:

[0103] The acquisition unit 410 is used to acquire the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page.

[0104] The first embedding unit 420 is used to embed the compilation script in the second page description file, the second page description file is used to describe the second page, and the domain name of the second page is different from the domain name of the first page;

[0105] The second embedding unit 430 is used to obtain the first page description file based on the link address through the compilation script, and to embed the description information of the first page in the first page description file into the second page description file to obtain a third page description file, wherein the third page description file is used to describe the second page after the first page is embedded.

[0106] Loading unit 440 is used to load the third page description file.

[0107] Optionally, the device further includes:

[0108] The writing unit is used to write a single-page application corresponding to the first page before the acquisition unit obtains the link address of the first page description file and the compilation script corresponding to the first page description file.

[0109] The packaging unit is used to package the single-page application into a static hypertext markup language file to obtain the first page description file;

[0110] An upload unit is used to upload the first page description file to a storage server and obtain the link address of the first page description file.

[0111] The writing unit is also used to write the compilation script corresponding to the first page description file based on the asynchronous request method.

[0112] Optionally, the written single-page application includes multiple single-page applications corresponding to the first page, and the first page description file corresponding to each first page has a corresponding link address;

[0113] The device further includes:

[0114] The variable generation unit is used to generate dynamic variables based on the link addresses of the first page description files corresponding to the multiple first pages after the upload unit obtains the link address of the first page description file.

[0115] The second embedding unit is specifically used for:

[0116] Based on the dynamic variables, the link addresses of the first page description information corresponding to the multiple first pages are traversed. The compilation script is called to obtain the first page description file to which the currently traversed link address belongs based on the currently traversed link address, and to embed the description information of the first page description file to which the currently traversed link address belongs into the second page description file to obtain the corresponding third page description file.

[0117] The loading unit is specifically used to load the currently obtained third page description file.

[0118] Optionally, the device further includes:

[0119] The sending unit is configured to send a sharing enable request to the application server called by the single-page application after the writing unit has written the single-page application corresponding to the first page. The sharing enable request is used to request the application server to enable cross-origin resource sharing.

[0120] Optionally, the description information of the first page includes the document object model node of the first page;

[0121] The second embedding unit embeds the description information of the first page from the first page description file into the second page description file, including:

[0122] The page loading method in the compilation script is called to parse the first page description file, obtain the document object model node of the first page, and embed the document object model node into the body node of the second page description file.

[0123] Optionally, the description information of the first page includes the Cascading Style Sheets (CSS) node of the first page;

[0124] The second embedding unit embeds the description information of the first page from the first page description file into the second page description file, including:

[0125] The page loading method in the compilation script is called to parse the first page description file, obtain the Cascading Style Sheet (CSS) node of the first page, and embed the CSS node into the header node of the second page description file.

[0126] Optionally, the description information of the first page includes the script nodes of the first page;

[0127] The second embedding unit embeds the description information of the first page in the first page description file into the second page description file, including: calling the page loading method in the compilation script to parse the first page description file, obtaining the script node of the first page, and embedding the script node into the main node of the second page description file.

[0128] Optionally, the description information of the first page includes the cascading style sheet link resources loaded by the domain name of the first page;

[0129] The second embedding unit embeds the description information of the first page from the first page description file into the second page description file, including:

[0130] The page loading method in the compilation script is called to parse the external style sheet tags of the first page description file and obtain the cascading style sheet link resources loaded by the domain name of the first page.

[0131] Create a new external stylesheet tag and set the hypertext reference attribute of the new external stylesheet tag to the Cascading Style Sheets link resource to obtain the target external stylesheet tag;

[0132] The target external stylesheet tag is embedded into the header node of the second page description file.

[0133] Optionally, the description information of the first page includes script link resources loaded by the domain name of the first page;

[0134] The second embedding unit embeds the description information of the first page from the first page description file into the second page description file, including:

[0135] The page loading method in the compilation script is called to parse the external script tags of the first page description file to obtain the link resource table loaded by the domain name of the first page. The link resource table includes at least one script link resource loaded by the domain name of the first page.

[0136] Traverse the linked resource table. For each script link resource encountered, create a new external script tag and set the resource reference attribute of the new external script tag to the currently traversed script link resource to obtain the target external script tag.

[0137] Embed the target external link script tag into the main node of the second page description file;

[0138] After the target external link script tag is embedded, continue to traverse the next script link resource.

[0139] Optionally, the description information of the first page includes the static resources of the first page;

[0140] The second embedding unit embeds the description information of the first page from the first page description file into the second page description file, including:

[0141] The page loading method in the compilation script is called to parse the first page description file and obtain the static resources of the first page and the address of the static resources;

[0142] If the address of the static resource is an absolute address, then the address of the static resource is referenced in the second page description file, where the absolute address refers to the storage address of the static resource in the storage server;

[0143] If the address of the static resource is a relative address, then the address of the static resource is converted to the absolute address, and the absolute address is referenced in the second page description file. The relative address refers to the address of the static resource relative to the root directory where the first page description file is located.

[0144] Obviously, the page embedding device in this application embodiment can be used as described above. Figure 3 The execution body of the page embedding method shown can therefore implement the page embedding method in Figure 3 The functions implemented are the same, so they will not be described in detail here.

[0145] Figure 5 This is a schematic diagram of the structure of an electronic device according to an embodiment of this application. Please refer to it. Figure 5 At the hardware level, the electronic device includes a processor, and optionally also includes an internal bus, a network interface, and memory. The memory may include main memory, such as high-speed random-access memory (RAM), or non-volatile memory, such as at least one disk drive. Of course, the electronic device may also include other hardware required for other business operations.

[0146] The processor, network interface, and memory can be interconnected via an internal bus, which can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. This bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 5 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0147] Memory is used to store programs. Specifically, programs may include program code, which includes computer operation instructions. Memory may include main memory and non-volatile memory, and provides instructions and data to the processor.

[0148] The processor reads the corresponding computer program from non-volatile memory into main memory and then runs it, forming a page embedding device at the logical level. The processor executes the program stored in memory and specifically performs the following operations:

[0149] Obtain the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page.

[0150] The compilation script is embedded in the second page description file, which is used to describe the second page, and the domain name of the second page is different from that of the first page.

[0151] The compilation script obtains the first page description file based on the link address, and embeds the description information of the first page in the first page description file into the second page description file to obtain a third page description file. The third page description file is used to describe the second page after the first page is embedded.

[0152] Load the third page description file.

[0153] The above is as stated in this application. Figure 3The method executed by the page embedding device disclosed in the illustrated embodiment can be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method can be completed by integrated logic circuits in the processor's hardware or by instructions in software form. The processor can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in the embodiments of this application can be directly embodied in the execution of a hardware decoding processor, or executed by a combination of hardware and software modules in the decoding processor. The software module can reside in a mature storage medium in the field, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory, and the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the above method.

[0154] The electronic device can also perform Figure 3 The method, and implement the page embedding device in Figure 3 The functions of the embodiments shown will not be repeated here. Of course, in addition to software implementation, the electronic device of this application does not exclude other implementation methods, such as logic devices or a combination of hardware and software, etc. That is to say, the execution subject of the following processing flow is not limited to each logic unit, but can also be hardware or logic devices.

[0155] This application also proposes a computer-readable storage medium that stores one or more programs, the programs including instructions that, when executed by a portable electronic device including multiple applications, enable the portable electronic device to perform... Figure 3 The method of the illustrated embodiment is specifically used to perform the following operations:

[0156] Obtain the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page.

[0157] The compilation script is embedded in the second page description file, which is used to describe the second page, and the domain name of the second page is different from that of the first page.

[0158] The compilation script obtains the first page description file based on the link address, and embeds the description information of the first page in the first page description file into the second page description file to obtain a third page description file. The third page description file is used to describe the second page after the first page is embedded.

[0159] Load the third page description file.

[0160] In summary, the above description is merely a preferred embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.

[0161] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, a computer can be, for example, a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email device, game console, tablet computer, wearable device, or any combination of these devices.

[0162] 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 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.

[0163] 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 a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0164] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to interchangeably. Each embodiment focuses on describing the differences from other embodiments. In particular, the system embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments.

Claims

1. A page embedding method, characterized in that, include: Obtain the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page. The compilation script is embedded in the second page description file, which is used to describe the second page, and the domain name of the second page is different from that of the first page. The compilation script obtains the first page description file based on the link address, and embeds the description information of the first page in the first page description file into the second page description file to obtain a third page description file. The third page description file is used to describe the second page after the first page is embedded. Load the third page description file.

2. The method according to claim 1, characterized in that, Before obtaining the link address of the first page description file and the compilation script corresponding to the first page description file, the method further includes: Write the single-page application corresponding to the first page; The single-page application is packaged into a static hypertext markup language file to obtain the first page description file; Upload the first page description file to the storage server to obtain the link address of the first page description file; Based on the asynchronous request method, write the compilation script corresponding to the first page description file.

3. The method according to claim 2, characterized in that, The single-page application being developed includes multiple single-page applications corresponding to a first page, and each first page has a corresponding link address in its first page description file. After obtaining the link address of the first page description file, the method further includes: generating dynamic variables based on the link addresses of the first page description files corresponding to the multiple first pages respectively; The step of obtaining the first page description file based on the link address through the compilation script and embedding the description information of the first page in the first page description file into the second page description file to obtain the third page description file includes: based on the dynamic variable, traversing the link addresses of the first page description information corresponding to the plurality of first pages respectively, calling the compilation script based on the currently traversed link address to obtain the first page description file to which the currently traversed link address belongs, and embedding the description information of the first page description file to which the currently traversed link address belongs into the second page description file to obtain the corresponding third page description file; Loading the third page description file includes: loading the currently obtained third page description file.

4. The method according to claim 2, characterized in that, After developing the single-page application corresponding to the first page, the method further includes: A sharing enable request is sent to the application server invoked by the single-page application. The sharing enable request is used to request the application server to enable cross-origin resource sharing.

5. The method according to claim 1, characterized in that, The description information of the first page includes the document object model node of the first page; Embedding the description information of the first page in the first page description file into the second page description file includes: The page loading method in the compilation script is called to parse the first page description file, obtain the document object model node of the first page, and embed the document object model node into the body node of the second page description file.

6. The method according to claim 1, characterized in that, The description information of the first page includes the Cascading Style Sheets (CSS) node of the first page; Embedding the description information of the first page in the first page description file into the second page description file includes: The page loading method in the compilation script is called to parse the first page description file, obtain the Cascading Style Sheet (CSS) node of the first page, and embed the CSS node into the header node of the second page description file.

7. The method according to claim 1, characterized in that, The description information of the first page includes the script nodes of the first page; Embedding the description information of the first page in the first page description file into the second page description file includes: The page loading method in the compilation script is called to parse the first page description file, obtain the script node of the first page, and embed the script node into the main node of the second page description file.

8. The method according to claim 1, characterized in that, The description information of the first page includes the cascading style sheet link resources loaded by the domain name of the first page; Embedding the description information of the first page in the first page description file into the second page description file includes: The page loading method in the compilation script is called to parse the external style sheet tags of the first page description file and obtain the cascading style sheet link resources loaded by the domain name of the first page. Create a new external stylesheet tag and set the hypertext reference attribute of the new external stylesheet tag to the Cascading Style Sheets link resource to obtain the target external stylesheet tag; The target external stylesheet tag is embedded into the header node of the second page description file.

9. The method according to claim 1, characterized in that, The description information of the first page includes the script link resources loaded by the domain name of the first page; Embedding the description information of the first page in the first page description file into the second page description file includes: The page loading method in the compilation script is called to parse the external script tags of the first page description file to obtain the link resource table loaded by the domain name of the first page. The link resource table includes at least one script link resource loaded by the domain name of the first page. Traverse the linked resource table. For each script link resource encountered, create a new external script tag and set the resource reference attribute of the new external script tag to the currently traversed script link resource to obtain the target external script tag. Embed the target external link script tag into the main node of the second page description file; After the target external link script tag is embedded, continue to traverse the next script link resource.

10. The method according to claim 1, characterized in that, The description information of the first page includes the static resources of the first page; Embedding the description information of the first page in the first page description file into the second page description file includes: The page loading method in the compilation script is called to parse the first page description file and obtain the static resources of the first page and the address of the static resources; If the address of the static resource is an absolute address, then the address of the static resource is referenced in the second page description file, where the absolute address refers to the storage address of the static resource in the storage server; If the address of the static resource is a relative address, then the address of the static resource is converted to the absolute address, and the absolute address is referenced in the second page description file. The relative address refers to the address of the static resource relative to the root directory where the first page description file is located.

11. A page embedding device, characterized in that, include: The acquisition unit is used to acquire the link address of the first page description file and the compilation script corresponding to the first page description file. The compilation script is used to parse the first page description file, and the first page description file is used to describe the first page. The first embedding unit is used to embed the compilation script in the second page description file, the second page description file is used to describe the second page, and the domain name of the second page is different from the domain name of the first page; The second embedding unit is used to obtain the first page description file based on the link address through the compilation script, and to embed the description information of the first page in the first page description file into the second page description file to obtain a third page description file, wherein the third page description file is used to describe the second page after the first page is embedded. The loading unit is used to load the third page description file.

12. An electronic device, characterized in that, include: processor; Memory used to store the processor's executable instructions; The processor is configured to execute the instructions to implement the method as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, When the instructions in the storage medium are executed by the processor of the electronic device, the electronic device is able to perform the method as described in any one of claims 1 to 10.

Images