Method, device, program product, and medium for loading pages based on Iframe

Abstract

A method, device, program product, and medium for loading pages based on Iframe, the method comprising: loading an MPA subpage in a browser, the MPA subpage being one of the native subpages of MPA; monitoring and hijacking the page switching request of the MPA subpage, converting the MPA subpage into an Iframe base page, the Iframe base page being used to create and maintain an Iframe element; and using the Iframe element to load the target subpage pointed to by the page switching request. This specification can reduce the time consumption of requesting the server to load an Iframe base page for the first time, and is compatible with the existing URL of MPA, so that users can experience the SPA effect using the old URL stored locally. This specification also provides electronic devices and computer storage media.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a method, device, program product, and medium for loading a page based on an Iframe. Background Art

[0002] In the field of software development, MPA (Multiple Page Application) and SPA (Single Page Application) are two common web application architectures. MPA consists of multiple independent pages, each of which is a complete HTML (Hypertext Markup Language) document. When a user browses, each click on a link will cause the browser to load a new HTML page. The characteristic of SPA is that when a user browses, the page will not be reloaded, but part of the page content will be dynamically updated through JavaScript.

[0003] In order to take advantage of SPA, such as faster page loading speed, better user experience and more efficient front-end development process, developers expect to achieve the page loading effect under SPA architecture under MPA architecture. Iframe is generally used to achieve the effect of SPA loading page. Iframe is a tag in HTML, which is used to embed another page in the current page (that is, embed a subpage in the current page). However, the current Iframe solution has the problem of poor performance of loading subpages for the first time and incompatibility with existing URLs in MPA. Summary of the invention

[0004] In a first aspect, the present specification provides a method for loading pages based on Iframe, comprising: loading an MPA subpage in a browser, wherein the MPA subpage is one of the native subpages of the MPA; monitoring and hijacking a page switching request of the MPA subpage, converting the MPA subpage into an Iframe base page, wherein the Iframe base page is used to create and maintain an Iframe element; and using the Iframe element to load a target subpage pointed to by the page switching request.

[0005] In a second aspect, the present specification provides a method for loading a page based on an Iframe, comprising the steps of: upon receiving a loading request for an MPA subpage sent by a browser, returning the MPA subpage to the browser; and upon sending a switch page request to the browser, returning a target subpage pointed to by the switch page request, so that the target subpage is loaded based on the method described in the first aspect.

[0006] In a third aspect, the present specification provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect or the second aspect of claim 1.

[0007] In a fourth aspect, the present specification provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect or the second aspect when executing the program.

[0008] In a fifth aspect, the present specification provides a computer program product, including a computer program, which implements the method described in the first aspect or the second aspect when executed by a processor.

[0009] In the process of switching pages, this specification does not jump to an independent new page like the traditional MPA page switching method, but hijacks the page switching request occurring on the MPA subpage, and loads the target subpage in the Iframe element constructed on the current subpage. For the user, it stays on the currently displayed page waiting for the target subpage to be loaded, so there will be no blank and flashing. From the technical solution provided by this specification, the following effects can also be seen. First, this specification does not change the initial loading process of the existing subpages of MPA, and does not increase the time consumption of the initial loading of the subpage. Secondly, when a page switching event occurs on the displayed MPA subpage, there is no need to load the Iframe base page, but the Iframe base page is generated locally, so the time consumption of requesting the server to load the Iframe base page for the first time can be reduced. Thirdly, it can be seen that the target subpage loaded in the Iframe element is a native subpage of MPA, not an SPA page, so it is compatible with the existing URL of MPA, so that users can experience the SPA effect using the old URL stored locally.

[0010] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present specification. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Figure 1A is a schematic diagram of an MPA front-end browser page according to an embodiment of this specification;

[0012] Figure 1B It is a partial flow chart of a method for loading a page based on an Iframe at the MPA front end according to an embodiment of this specification;

[0013] Figure 2 It is a partial flow chart of replacing an MPA subpage with an Iframe base page according to an embodiment of this specification;

[0014] Figure 3 is a partial flow chart of another method for loading a page based on an Iframe according to an embodiment of this specification;

[0015] Figure 4 It is a partial flow chart of a method for a server to process Iframe-based page loading according to an embodiment of this specification;

[0016] Figure 5 It is a signaling diagram of the interaction between the MAP front end and the server in an application example;

[0017] Figure 6 It is a schematic diagram of the page frame of an Iframe base page in a browser;

[0018] Figure 7 It is a schematic diagram of displaying a pop-up window in an Iframe base page in the prior art;

[0019] Figure 8 It is a schematic diagram of components in a common module in an Iframe base page in the prior art that have interaction requirements with sub-pages;

[0020] Fig. 9A is a schematic diagram of a base page before a target sub-page is loaded according to an embodiment of this specification;

[0021] Fig. 9B is a schematic diagram of a base page during a target sub-page loading process according to an embodiment of this specification;

[0022] Fig.10 The implementation shown in the embodiment of this specification Fig. 9A and Fig. 9B Partial flow chart of the method of loading pages based on Iframe for page effects;

[0023] Fig.11 9A and Fig. 9B A partial flow chart of another method of loading a page based on Iframe for page effects;

[0024] Fig.12 The figure is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present specification. DETAILED DESCRIPTION

[0025] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with one or more embodiments of this specification. Instead, they are merely examples of devices and methods consistent with some aspects of one or more embodiments of this specification as detailed in the appended claims.

[0026] It should be noted that: in other embodiments, the steps of the corresponding method are not necessarily performed in the order shown and described in this specification. In some other embodiments, the steps included in the method may be more or less than those described in this specification. In addition, a single step described in this specification may be decomposed into multiple steps for description in other embodiments; and multiple steps described in this specification may be combined into a single step for description in other embodiments.

[0027] The user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this manual are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0028] Currently, applications developed based on web pages can be implemented based on either the MPA architecture or the SPA architecture. MPA is a traditional web application model in which each page is an independent HTML document. When users access different URLs in the browser, the server returns different HTML pages. Each page jump may require the entire page to be reloaded from the server, which may result in a long loading time. If implemented based on the MPA architecture, each page that the application needs to access can be independently developed and deployed, with low collaboration costs. However, when switching pages, the page will be refreshed as a whole, with obvious white screens and flash jumps, and the user experience is relatively poor.

[0029] Compared with MPA architecture, SPA is a modern web application model in which the entire application is loaded through a single page, and the user's interaction with the application does not cause the entire page to be reloaded. SPA usually uses client-side routing to manage different views and data, which means that when users navigate to different parts of the application, only the necessary data and components are loaded or updated, not the entire page. Therefore, SPA usually concentrates all functions and logic in one application. Since in SPA, the user's interaction with the application does not cause the entire page to be reloaded, but responds to the user's interaction by dynamically updating the content of the current page, when switching pages, the page only refreshes the local content, and the user experience is better.

[0030] Therefore, developers expect that the background management system that has been developed based on the MPA architecture can achieve the user experience that the SPA architecture can bring.

[0031] However, if the MPA architecture is directly rewritten into the SPA architecture, the cost is very high, and all sub-page codes are rewritten according to the specifications of the SPA architecture. Currently, there is a technology that simulates the effect of displaying sub-pages under the SPA architecture by constructing an Iframe element on the MPA page.

[0032] Iframe is a tag in HyperText Markup Language (HTML), and the Iframe element is a page element in HTML. Page elements are various basic components that make up the visual part of a web page. In web design and development, these elements work together to provide information and interactive functions to users. Common page elements include text, pictures, buttons, hyperlinks, etc. The Iframe element can embed another page in the current page. The Iframe element creates an inline frame (Inline Frame), which can contain another web page, just like opening a small browser window in the current page, which allows the web page content to be displayed across domains. In this manual, another page embedded in the current page is called a subpage.

[0033] The Iframe element can contain another document and can be scaled or placed anywhere on the page like an image. Therefore, when using the Iframe element to load a subpage, the subpage code basically does not need to be modified. Since the Iframe element is only embedded in a local area of ​​the current page, when using the Iframe element to load a subpage, for the user, only the content of the local area of ​​the page changes, and the page does not refresh as a whole. Therefore, there will be no white screen or flash jump when switching subpages.

[0034] The Iframe element itself can be regarded as a container. In this specification, the page that dynamically creates and maintains the Iframe element is called the Iframe base page. The page frame of the Iframe base page can only contain the navigation frame, without specific page content, and does not require routing control. The Iframe base page will load and display the corresponding sub-page content by updating the src attribute of the Iframe.

[0035] The traditional process of using Iframe elements to load subpages is usually to load the Iframe base page first, and then load the SPA subpage in the Iframe base page. This requires the introduction of a new set of SPA URLs. This is because SPA routing jumps are based on specific implementations (such as front-end routing such as vue-router, react-router, etc.), while MPA routing is the document jump of the native browser (navigating across documents). The subpages of the two frameworks are bound to different URLs. Therefore, loading SPA subpages in MPA pages means replacing the original subpage routing of MPA with the SPA subpage routing, that is, a new set of SPA subpage URLs needs to be introduced. This will cause the original subpage URLs of MPA to be incompatible, and the new SPA subpage URLs must be used to experience the SPA effect achieved by Iframe. For applications that have been online for a long time, changing to a new set of URLs will have a greater impact on users. On the other hand, it can be seen that loading the Iframe base page first and then loading the subpages will result in poor loading performance of the first subpage loaded using Iframe.

[0036] Different from the traditional solution of loading the Iframe base page first and then loading the SPA subpage, this specification proposes a solution without loading the Iframe base page, and this specification does not introduce a new SPA subpage, but uses the existing native subpage of MPA, so that users can enjoy the SPA experience effect by using the old URL in MPA without the user's perception. The following is a detailed description in conjunction with various embodiments.

[0037] The MPA architecture consists of the MPA frontend and the server. The MPA frontend in this specification refers to the part of a website or application that users can interact with directly. It includes all the visual elements and functions that users see and interact with in the browser. The server side refers to the part of a web application or website that is not directly facing the user. It is responsible for processing requests sent by the frontend, managing the database, executing business logic, and handling data storage. Figure 1AThe figure is a schematic diagram of the interface of the MPA front-end browser. The browser usually includes a toolbar 10 and a content area 11 of the browser. The toolbar 10 provides a variety of functions to help users browse web pages and manage browsing sessions. Common basic components of the toolbar 10 include, for example, an address bar (URL bar), forward / back buttons, a refresh button, and the like. The content area 11 of the browser is where the browser displays web pages. It is the main area for users to interact with web page content, including text, pictures, videos, audio, and other elements created by HTML, CSS, and JavaScript. The user enters a URL in the address bar and requests the server to navigate to the corresponding web page through the URL. After the server returns the web page data, it is rendered in the content area of ​​the browser and presented to the user. The web page presented in the content area of ​​the browser usually includes a framework common area and a page data area 112. The framework common area refers to the area of ​​reusable common modules contained in different web pages, such as the header bar header 110, the menu bar menu 111, and the like. The page data area 112 is used to load the page data of this web page.

[0038] Combination Figure 1A , Figure 1B A partial flow chart of a method for loading a page based on an Iframe provided in an embodiment. The flow chart may be a process occurring at the MPA front end.

[0039] S101, loading an MPA subpage in a browser, where the MPA subpage is one of the native subpages in the MPA;

[0040] S102, monitoring and hijacking the page switching request of the MPA subpage, converting the MPA subpage into an Iframe base page, the Iframe base page being the page mentioned above for creating and maintaining the Iframe element;

[0041] S103, using an Iframe element to load the target subpage pointed to by the switching page request.

[0042] In step S101, a MAP subpage is loaded by inputting any old MPA URL in the address bar of the browser. The loaded MPA subpage is a native subpage in the MPA, and there is no change before and after using this embodiment. In each execution process, if different subpages are loaded, the domain name of the URL of each subpage may be different. For the user, there will be no change before and after using the solution of this embodiment, and the user's usage habits of the MPA before the transformation will not be disrupted. When the server returns the MPA subpage corresponding to this URL, it injects a specific script (for example, it can be a JavaScript script) to implement the operation of monitoring and hijacking the switching page request of the MPA subpage and the control logic of the Iframe base page, for example, controlling the conversion of the MPA subpage into the Iframe base page and using the Iframe element to load the processing logic of the target subpage. This script is referred to as the base page parasitic script in this specification.

[0043] In S102, "hijacking" refers to changing or taking over the default operation that the MPA subpage should originally perform by programming means. In this specification, there are many ways to hijack the page switching request. As an example, the first way is to globally monitor the click event on the MPA subpage, filter out the event of clicking the A element in the callback function and process it to realize the function of hijacking the page request. For example, when the software developer wants to perform certain operations when the user clicks on an element, a function can be bound to the click event of the element as a callback function. For example, when the user clicks the button of the A element, it is expected to trigger the click event function, so this function can be set as the callback function of the button's click event.

[0044] The second way is to rewrite the window.open function, for example, by hijacking or modifying the default pop-up window behavior to hijack the page request.

[0045] The applicant will not list all the ways to implement the page switching request hijacking function.

[0046] In this embodiment, the MPA subpage is converted to the Iframe base page when a page switching request occurs, rather than converting it in advance before the page switching request occurs, so that the user is less aware of it. Of course, the software developer can choose other times to convert the Iframe base page according to actual needs. For example, the MPA subpage can be converted to the Iframe base page after the MPA subpage is loaded in step S102.

[0047] The conversion of the MPA subpage into the Iframe base page mentioned in S102 may refer to dynamically replacing the DOM (Document Object Model) of the MPA subpage with the Iframe base DOM. When a browser loads a web page, it parses the HTML document and builds the DOM. The DOM presents the HTML document as nodes in a tree structure, each of which represents a part of the document, such as an element, attribute, or text. Common node types include: Element node: represents an HTML tag, such as 、 Etc. The Iframe element is one of the element nodes. In DOM, a container usually refers to an element that can contain other nodes (elements, text, comments, etc.) to organize and structure page content. Common DOM container types, for example, is the root element of the entire HTML document, and all other elements are its child elements. is a structural container, which is the main part of the document and contains visible page content. <header>It is also a structural container, which usually contains the header content of the page, such as the navigation bar and title. The base DOM container of the Iframe base page mentioned below in this specification also refers to a structural container, which can contain Iframe elements to organize and structure the content of the target sub-page.

[0048] The process of replacing the DOM (Document Object Model) of the MPA subpage with the Iframe base DOM can be implemented by referring to the following method. Under the guidance of this method, software developers can also replace it with other commonly used implementation methods.

[0049] When dynamically replacing the DOM of an MPA subpage, you can first clear all subelements in the body element of the MPA subpage. For example, you can first select the body element of the page and then use the following expression:

[0050] document.querySelector('body').innerHTML="clear child elements.

[0051] In this expression, document.querySelector('body') selects the element in the document, and the .innerHTML property is used to get or set the HTML content of this element.

[0052] Dynamically build the base DOM container, add the Iframe element and other necessary page elements to the base DOM container, and then insert them into the body element. For example, appendChild is a JavaScript method. appendChild can change the DOM and actually insert the specified node into the document, so appendChild can be used to insert each page element in the DOM container into the body element.

[0053] In some embodiments, some common modules of the MPA subpage may need to be reused in the Iframe base page. For example, the frame common area of ​​the MPA subpage generally includes the Header module of the header bar at the top and the menu module of the menu bar on the left. These common modules can be reused by the Iframe base page. Therefore, before clearing the sub-elements of the body element of the MPA subpage, the common modules that need to be reused can be saved in the memory. As an example, this can be achieved by using a selector. The specific expression can be: const elemHeader = document.querySelector ('#common-header'). In this way, the common modules do not need to be rendered again when they are used again next time, so as to improve processing efficiency. Furthermore, in the DOM container of the constructed Iframe base page, the saved common modules are added to the Iframe base Dom container.

[0054] Figure 2 This is an example of S102 converting an MPA subpage into an Iframe base page. Figure 2 steps to understand the process of S102.

[0055] First save the common modules on the MPA subpage (S1021), then clear the subelements of the body element in the MPA subpage (S1022), create an Iframe element and an Iframe base DOM container (S1023); add the Iframe element and the stored common modules to the created Iframe base DOM container (S1024).

[0056] The process of replacing the DOM of the MPA subpage with the DOM of the Iframe base page in the above different embodiments can be presented by part or all of the multiple expressions in the following examples. Designers can develop and design them according to their needs. It is worth noting that these expressions are not the only implementation methods.

[0057] Taking javascript as an example,

[0058] / / Create an Iframe base DOM container

[0059] const elemContainer=document.createElement('div');

[0060] / / Create an Iframe element

[0061] const elemIframe=document.createElement('iframe');

[0062] / / Add the Iframe element to the created Iframe base DOM container

[0063] elemContainer.appendChild(elemIframe);

[0064] / / Add common modules to the created Iframe base DOM container

[0065] elemContainer.appendChild(elemHeader);

[0066] / / Insert the created Iframe base Dom container into the body element

[0067] document.querySelector('body').appendChild(elemContainer)

[0068] In S103, the target sub-page is loaded using the Iframe element, which can be achieved by changing the src attribute of the Iframe, that is, the src attribute of the Iframe is set to the URL of the target sub-page.

[0069] However, in some embodiments, the MPA may contain a lot of subdomains. The subpage URL carried in the switch page request may be different from the domain name of the Iframe base page, and the browser's security restrictions stipulate that when JS dynamically modifies the URL in the browser, it is not allowed to modify the URL of a different domain name, which means that the Iframe element has no authority to set the initial URL of the target subpage carried in the switch page request to the src attribute value of the Iframe. Therefore, in these embodiments, the scheme designed by the applicant needs to convert the initial URL of the target subpage carried in the switch page request to the same domain name in order to load the target subpage in the Iframe base page.

[0070] This specification designs a unified domain name mapping strategy, which can map URLs of different domain names to URLs of the same domain name, so as to convert the initial URL of the target subpage carried in the page switching request into the same domain name as the URL of the Iframe base page, and use the converted target URL as the URL of the target subpage. The initial URL is the URL of one of the native subpages of the MPA. The process of this domain name conversion can be performed by the base page parasitic script. In order to facilitate and make it easier to understand the conversion method process, two specific conversion methods are provided below, one is query parameter conversion, and the other is path conversion.

[0071] The query parameter conversion method is to add the initial URL carried in the switch page request as a query parameter to the URL of the Iframe base page. For example: the converted target URL is:

[0072] https: / / <base_domain> / <base_path> ?childPage=<encoded_new_child_page_url>

[0073] in,<base_domain> is the domain name of the Iframe base page.<base_path> is the Iframe base page path, childPage is the query parameter name,<encoded_new_child_page_url> It is the query parameter value, which is obtained by encoding the initial URL of the target sub-page carried in the page switching request through encodeURIComponent.

[0074] The path conversion method is to add the initial URL of the target subpage carried in the switch page request as part of the path to the domain name of the Iframe base page, and usually add a path prefix between the two. For example: the converted target URL is: https: / / <base_domain> / <prefix_path> / <new_child_page_url> ,in,<base_domain> is the domain name of the Iframe base page.<base_path> is the path prefix,<new_child_page_url> is the initial URL of the target subpage.

[0075] After converting the initial URL of the target subpage to the target URL, you can use the converted target URL with the same domain in the Iframe element to replace the initial URL displayed in the browser. For example, you can call the history.replaceState function to replace it. history.replaceState is a Web API that is part of HTML5 and allows software developers to replace the current history entry in the browser's history. This function is a method of the window.history object. When using the history.replaceState() method, you can replace the current history entry instead of adding a new one. Updating the URL does not require reloading the page, so it can better emulate the SPA page loading effect.

[0076] In some embodiments, when the target sub-page is loaded in the Iframe element, it is possible that the user will trigger the behavior of refreshing the target sub-page again in the browser toolbar. This behavior of refreshing the page will cause the MPA front end to send the destination URL currently displayed in the browser address bar to the server, requesting the return of the corresponding web page. However, since the target URL of the target sub-page after the same-domain conversion is not a real URL, the user's behavior of refreshing the browser to request the target URL will cause the server to return an error that the page does not exist. Therefore, in response to the user's refresh demand, the applicant adopts a method of redirecting the server to the initial URL of the target sub-page before the conversion after the MPA client sends a page refresh request for the target sub-page to the server to solve this problem.

[0077] When designing a URL redirection scheme, technicians in this field usually get used to configuring redirection on the Nginx server. Nginx is a high-performance HTTP and reverse proxy server that can achieve unified mapping and redirection of domain names through configuration. However, the applicant found that when using the Nginx server to redirect the target URL, the domain name redirection failed in most cases and returned to the login page. After a lot of research, the applicant found that the reason for the failure was that the Nginx server had security restrictions on https access, which needed to be bypassed by adding a whitelist. However, the MPA backend management system usually has a large number of domain names, and domain names are redirected to each other. The cost of adding a whitelist is very high and is not conducive to later maintenance. The applicant further found that the Nginx server did not impose security restrictions on http access and could be accessed directly. Therefore, the applicant proposed that the Http URI (URI (Uniform Resource Identifier) ​​can be first redirected to the target server. The target server generally has a redirection logic from Http URI to Https URI. By using Http URI transit, security restrictions are bypassed and redirection between domain names is achieved.

[0078] In order to facilitate the server to identify the URLs and other paths that need to be redirected, special characters can be added to the target URL when converting the initial URL to the target URL. The target URL has this pre-defined field so that the server can distinguish the target URL from other paths. The server and the base page parasitic script of the MPA front end have agreed in advance on the conversion rules for converting the initial URL to the target URL. After receiving the target URL, the server uses special characters to identify the target URL converted from the same domain, and then uses regular matching to reverse the conversion to obtain the initial URL, and then redirects to the web page corresponding to the initial URL.

[0079] The following example uses the prefix character Iframe-child as this special character to illustrate the corresponding redirection method when the server converts the target URL to the initial URL:

[0080] #Use the path prefix character Iframe-child to identify the target URL converted from the same domain name

[0081] location~^ / iframe-child / {

[0082] #Use the regular matching algorithm to reverse the conversion to get the initial URL, and use the rewrite command to redirect

[0083] rewrite^ / iframe-child / ([^ / ]+) / (.*)$https: / / $1 / $2permanent;

[0084] }

[0085] In some embodiments, the Iframe base page may also need to handle communication issues with the target subpage in the Iframe element. For example, a page switching event may occur again in the target subpage later, so software developers need to consider how to design the interaction between the Iframe base page and the Iframe element. Guided by this requirement, in these embodiments, the applicant provides a solution for handling subsequent page switching requests of the target subpage loaded in the Iframe base page.

[0086] When loading the target sub-page, a script can be injected into the target sub-page to monitor and hijack the next page switching request on the target sub-page. The script is referred to as the target sub-page parasitic script in this specification. After the target sub-page parasitic script hijacks the page switching request, the base page parasitic script is notified. As an example, the target sub-page parasitic script can realize cross-domain communication through the postMessage API. The postMessage function notifies the base page parasitic script of the page switching request, and the base page parasitic script controls the Iframe base page to load the next target page. Since the Iframe base DOM has been constructed when the target sub-page is loaded for the first time, the constructed Iframe element can be directly used to load the new target sub-page. When the base page parasitic script controls the Iframe base page to load the next target page, the initial URL of the new target sub-page can be converted into the target URL through the unified domain name mapping strategy mentioned above, the scr attribute value of the Iframe is replaced with the target URL, and the initial URL of the new target sub-page displayed in the browser address bar is replaced.

[0087] The relationship between the steps in the process of loading the target subpage and refreshing the target subpage involved in the above embodiments can be combined with Figure 3 The flowchart can be understood.

[0088] S301, loading the MPA subpage in the browser;

[0089] S302, injecting a base page parasitic script into the MPA subpage;

[0090] S303, the base page parasitic script hijacks and monitors the page switching request of the MPA subpage;

[0091] S304, the base page parasitic script constructs the base DOM container and Iframe element of the Iframe base page;

[0092] S305, the base page parasitic script clears the body element of the MPA subpage and stores the common module;

[0093] S306, the base page parasitic script adds an Iframe element and the stored common module to the constructed base DOM container;

[0094] S307, the base page parasitic script determines whether the initial URL in the switching page request and the URL of the Iframe base page belong to the same domain name, if the judgment result is yes, then execute S309, if the judgment result is no, then execute S308;

[0095] S308, the base page parasitic script converts the initial URL into a target URL, and replaces the initial URL in the browser with the target URL;

[0096] S309, the base page parasitic script loads the target sub-page through the Iframe element;

[0097] S310, injecting a target sub-page parasitic script into the target sub-page during the target sub-page loading process.

[0098] S311, the browser receives a refresh request from the user;

[0099] S312, the browser sends a refresh request to the server;

[0100] S313, the server redirects the target URL in the refresh request to the initial URL, returns the page data of the initial URL to the browser, and completes the page refresh operation after re-executing steps S301-S310.

[0101] When using an Iframe element to load a subpage with an ad, most of the page content in the loaded target subpage is lost. After research, it was found that this is because most browsers support the "heavy advertising intervention function (i.e., https: / / www.zdnet.com / article / google-chrome-to-block-heavy-ads-that-use-too-many-system-resources / ), so they will detect and uninstall the advertising pages of Iframe elements that use more system resources. Users can manually turn off this function in the browser settings, but it cannot be turned off through JavaScript scripts, which means that the Iframe element cannot achieve this function automatically. The applicant has proved through a large number of experiments that this function is that the browser determines that the opened sub-page is an advertising page based on the URI of the sub-page. Therefore, the applicant proposed that in the process of converting the initial URL into the target URL, the ads field in the URI of the target sub-page should be replaced with market. Since in the URI, the "ads" field is usually related to advertising tracking and attribution, and can contain information about advertising activities, such as campaigns, advertising groups or specific advertising creatives, replacing the "ads" field with "market" shifts the focus of the URI from advertising-specific tracking to broader market or source tracking, thereby solving the display problem of sub-pages with ads.

[0102] Figure 4 The described method of loading a page based on an Iframe may be executed on an MPA server.

[0103] S401, corresponding to S101 above, in the case of receiving a load request for an MPA subpage sent by a browser, returning the MPA subpage to the browser;

[0104] S402, corresponding to the above S103, when receiving a page switching request sent by the browser, returning the target sub-page pointed to by the page switching request.

[0105] As described above, in some embodiments, after the target subpage is loaded in the Iframe element, it is possible that the user will trigger the behavior of refreshing the target subpage again in the toolbar of the browser. This behavior of refreshing the page will cause the MPA front end to send the destination URL currently displayed in the browser address bar to the server, requesting the return of the corresponding web page. However, since the target URL of the target subpage after the same domain conversion is not a real URL, the behavior of the user refreshing the browser to request the target URL will cause the server to return an error that the page does not exist. Therefore, the applicant, in response to the user's refresh demand, adopts a method of redirecting the server to the initial URL of the target subpage before the conversion after the MPA client sends a page refresh request for the target subpage to the server to solve this problem. After redirecting the target URL back to the initial URL, the server obtains the target subpage and returns it to the browser. For the server, it does not need to care whether the received request is a page refresh request or a page switch request. It only needs to determine whether the URL is a converted URL (referred to as the destination URL in this article) based on the special characters in the URL carried in the received request. If it is, redirection is performed, and the corresponding web page is obtained after the initial URL is restored. The specific redirection method can be referred to as described above and will not be repeated.

[0106] Figure 5 This is an example description of the application scenarios of the above embodiments. The MPA front end establishes a connection with the server through a browser. Software developers designed a device management system based on the MPA framework, which has MPA sub-pages such as "Device List" and "Device Details" of each device.

[0107] In S501, the MPA front end opens an MPA subpage of "Device List" in the browser, triggering a request to the server for the "Device List" subpage;

[0108] In S502, the server returns to the "Device List" subpage;

[0109] S503, during the loading process, a script file named "base client" is injected into the "device list" subpage as a base page parasitic script.

[0110] S504, when the user clicks the button component of device A, triggering an event to switch to the "Device A Details" subpage, the script file of the base client monitors the event and hijacks the event;

[0111] S505, the "base client" script starts to execute the operations of constructing an Iframe base DOM container and constructing an Iframe element.

[0112] S506, before adding each page element to the Iframe base DOM container, first store the common modules in the "device list" sub-page that can be reused by the Iframe base page, and then clear each sub-element of the body element of the "device list" sub-page.

[0113] S507, after the Iframe base DOM container and the Iframe element are created, the Iframe element and the stored common module are added to the DOM container of the Iframe base.

[0114] S508, sending the initial URL of the "Device A Details" subpage to the server through the Iframe element;

[0115] In S509, after the server returns the "Device A Details" subpage, the "Device A Details" subpage is loaded using the Iframe element. When loading the "Device A Details" subpage, the initial URL of the "Device A Details" subpage is converted into a target URL with the same domain name as the Iframe base page, and the target URL replaces the initial URL of the "Device A Details" displayed in the browser. In addition, during the loading process, a script file named "child client" is injected into the "Device A Details" subpage as a target subpage parasitic script (S510).

[0116] In S511, the "child client" script file monitors the page switching event occurring on the "Device A Details" in the iframe element, which is the user's intention to jump to the "Maintenance Record" subpage of Device A;

[0117] In S512, the "child client" script file notifies the "baseclient" script of the monitored page switching event;

[0118] In S513, the server is requested to return the "Maintenance Record of Equipment A" subpage through the Iframe element;

[0119] In S514, the server returns to the "Maintenance Record of Equipment A" subpage;

[0120] In S515, the user clicks the "Page Refresh" component on the browser toolbar, sends the target URL to the server, and requests to refresh the Iframe base page. After receiving the request, the server recognizes that the URL needs to be redirected based on the path prefix Iframe-child, and redirects the target URL to the initial URL of the "Maintenance Record of Equipment A" subpage (S516), and returns the page resource of the initial URL to the browser (S517). The MPA front end re-executes S501.

[0121] According to the applicant's multiple test data verifications, when the above-mentioned embodiments are used to switch sub-pages, the page is not refreshed as a whole and a white screen does not appear. Therefore, the FCP time of opening the sub-page other than for the first time (that is, there is no need to replace the MPA sub-page with the Iframe base page) is 0. FCP (First Contentful Paint) is an important web page performance indicator, which measures the time from the beginning of page loading to the rendering of the first DOM element (such as text, image, canvas, etc.). FCP is an important moment for users to perceive the loading speed of the website. Fast FCP can make users feel that the website responds quickly. It can be seen that this specification does not increase the burden of page loading. According to the test data, the LCP (Largest Contentful Paint) time, which is an indicator for evaluating the time it takes for a user to see the main content for the first time during page loading, and the performance monitoring indicator data after the sub-page is connected have not deteriorated.

[0122] The applicant further discovered that by loading and presenting the target sub-page according to the above embodiments, the following may be presented: Figure 6 As shown in the effect, the Iframe base page 60 usually allows the Iframe element to occupy the content area (Iframe element area 603 in the figure) outside the common area of ​​the frame (such as the header module 601 and the menu module 602 in the navigation frame), which will cause the problem that the sub-page pop-up window is not centered (such as Figure 7 ). This is a functional loophole that developers cannot allow when launching a product. In addition, after the Iframe base page 60 loads the target subpage, the frame public area is located outside the Iframe element, and the target subpage is located inside the Iframe element. This causes trouble when the public module in the frame public area needs to interact with the target subpage in a complex manner. For example Figure 8 As shown, the AI ​​assistant is located in the Header module. If the AI ​​assistant needs to read and write the Dom structure of the target subpage, the complexity of cross-domain communication makes it impossible for the AI ​​assistant to access the DOM structure of the target subpage because the target subpage and the Header component are different domain names. In addition, the "topbar" is the horizontal navigation bar at the top of the header of the web page, which usually contains the website's navigation links, brand logo, search box, user login information and other important shortcut operations. The top bar is an important interface element for users to interact with the website. It has a significant impact on the website's user experience and navigation process. How to make the top bar not flash and scroll with the page is still a problem that needs to be solved.

[0123] It is worth pointing out that in view of the problem that the pop-up window cannot be centered when the above Iframe element displays a sub-page and cross-domain communication between the public module in the public area of ​​the frame and the Dom in the Iframe element is difficult to achieve, there is a solution in the traditional technology. This solution proposes to include a full-screen Iframe element and several hidden Iframe elements in the Iframe base page. When switching to the target sub-page, the currently displayed Iframe element is hidden, and the Iframe element where the target sub-page is located is displayed in full screen. However, although this solution can circumvent the problem that the pop-up window of the target sub-page cannot be centered and the cross-Iframe communication is complicated, it is necessary to use each Iframe to load the sub-pages it carries separately when entering the first sub-page, which will cause the first loading of the sub-page to take a long time, especially when the number of sub-pages is relatively large. Keeping multiple Iframe instances at the same time will cause page jams.

[0124] This specification proposes that only one Iframe instance is needed to solve the above problems that the pop-up window cannot be centered and the cross-Iframe communication is complicated.

[0125] like Figure 9A-9B The diagram shows the layout of the Iframe base page in the embodiment of the present specification. The Iframe base page 901 includes a frame common area and an Iframe element area 902. Both the frame common area and the Iframe element area include several common modules, such as the header module 9011 in the frame common area and the header bar 9021 of the Iframe element, as well as the menu module 9012 in the frame common area and the header bar 9022 of the Iframe element. The Iframe element is displayed in full screen, and the common modules in the frame common area and the Iframe element area 902 are located in overlapping or substantially overlapping positions. Fig. 9A The figure shows the page layout presented when no page switching request is received and the target subpage is loaded. In this state, the public modules in the Iframe base page are hidden (as shown by the dotted box in the figure), while the public modules in the Iframe element area are placed on the top layer and are displayed. Fig. 9B It is the page layout presentation of the target page loading process. When the target sub-page is loaded, the common modules on the Iframe base page are covered on the common modules of the Iframe element and are displayed (the dotted box represents the common modules in the covered Iframe element area).

[0126] Fig.10 Describes the Fig. 9A and Fig. 9B Some of the steps performed by the described scheme:

[0127] In S1001, it is displayed that the target sub-page has been loaded on the Iframe base page, the public module on the Iframe base page is set to a hidden state, the Iframe element contains the same public module as the Iframe base page, the public module of the Iframe element overlaps the public module of the Iframe base page, and the Iframe element is displayed in full screen.

[0128] For example, after following the process of converting the initial URL into the target URL described in the above embodiments, the full screen display of the Iframe element can be achieved by setting the attributes width and height of the Iframe element to 100%, and the public module of the Iframe base page can be hidden by setting the style attribute of the Iframe base page to display:none or visibility:hidden.

[0129] HTML code example:

[0130] <div class＝"container"style＝"position:relative；width:100％；height:100％">

[0131] <div class＝"header"style＝"display:none；"> header content

[0132] <div class＝"left-menu"style＝"display:none；"> Menu content

[0133] <Iframewidth="100%"height="100%"src=" / childPageOne">

[0134]

[0135] In S1002, the next switch page request is monitored and hijacked. As an example, since the public module of the Iframe base page is in a hidden state, the switch page request occurring on the target subpage in the Iframe element can be executed by the target subpage parasitic script in the above embodiments. When a switch page request occurs on the target subpage in the Iframe element, the target subpage parasitic script can be notified through the postMessage function, and the Iframe base page parasitic script executes a series of subsequent processes of responding to the switch page request.

[0136] The triggering path of the next page switching request can also be implemented by referring to the various methods listed above, such as listening to the click event by the user clicking on the A element, filtering out the event of clicking the A element in the callback function and processing it; or rewriting the window.open function for processing, or providing a new attribute locationSpa.href for replacement, etc.

[0137] In S1003, when a page switching request is detected, the common module of the Iframe base page is displayed above the common module of the Iframe element. Exemplarily, this process can be implemented by setting absolute positioning, for example, by setting the style attribute of the Iframe base page to 'position:absolute; top:0px; left:0px; z-index:1;', the header module of the Iframe base page is covered to the upper layer of the header module in the Iframe element.

[0138] It is worth noting that before executing S803, the state of the common module in the Iframe element can be synchronized to the common module of the Iframe base page as needed, such as the expansion state of the menu in the menu bar. When covering, the states of the two common modules are consistent, so that the user cannot visually perceive the change.

[0139] In S1004, the new sub-page is loaded by setting the src attribute of the Iframe to the URL of the new sub-page in the next page switching request.

[0140] In S1005, after monitoring that the new sub-page has been loaded, the common modules of the Iframe base page are hidden again. Exemplarily, the completion of sub-page loading can be sensed by monitoring the onload event of the Iframe, and the common modules of the Iframe base page can be hidden by setting the style attribute to display:none or visibility:hidden. Since the newly loaded sub-page and the Iframe base page have the same common modules, the user cannot feel the hiding change. After hiding, the user can complete all interactive operations on the newly loaded sub-page, just like the sub-page opened directly in the browser.

[0141] This solution achieves the SPA effect by using a full-screen Iframe element to load the target subpage and the Iframe base page public module to cover the subpage during loading, which significantly improves the user experience. This solution uses Iframe to load old pages, which has very good compatibility and very low migration costs, because the old pages only need a small amount of code modification, and do not need to change the development and release mode.

[0142] The following combination Fig.11 To describe a flowchart of loading the target sub-page through an Iframe element and displaying it in full screen.

[0143] S1101, loading the MPA subpage in the browser;

[0144] S1102, injecting a base page parasitic script into the MPA subpage;

[0145] S1103, the base page parasitic script hijacks and monitors the page switching request of the MPA subpage;

[0146] S1104, the base page parasitic script constructs the base DOM container and Iframe element of the Iframe base page;

[0147] S1105, the base page parasitic script clears the body element of the MPA subpage and stores the common module;

[0148] S1106, the base page parasitic script adds an Iframe element and the stored public modules in the constructed base DOM container, sets the Iframe element to full screen, covers the public modules of the frame public area of ​​the Iframe base page on the upper layer of the public modules of the Iframe element and sets them to display state;

[0149] S1107, the base page parasitic script determines whether the initial URL in the switching page request and the URL of the Iframe base page belong to the same domain name, if the judgment result is yes, execute S1108, if the judgment result is no, execute S1109;

[0150] S1108, the base page parasitic script converts the initial URL into a target URL, and replaces the initial URL in the browser with the target URL;

[0151] S1109, the base page parasitic script loads the target sub-page through the Iframe element;

[0152] S1110, injecting a target sub-page parasitic script into the target sub-page during the target sub-page loading process;

[0153] S1111, after monitoring that the target sub-page has been loaded, setting the public module in the public area of ​​the frame of the Iframe base page to a hidden state.

[0154] S1112, when the target sub-page parasitic script monitors the next page switching request, it notifies the base page parasitic script to re-execute S1106-S1111.

[0155] This specification also provides a distributed system, the distributed system comprising one or more computer devices, Fig.12 This is a hardware structure diagram of a computer device of a distributed system according to an embodiment of this specification, wherein the computer device includes a processor 1201, a memory 1202, an input / output interface 1203, a communication interface 1204, and a bus 1205. The processor 1201, the memory 1202, the input / output interface 1203, and the communication interface 1204 are connected to each other through the bus 1205 in the device.

[0156] The processor 1201 can be implemented by a general-purpose central processing unit, a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, etc., for executing relevant programs to implement the technical solutions provided by the embodiments of the present disclosure. The processor 1201 can also include a graphics card, which can be a Nvidia titan X graphics card or a 1080Ti graphics card, etc.

[0157] The memory 1202 may be implemented in the form of a read-only memory (ROM), a random access memory (RAM), a static storage device, a dynamic storage device, etc. The memory 1202 may store an operating system and other application programs. When the technical solution provided by the embodiment of the present disclosure is implemented by software or firmware, the relevant program code is stored in the memory 1202 and is called and executed by the processor 1201.

[0158] The input / output interface 1203 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0159] The communication interface 1204 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0160] The bus 1205 includes a path that transmits information between the various components of the device (eg, the processor 1201 , the memory 1202 , the input / output interface 1203 , and the communication interface 1204 ).

[0161] It should be noted that, although the above device only shows the processor 1201, the memory 1202, the input / output interface 1203, the communication interface 1204 and the bus 1205, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present disclosure, and does not necessarily include all the components shown in the figure.

[0162] An embodiment of the present disclosure provides a computer program product, including a computer program. When the computer program is executed by a processor, the method described in any embodiment of the present disclosure is implemented.

[0163] The present disclosure also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the method described in any of the above embodiments is implemented.

[0164] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules 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 technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0165] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the embodiments of the present disclosure can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the embodiments of the present disclosure is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which can be stored in a storage medium such as ROM / RAM, a disk, an optical disk, etc., including several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present disclosure or some parts of the embodiments.

[0166] The systems, devices, modules or units described in the above embodiments may be implemented by computer devices or entities, or by products with certain functions. A typical implementation device is a computer, which may be in the form of a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email transceiver, a game console, a tablet computer, a wearable device or a combination of any of these devices.

[0167] Each embodiment in the present disclosure is described in a progressive manner, and the same and similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described above is merely schematic, wherein the modules described as separate components may or may not be physically separated, and the functions of each module can be implemented in the same one or more software and / or hardware when implementing the embodiment of the present disclosure. It is also possible to select some or all of the modules according to actual needs to achieve the purpose of the embodiment. A person of ordinary skill in the art can understand and implement it without paying creative labor.

[0168] The above is only a specific implementation of the embodiment of the present disclosure. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the embodiment of the present disclosure. These improvements and modifications should also be regarded as the protection scope of the embodiment of the present disclosure.< / header>

Claims

1. A method for loading a page based on an Iframe, the method comprising: Loading an MPA subpage in a browser, wherein the MPA subpage is one of the native subpages of the MPA; Listening to and hijacking the page switching request of the MPA subpage, converting the MPA subpage into an Iframe base page, wherein the Iframe base page is used to create and maintain an Iframe element; The Iframe element is used to load the target subpage pointed to by the switching page request.

2. According to the method described in claim 1, the MPA sub-page is injected with a base page parasitic script to monitor and hijack the page switching request of the MPA sub-page through the base page parasitic script, control the conversion of the MPA sub-page into an Iframe base page, and use the Iframe element to load the processing logic of the target sub-page.

3. The method according to claim 2, wherein the process of using the Iframe element to load the target subpage pointed to by the request for switching the subpage comprises the steps of: The base page parasitic script converts the initial URL carried in the request to switch the sub-page into a target URL with the same domain name as the Iframe base page, so that the Iframe element uses the modified target URL to load the target sub-page, and the initial URL is the URL of one of the native sub-pages of the MPA.

4. The method according to claim 3, further comprising the steps of: Sending a page refresh request for the target subpage to the server; The target subpage returned by the server is received, where the target subpage is obtained after the server redirects the target URL to the initial URL.

5. The method of claim 4, wherein the target URL has a predefined field to enable the server to distinguish the target URL from other paths.

6. The method according to claim 1, wherein the MPA subpage includes a common module, and the common module includes a plurality of modules that can be reused by the Iframe base page; Converting the MPA subpage into an Iframe base page includes the following steps: Save the common modules on the MPA subpage; Clear the child elements of the body element in the MPA subpage; Generate Iframe base DOM container and Iframe element; The Iframe element and the stored common modules are added to the Iframe base DOM container.

7. The method as claimed in claim 6, wherein the Iframe base page includes a frame common area and an Iframe element area, and the frame common area and the Iframe element area both include a number of the common modules, and the common modules include a header module and a menu module; the Iframe element is displayed in full screen, and the common modules in the frame common area and the Iframe element area are located in overlapping or substantially overlapping positions, and the common modules in the frame common area are displayed during the process of loading the target sub-page and are hidden after the target sub-page is loaded.

8. The method of claim 7, further comprising the steps of: Monitor and hijack the next page switching request; Displaying the common modules of the frame common area on the upper layer of the common modules of the Iframe element area; Loading the target subpage pointed to by the next switching page request through the Iframe element; After monitoring that the target sub-page has been loaded, the common modules in the common area of ​​the framework are hidden.

9. The method according to claim 8, wherein the common modules in the common area of ​​the framework are displayed on the upper layer of the common modules in the Iframe element area by setting absolute positioning.

10. The method according to claim 8, wherein the next page switching request comprises a page switching request triggered on a common module in the common area of ​​the framework and a page switching request triggered in the target sub-page.

11. The method according to claim 1, wherein the target sub-page is injected with a target sub-page parasitic script, and the method further comprises: In the case where the target sub-page parasitic script monitors and hijacks the page switching request on the target sub-page, the base page parasitic script is notified to load the new target sub-page through the Iframe element.

12. A method for loading a page based on an Iframe, the method comprising: When receiving a load request for an MPA subpage sent by a browser, returning the MPA subpage to the browser; When receiving the page switching request sent by the browser, the target sub-page pointed to by the page switching request is returned, so that the target sub-page is loaded based on the method according to any one of claims 1-11.

13. The method according to claim 12, wherein, upon receiving a page switching request sent by the browser, the step of returning the target subpage pointed to by the page switching request comprises: When a page refresh request for the target subpage is received, a predefined field in the target URL carried in the page refresh request is identified, the target URL is redirected to the initial URL, the target subpage is obtained, and the target subpage is returned to the browser.

14. A computer-readable storage medium having a computer program stored thereon, wherein when the program is executed by a processor, the method according to any one of claims 1 to 13 is implemented.

15. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 13 when executing the program.

16. A computer program product, comprising a computer program, which implements the method according to any one of claims 1 to 13 when executed by a processor.

Images