CN119760269A

CN119760269A - Iframe-based page loading method, device, program product and medium

Info

Publication number: CN119760269A
Application number: CN202411535938.3A
Authority: CN
Inventors: 邬亮
Original assignee: Hangzhou Alibaba Overseas Internet Industry Co ltd
Current assignee: Hangzhou Alibaba Overseas Internet Industry Co ltd
Priority date: 2024-10-30
Filing date: 2024-10-30
Publication date: 2025-04-04

Abstract

A method, device, program product and medium for loading pages based on Iframe comprises loading an MPA sub-page in a browser, wherein the MPA sub-page is one of original sub-pages of MPA, monitoring and hijacking a switching page request of the MPA sub-page, converting the MPA sub-page into an Iframe base page, wherein the Iframe base page is used for creating and maintaining an Iframe element, and loading a target sub-page pointed by the switching page request by using the Iframe element. The method and the device can reduce the time consumption of requesting the server to load the Iframe base page for the first time, are compatible with the existing URL of the MPA, and enable the user to experience the SPA effect by using the old URL stored locally. The specification also provides an electronic device and a computer storage medium.

Description

Iframe-based page loading method, device, program product and medium

Technical Field

The present disclosure relates to the field of internet technologies, and in particular, to a method, an apparatus, a program product, and a medium for loading pages based on Iframe.

Background

In the field of software development, MPA (Multiple Page Application, multi-page Application) and SPA (SINGLE PAGE Application, single-page Application) are two common web Application architectures. MPA consists of a number of individual pages, each of which is a complete HTML (hypertext markup language) document. When a user browses, each time a link is clicked, the browser is caused to load a new HTML page. The SPA is characterized in that when a user browses, the page is not reloaded, and part of the content of the page is dynamically updated through JavaScript.

In order to take advantage of the advantages of SPA, such as faster page loading speed, better user experience, and more efficient front-end development process, developers expect to implement the effect of page loading under SPA architecture under MPA architecture. Iframe is typically employed to achieve the effects of SPA loading pages. Iframe is a tag in HTML that is used to embed another page in the current page (i.e., a sub-page is embedded in the current page). However, the Iframe scheme adopted at present has the problems that the first loading sub-page performance is poor and the URL existing in the MPA cannot be compatible.

Disclosure of Invention

In a first aspect, the specification provides a method for loading pages based on Iframe, which comprises loading MPA sub-pages in a browser, wherein the MPA sub-pages are one of original sub-pages of MPA, monitoring and hijacking a switching page request of the MPA sub-pages, converting the MPA sub-pages into Iframe base pages, wherein the Iframe base pages are used for creating and maintaining Iframe elements, and loading target sub-pages pointed by the switching page request by using the Iframe elements.

In a second aspect, the specification provides a method for loading pages based on Iframe, which comprises the steps of returning MPA sub-pages to a browser when receiving loading requests of the MPA sub-pages sent by the browser, and returning target sub-pages pointed by the switching page requests when receiving switching page requests sent by the browser, so that the target sub-pages are loaded based on the method of the first aspect.

In a third aspect, the present description provides a computer-readable storage medium, on which a computer program is stored, which program, when being executed by a processor, carries out the method of the first or second aspect.

In a fourth aspect, the present description provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method of the first or second aspect when executing the program.

In a fifth aspect, the present description provides a computer program product comprising a computer program which, when executed by a processor, implements the method of the first or second aspect.

In the process of switching pages, the instruction is not jumped to an independent new page in a traditional MPA page switching mode, but hijacking a page switching request generated on an MPA sub-page, and loading a target sub-page in an Iframe element constructed on a current sub-page, so that a user always stays on a currently displayed page to wait for loading the target sub-page, and blank and jump flash phenomena cannot occur. According to the technical scheme provided by the specification, the following effects can be seen, firstly, the specification does not change the first loading process of the existing sub-pages of the MPA, the time consumption of the first loading of the sub-pages is not increased, secondly, when a page switching event occurs on the displayed MPA sub-pages, an Iframe base page does not need to be loaded, but the Iframe base page is locally generated, so that the time consumption of requesting the server to first load the Iframe base page can be reduced, and secondly, the fact that the target sub-page loaded in the Iframe element is an original sub-page of the MPA rather than an SPA page can be seen, and therefore the current URL of the MPA is compatible, and a user can experience the SPA effect by using the locally stored old URL.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

FIG. 1A is a schematic diagram of an MPA front end browser page, shown in accordance with an embodiment of the present description;

FIG. 1B is a partial flow diagram illustrating a method of loading pages based on Iframe by an MPA front end in accordance with an embodiment of the present description;

FIG. 2 is a partial flow diagram illustrating a replacement of an MPA subpage with an Iframe base page, according to an embodiment of the present description;

FIG. 3 is a partial flow diagram illustrating another Iframe based method of loading pages according to an embodiment of the present disclosure;

FIG. 4 is a partial flow diagram illustrating a method for a server to handle Iframe-based loading of pages according to an embodiment of the present disclosure;

FIG. 5 is a signaling diagram of MAP front end interactions with a server in an application instance;

FIG. 6 is a page frame diagram of an Iframe base page in a browser;

FIG. 7 is a schematic diagram of a display popup window in an Iframe base page of the prior art;

FIG. 8 is a schematic diagram of components of a common module in an Iframe base page having interaction requirements with sub-pages in the prior art;

FIG. 9A is a schematic diagram of a base page before loading of a target sub-page, according to an embodiment of the present disclosure;

FIG. 9B is a schematic diagram of a base page during target sub-page loading, according to an embodiment of the present disclosure;

FIG. 10 is a partial flow diagram illustrating a method of Iframe-based loading of pages to achieve the page effects of FIGS. 9A and 9B according to an embodiment of the present description;

FIG. 11 is a partial flow diagram of another method of Iframe-based loading of pages according to the 9A and 9B page effects shown in embodiments of the present description;

fig. 12 is a schematic diagram of a hardware structure of a computer device according to an embodiment of the present disclosure.

Detailed Description

Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to 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 the present specification. Rather, they are merely examples of apparatus and methods consistent with aspects of one or more embodiments of the present description as detailed in the accompanying claims.

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 method may include more or fewer steps than described in this specification. Furthermore, a single step described in this specification may be described as being split into multiple steps in other embodiments, while multiple steps described in this specification may be described as being combined into a single step in other embodiments.

User information (including but not limited to user equipment information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, presented data, etc.) referred to in this specification are both information and data authorized by the user or sufficiently authorized by the parties, and the collection, use and processing of relevant data requires compliance with relevant laws and regulations and standards of the relevant country and region, and is provided with corresponding operation portals for the user to choose authorization or denial.

The application developed based on the Web page at present can be realized based on the MPA architecture or the SPA architecture. MPA is a traditional Web application model in which each page is a separate HTML document. When a user accesses a different URL in the browser, the server returns a different HTML page. Each page jump may require reloading the entire page from the server, which may result in a longer loading time. If the method is realized based on the MPA architecture, each page which is required to be accessed by the application can be independently developed and deployed, the collaboration cost is low, but when the pages are switched, the pages are refreshed integrally, obvious white screens and flash hops appear, and the user experience is poor.

With respect to MPA architecture, SPA is a modern web page application mode where the entire application is loaded through a single page, and user interaction with the application does not result in an overall reload of the page. SPA typically uses client routing to manage different views and data, which means that when a user navigates to different parts of an application, only the necessary data and components will be loaded or updated, rather than the entire page. Thus, SPAs typically concentrate all functions and logic in one application. In the SPA, interaction between the user and the application program does not cause reloading of the whole page, but responds to the interaction of the user by dynamically updating the content of the current page, so that when the page is switched, the page only performs local content refreshing, and the user experience is good.

Thus, developers expect that the background management system implemented based on the MPA architecture, which has been developed, can reach the experience that the SPA architecture can bring to users.

However, if the cost of directly rewriting the MPA architecture into the SPA architecture is very high, all sub-page code is rewritten according to the SPA architecture specification. There are currently techniques to simulate the effects of displaying sub-pages under the SPA architecture by constructing the Iframe element at the MPA page.

Iframe is a tag in HyperText markup language (HyperText Markup Language, HTML) and Iframe element is a page element in HTML. Page elements are the various basic components that make up the visible portion of a web page. In web page design and development, these elements work cooperatively to provide information and interactive functions for the user. Common page elements such as text, pictures, buttons, hyperlinks, etc. The Iframe element may embed another page in the current page. The Iframe element creates an inline frame (INLINE FRAME) that may contain another web page as if a small browser window were open in the current page, which allows the web page content to be displayed across domains. In this specification, another page embedded in the current page is referred to as a sub-page.

The Iframe element may contain another document and may be scaled like a picture or placed anywhere on the page. Therefore, sub-page code does not substantially need to be modified when loading sub-pages using the Iframe element. Since the Iframe element is only embedded in the local area of the current page, the sub-page is loaded by using the Iframe element, and for a user, the content of the local area of the page is only changed, and the page is not refreshed entirely, so that white screen and flash jump do not occur when the sub-page is switched.

The Iframe element itself may be considered a container. In this specification, the page that dynamically creates and maintains an Iframe element is referred to as an Iframe base page. The page frame of the Iframe base page can only contain a navigation frame, no specific page content exists, and no route control is needed, so that the Iframe base page loads and displays corresponding sub-page content by updating the src attribute of the Iframe.

The conventional process of loading sub-pages using the Iframe element is generally to load the Iframe base page first and then load the SPA sub-pages in the Iframe base page, which requires a new set of URLs for SPA to be introduced, since SPA route hopping is based on a specific implementation (e.g., front-end route such as vue-router, act-router, etc.), and MPA route is a document hop (NAVIGATING ACROSS DOCUMENTS) of a native browser, URLs bound by sub-pages of two frames are different, so loading the SPA sub-pages in the MPA page means replacing the route of the original sub-pages of MPA with the route of the SPA sub-pages, that is, a new set of URLs for SPA sub-pages are required. This may result in the URLs of the original sub-pages of the MPA not being compatible, and the new SPA sub-page URLs must be used to experience the SPA effect achieved by the Iframe. For longer online applications, changing a new set of URLs can have a greater impact on the user. On the other hand, it can be seen that loading an Iframe base page followed by a sub-page results in poor loading performance of the first sub-page loaded with Iframe.

Unlike the traditional scheme of loading the Iframe base page first and then loading the SPA sub-page, the present specification proposes a solution without loading the Iframe base page, and the present specification does not introduce a new SPA sub-page, but rather uses the existing native sub-page of the MPA, so that the user can enjoy the experience effect of the SPA by using the old URL in the MPA without perception of the user. The following describes the embodiments in detail.

The MPA framework is composed of an MPA front end and a service end. The MPA front-end refers in this specification to the part of the web site or application that the user can interact with directly, including all visual elements and functions that the user sees and interacts with in the browser. The server side refers to a part which is not directly oriented to a user in a network application or a website and is responsible for processing tasks such as a request sent by a front end, managing a database, executing business logic, processing data storage and the like. Fig. 1A is an interface schematic diagram of an MPA front-end browser. A browser will typically include a toolbar 10 and a content area 11 of the browser, the toolbar 10 providing a variety of functionality to assist a user in browsing web pages and managing browsing sessions. Common basic components of the toolbar 10 are, for example, an address bar (URL bar), a forward/backward button, a refresh button, and the like. The content area 11 of the browser is where the browser displays a web page. It is the main area where users interact with web page content, including text, pictures, video, audio, and other elements created by HTML, CSS, and JavaScript. The user inputs the URL in the address bar, requests the corresponding webpage which is expected to be navigated to through the URL to the server, and renders and presents the webpage data in the content area of the browser to the user after the server returns the webpage data. The web page rendered in the browser content area generally includes a frame common area and a page data area 112. The frame common area refers to an area of a common module, such as a header110, a menu bar menu 111, etc., which can be multiplexed, contained in different web pages. The page data area 112 is used to load page data of the present web page.

Referring to fig. 1A, fig. 1B is a partial flowchart of a method for loading pages based on Iframe according to an embodiment. The flow chart may be a flow that occurs at the MPA front-end.

S101, loading an MPA sub-page in a browser, wherein the MPA sub-page is one of the original sub-pages in the MPA;

S102, monitoring and hijacking a switching page request of an MPA sub-page, and converting the MPA sub-page into an Iframe base page, wherein the Iframe base page is the page for creating and maintaining the Iframe element;

s103, loading a target sub-page pointed to by the switching page request by using the Iframe element.

In step S101, a MAP sub-page is loaded by inputting any one of the old URLs of the MPA in the address bar of the browser, where the loaded MPA sub-page is a sub-page that is native in the MPA, and there is no change before and after using the embodiment, and in each execution flow, if different sub-pages are loaded, the domain name of the URL of each sub-page may be different, so that the user will not change before and after using the scheme of the embodiment, and will not destroy the usage habit of the user on the MPA before modification. When returning to the MPA subpage corresponding to this URL, the server injects a specific script (e.g., may be a JavaScript script) to implement the operation of the switch page request that will snoop and hijack the MPA subpage and control logic for the Iframe base page, e.g., control processing logic that converts the MPA subpage to the Iframe base page and loads the target subpage with the Iframe element. This script is referred to herein as a base page parasitic script.

In S102, "hijacking" refers to changing or taking over the default operation that the MPA sub-page should originally perform by programming means. In the present disclosure, the way of hijacking the switching page request may be through multiple ways, for example, the first way may globally monitor click events on MPA sub-pages, filter events clicking on element a in the callback function, and process the events to implement the function of hijacking the page request. For example, when a software developer wants to perform certain operations when a user clicks on an element, a function may be bound to the click event of the element as a callback function. For example, when a user clicks on the button of element a, desiring to trigger a click event function, this function may be set as a callback function of the click event of the button.

The second way may be to rewrite the window open function, implementing the hijacking page request function by, for example, hijacking or modifying the default pop-up window behavior.

The approach of applicant to implementing the switch page request hijacking function is not exhaustive.

In this embodiment, the time for converting the MPA sub-page into the Iframe base page is executed when the page switching request occurs, rather than converting the MPA sub-page into the Iframe base page before the page switching request occurs, so that the user is more unaware. Of course, the software developer may select other occasions to perform the operation of converting the Iframe base page according to the actual requirements, for example, the MPA sub-page may be converted into the Iframe base page after the MPA sub-page is loaded in step S102.

The translation of the MPA sub-page into an Iframe base page referred to in S102 may refer to the dynamic replacement of the DOM (Document Object Model ) of the MPA sub-page to an Iframe base DOM. When a browser loads a web page, it parses the HTML document and builds the DOM. The DOM presents an HTML document as nodes of a tree structure, each node representing a portion of the document, such as an element, attribute, or text. Common node types include Element nodes (elements) representing HTML tags such as < div >, < span >, etc. Iframe element is one of the element nodes. In the DOM, a container generally refers to an element that may contain other nodes (elements, text, notes, etc.) for organizing and structuring page content. A common DOM container type is, for example, < HTML > is the root element of the entire HTML document, all other elements being its child elements. < body > is a structural container that is the body part of a document, containing visible page content. The < header > is also a structural container that typically contains the header content of the page, such as navigation bars and titles. Reference in the following description to the base DOM container of an Iframe base page also refers to a structural container that may contain the Iframe elements, organize and structure the contents of the target sub-page.

The process of replacing the DOM (Document Object Model ) of the MPA sub-page with the Iframe base DOM can be implemented with reference to the following manner, and the software developer can also be replaced with other common manners under the guidance of this manner.

When dynamically replacing the DOM of an MPA sub-page, all sub-elements in the body elements in the MPA sub-page may be emptied, for example, the page body elements may be selected first, and then the following expression is used:

document. Queryselector ('body') INNERHTML = "empty subelement.

In this expression, a document. QuerySelecter ('body') will select a < body > element in the document, and the INNERHTML attribute is used to obtain or set the HTML content of this < body > element.

Dynamically building a base Dom container, adding an Iframe element and other necessary page elements in the base Dom container, and then inserting the Iframe element into a body element, for example, appdchild is a JavaScript method. The appdchild can change the DOM, inserting the specified node actually into the document, so each page element in the DOM container can be inserted into a body element using appdchild.

In some embodiments, some common modules of MPA sub-pages may need to be multiplexed in the Iframe base page, e.g., the frame common area of MPA sub-pages typically includes a Header module of the Header column above and a menu bar menu module to the left, which may be multiplexed by the Iframe base page. Thus, the common module to be multiplexed may be saved to memory before the sub-element of the MPA sub-page body element is emptied, and may be implemented by using a selector, for example, a specific expression may be const elemHeader =document. By doing so, the common module does not need to be rendered again when being used again next time, so that the processing efficiency is improved. Further, in the DOM container of the built Iframe base page, the saved common modules are added to the Iframe base DOM container.

Fig. 2 is an example of S102 converting MPA sub-pages into Iframe base pages, and the process of S102 is understood in conjunction with the steps of fig. 2.

The method includes saving a common module on an MPA sub-page (S1021), then clearing sub-elements of body elements in the MPA sub-page (S1022), creating an Iframe element, and an Iframe base DOM container (S1023), and adding the Iframe element and the stored common module to the created Iframe base DOM container (S1024).

The process of replacing the DOM of the MPA sub-page with the DOM of the Iframe base page in the various embodiments above may be presented by some or all of the multiple expressions in the examples below, which the designer may develop the design from line as desired, and notably, are not the only implementations in practice.

Taking javascript as an example of this,

Iframe base DOM container creation

const elemContainer=document.createElement('div');

Iframe element creation/creation

const elemIframe=document.createElement('iframe');

Addition of Iframe elements in created Iframe base DOM container

elemContainer.appendChild(elemIframe);

Adding common modules in created Iframe base DOM containers

elemContainer.appendChild(elemHeader);

Insert/insert created Iframe base Dom container into body element

document.querySelector('body').appendChild(elemContainer)

In S103, loading the target sub-page with the Iframe element may be achieved by changing the src attribute of the Iframe, i.e. the src attribute of the Iframe is set to the URL of the target sub-page.

However, in some embodiments, a very large number of subdomain names may be included in the MPA. The sub-page URLs carried in the switch page request may be different from the domain name of the Iframe base page, and the security restrictions of the browser specify that JS do not allow modification of URLs of different domain names when dynamically modifying URLs in the browser, which means that the Iframe element does not have permission to set the initial URL of the target sub-page carried in the switch page request to the src attribute value of Iframe, so in these embodiments, the applicant's design solution needs to perform the same domain name conversion on the initial URL of the target sub-page carried in the switch page request in order to be able to load the target sub-page in the Iframe base page.

The specification designs a unified mapping strategy for domain names, and can map URLs of different domain names into URLs of the same domain name so as to convert an initial URL of a target sub-page carried in a switching page request into a URL of the same domain name as that of an Iframe base page, and the converted target URL is used as the URL of the target sub-page. The initial URL is the URL of one of the native sub-pages of the MPA. This domain name translation process may be performed by a base page parasitic script. For convenience and easier understanding of the transformation method process, two specific transformation modes are provided below, one for query parameter transformation and one for path transformation.

The query parameter conversion may be performed by adding the initial URL carried in the handover page request as a query parameter to the URL of the Iframe base page. For example, the converted target URL is:

https://<base_domain>/<base_path>?childPage=<encoded_new_child_page_url>

Where < base_domain > is the Iframe base page domain name, < base_path > is the Iframe base page path, CHILDPAGE is the query parameter name, < encoded_new_child_page_url > is the query parameter value obtained by encodeURIComponent encoding the initial URL of the target sub-page carried in the handover page request.

The path conversion is performed by adding the initial URL of the target sub-page carried in the switch page request as a part of the path to the domain name of the Iframe base page, and a path prefix is usually added between the two paths. For example, the converted target URL is https:// < base_domain >/< prefix_path >/< new_child_page_url >, wherein < base_domain > is the Iframe base page domain name, < base_path > is the path prefix, and < new_child_page_url > is the initial URL of the target sub-page.

After converting the initial URL of the target sub-page to the target URL, the initial URL displayed in the browser may be replaced in the Iframe element with the target URL after the in-field conversion, e.g., a history. The history.reprofstate is a Web API, which is part of HTML5, allowing software developers to replace current history entries in the browser's history. This function is one method of a window. When the history.reprplace () method is used, the current history entry can be replaced instead of adding a new entry, and the update URL does not need to reload the page, so that the SPA page loading effect can be better imitated.

In some embodiments, after the target sub-page is loaded in the Iframe element, the user may trigger the action of refreshing the target sub-page again in the toolbar of the browser. The action of refreshing the page can enable the MPA front end to send the destination URL currently displayed by the browser address bar to the server, and request to return to the corresponding webpage. However, since the target URL of the target sub-page after the in-domain conversion is not a truly existing URL, the action that the user refreshes the browser to request the target URL may cause an error that the server returns to the page. The applicant thus addresses this problem by adopting a method of redirecting to the initial URL of the target sub-page before conversion at the server after the MPA client sends a page refresh request for the target sub-page to the server, in response to the refresh demand of the user.

Those skilled in the art will typically be familiar with configuring redirection on the nminix server when designing a redirection scheme for URLs. Nginx is a high-performance HTTP and reverse proxy server that can be configured to achieve unified mapping and redirection of domain names. However, the applicant has found that when the target URL is redirected by using the nginnx server, domain name redirection fails in most cases, and the login page is returned. The applicant has found through extensive research that the failure is caused by the security restriction of https access by the nmginx server, which needs to be bypassed by adding a white list. However, the MPA background management system usually has a large number of domain names, and the domain names are redirected with each other, so that the cost of adding the white list is high, which is not beneficial to the later maintenance. The applicant has further found that the nginnx server does not have security restrictions on http access and can directly access. The applicant has therefore proposed that redirection between domain names can be achieved by first redirecting to the target server via Http URI (Uniform Resource Identifier ), which typically has redirection logic for Http URIs to Https URI.

To facilitate the server to identify the URL and other paths that need to be redirected, special characters may be added to the target URL when converting the initial URL to the target URL, where the target URL has this predefined field, so that the server can distinguish the target URL from other paths. The method comprises the steps that a conversion rule for converting an initial URL into a target URL is preset by a server side and a base page parasitic script of an MPA front end, after the target URL is received, the server side recognizes the target URL converted by the same domain through special characters, then the initial URL is obtained through regular matching reverse conversion, and then the webpage corresponding to the initial URL is redirected.

Taking the prefix character Iframe-child as this special character as an example, the following illustrates a redirection method corresponding to the service end when converting the target URL into the initial URL:

# identifying target URLs translated by the same Domain name through Path Prefix character Iframe-child

location~^/iframe-child/{

# Reverse to get initial URL using regular matching algorithm and redirect using rewrite commands

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

}

In some embodiments, the Iframe base page may also need to handle communication issues with the target sub-page within the Iframe element, e.g., page switch events may occur again later in the target sub-page, so software developers need to consider how to design the Iframe base page and interaction issues within the Iframe element. Under the direction of this need, in these embodiments, applicants provide a solution for the way in which a switch page request occurs subsequently to a target sub-page loaded in an Iframe base page.

When loading the target sub-page, a script may be injected into the target sub-page to subsequently monitor and hijack the next page-switching request occurring on the target sub-page, which is referred to herein as a target sub-page parasitic script. After the target sub-page parasitic script hives to the switch page request, the base page parasitic script is notified, and as an example, the target sub-page parasitic script can implement cross-domain communication through a postMessage API, and the postMessage function notifies the base page parasitic script of the switch page request, and the base page parasitic script controls the Iframe base page to load the next target page. Since the Iframe base DOM is already built when the target sub-page is first loaded, the new target sub-page is loaded directly using the built Iframe element. 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 above domain name unified mapping strategy, the scr attribute value of the Iframe is replaced by the target URL, and the initial URL of the new target sub page displayed in the browser address bar is replaced.

The relationships between the steps in the process of loading the target sub-page and refreshing the target sub-page in the above embodiments can be understood in conjunction with the flowchart of fig. 3.

S301, loading an MPA sub-page in a browser;

s302, injecting a base page parasitic script into the MPA sub-page;

S303, the base page parasitic script hives and monitors a switching page request of the MPA sub-page;

s304, the base page parasitic script constructs a base DOM container and an Iframe element of the Iframe base page;

S305, the base page parasitic script clears the body element of the MPA sub-page and stores the public module;

s306, adding an Iframe element and a stored public module into the constructed base DOM container by the base page parasitic script;

S307, the parasitic script of the base page judges whether the initial URL in the page switching request and the URL of the Iframe base page belong to the same domain name, if so, S309 is executed, and if not, S308 is executed;

S308, converting the initial URL into a target URL by the base page parasitic script, and replacing the initial URL in the browser with the target URL;

S309, loading a target sub-page by the base page parasitic script through an Iframe element;

S310, injecting a target sub-page parasitic script in the loading process of the target sub-page.

S311, the browser receives a refresh request of a user;

s312, the browser sends a refresh request to the server;

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 operation of refreshing the page after re-executing the steps of S301-S310.

When loading a sub-page with advertisements using the Iframe element, the page content in the loaded target sub-page is mostly lost. It has been found through a number of experiments that the applicant has proven that this functionality is that the browser decides that it is an advertising page based on the URI of the sub-page that is opened, and that the applicant has proposed that the ads field in the URI of the target sub-page be changed to market during the conversion of the initial URL to the target URL, because in the URI the "ads" field is typically associated with advertisement tracking and attribution, information about the advertisement campaign such as advertisement series, advertisement group or specific advertising creative can be included, and the "ads" field is replaced with "market" such that the emphasis of the URI is shifted from advertisement specific tracking to a wider market or source tracking, thus solving the problem of displaying the sub-page with advertisements.

The Iframe-based page loading method described in FIG. 4 may be performed at the MPA server.

S401, corresponding to the S101, returning the MPA sub-page to the browser under the condition that a loading request of the MPA sub-page sent by the browser is received;

s402, corresponding to S103 above, returns the target sub-page pointed to by the page switching request when receiving the page switching request sent by the browser.

As described above, in some embodiments, after the target sub-page is loaded in the Iframe element, it is possible that the user triggers the action of refreshing the target sub-page again in the toolbar of the browser. The action of refreshing the page can enable the MPA front end to send the destination URL currently displayed by the browser address bar to the server, and request to return to the corresponding webpage. However, since the target URL of the target sub-page after the in-domain conversion is not a truly existing URL, the action that the user refreshes the browser to request the target URL may cause an error that the server returns to the page. The applicant thus addresses this problem by adopting a method of redirecting to the initial URL of the target sub-page before conversion at the server after the MPA client sends a page refresh request for the target sub-page to the server, in response to the refresh demand of the user. After redirecting the target URL back to the initial URL, the server acquires the target sub-page and returns the target sub-page to the browser. For the server, the received request is not required to be a page refreshing request or a page switching request, it only needs to judge whether the URL is a converted URL (referred to as a destination URL herein) according to special characters in the URL carried in the received request, if so, redirection is performed, and the corresponding web page is obtained after the initial URL is restored. The manner of redirecting the liquid can be referred to above, and will not be described again.

Fig. 5 is an example illustration of an application scenario incorporating the above various embodiments. The MPA front end establishes connection with the server through the browser. The software developer designs a device management system based on the MPA framework, where the device management system has MPA subpages such as a "device list", and "device details" of each device.

In S501, the MPA front-end opens an MPA sub-page of "device list" in the browser, triggering to request the sub-page of "device list" to the server;

in S502, the server returns a sub-page of an equipment list;

S503, in the loading process, a script file named as "base client" is injected into the sub-page of the device list as a parasitic script of the base page.

S504, when a user clicks a button component of the A device and triggers an event switched to a sub-page of 'details of the A device', after the event is monitored by a script file of a base client, the event is hijacked;

S505, the "base client" script starts executing operations of building an Iframe base DOM container and building an Iframe element.

S506, before adding each page element to the Iframe base DOM container, the common module which can be multiplexed by the Iframe base page in the device list sub page is stored, and then each sub element of the device list sub page body element is emptied.

S507, after the Iframe base DOM container and the Iframe element are created, adding the Iframe element and the stored common module to the DOM container of the Iframe base.

S508, sending the initial URL of the sub-page of the equipment detail A to a server through an Iframe element;

In S509, after the server returns the "a device details" sub-page, the "a device details" sub-page is loaded with the Iframe element. When the sub-page of the "A device detail" is loaded, the initial URL of the sub-page of the "A device detail" is converted into a target URL with the same domain name as the Iframe base page, and the initial URL of the "A device detail" displayed in the browser is replaced by the target URL. And, in the loading process, a script file named "CHILD CLIENT" is injected as a target sub-page parasitic script into the "a device detail" sub-page (S510).

In S511, the 'CHILD CLIENT' script file monitors a switching page event occurring on the 'A equipment details' in the iframe element, wherein the event is a sub-page of the 'maintenance record' of the A equipment which the user wants to jump to;

in S512, the "CHILD CLIENT" script file notifies the "base client" script of the monitored switch page event;

in S513, the service side returns a "maintenance record of a device" sub-page through the Iframe element request;

In S514, the server returns a "maintenance record of a device" sub-page;

In S515, the user clicks the "page refresh" component of the browser toolbar, sends the target URL to the server, requests to refresh the Iframe base page, and after receiving the request, the server recognizes that the URL needs to be redirected according to the path prefix Iframe-child, so as to redirect the target URL to the initial URL of the "maintenance record of a device" sub-page (S516), and returns the page resource of the initial URL to the browser (S517). The MPA front-end re-executes S501.

According to applicant's multiple test data verification, when the sub-pages are switched using the scheme of the above embodiments, the pages are not refreshed entirely and white screen appears, so FCP time for opening the sub-pages for the non-first time (i.e. without replacing MPA sub-pages with Iframe base pages) is 0.FCP (First Contentful Paint, first content drawing) is an important web page performance indicator that measures the time a page is loaded from the beginning to the rendering of the first DOM element (e.g., text, image, canvas, etc.). FCP is an important moment when users perceive the loading speed of websites, and fast FCP can make users feel that websites respond quickly. It can be seen that this specification does not burden page loading. According to the test data display, the time consuming performance monitoring index data of the index LCP (Largest Contentful Paint, maximum content drawing) of the time for evaluating the main content seen by the user for the first time in the page loading process and the performance monitoring index data after sub-page access are not degraded.

The applicant has further found that loading the rendered target sub-page according to the various embodiments above can exhibit the effect shown in fig. 6, where the Iframe element on the Iframe base page 60 typically occupies a content area (Iframe element area 603 in the figure) outside of the common area of the frame (e.g., head header module 601 and menu column menu module 602 in the navigation frame), which can cause the sub-page popup to be out of center (as shown in the schematic diagram of fig. 7). This is a functional vulnerability that the developer cannot allow for product on-line, and in addition, after the Iframe base page 60 loads the target sub-page, the frame common area is outside of the Iframe element and the target sub-page is within the Iframe element, which can be cumbersome when the common modules in the frame common area need to interact with the target sub-page in a complex manner. For example, as shown in fig. 8, if the AI assistant is located in the loader module and the AI assistant needs to read and write the Dom structure of the target sub-page, the complexity of cross-domain communication causes the AI assistant to be unable to realize access to the Dom structure of the target sub-page because the target sub-page and the loader component are respectively different domain names. In addition, "top bar" is a horizontal navigation bar of the top header of the web page, typically containing navigation links to websites, brand identification, search boxes, user login information, and other important shortcut operations. The top bar is an important interface element for the interaction of a user with a website, has obvious influence on the user experience and navigation flow of the website, and is still a problem to be solved for realizing the purpose of top bar flash-free and scrolling along with pages.

It is worth pointing out that, for the above problems that when the Iframe element displays the sub-page, the popup window cannot be centered, and that the cross-domain communication between the common module in the common area of the frame and the Dom in the Iframe element is difficult to achieve, there is a solution in the conventional technology, and this solution proposes to include one Iframe element displayed in full screen and several hidden Iframe elements in the Iframe base page. When switching to the target sub-page, hiding the currently displayed Iframe element, and displaying the Iframe element of the target sub-page in a full screen mode. However, although the solution can avoid the problems that the popup window of the target sub-page cannot be centered and communication across the iframes is complex, loading the sub-pages carried by each of the iframes respectively when the first sub-page is entered can result in long time consumption of the first loading of the sub-pages, especially when the number of the sub-pages is relatively large, and retaining a plurality of iframes can cause page jamming.

The present specification proposes that only one example of Iframe is required to solve the above-mentioned problems of window failure to center and complex communication across iframes.

9A-9B are schematic layouts of an Iframe base page according to embodiments of the present disclosure, where the Iframe base page 901 includes a frame common area and an Iframe element area 902, each of which includes several common modules, such as a header module 9011 of the frame common area and a header column 9021 of the Iframe element, a menu module 9012 of the frame common area and a header column 9022 of the Iframe element. The Iframe elements are displayed full screen, the common modules in the frame common area and Iframe element area 902 are in overlapping or substantially overlapping positions, FIG. 9A illustrates the page layout that appears after no page switch request is received and the loading is completed for the target sub-page, in which state the common modules in the Iframe base page are hidden (shown in dashed boxes in the figure), while the common modules in the Iframe element area are placed uppermost and in the display state, FIG. 9B is a page layout representation of the target page loading process, with the common modules on the Iframe base page overlaid over the common modules of the Iframe elements in the display state (the dashed boxes represent the overlaid common modules of the Iframe element area) when the target sub-page is loaded.

Fig. 10 depicts some of the steps performed to present the schemes depicted in fig. 9A and 9B:

In S1001, the loaded target sub-page on the Iframe base page is displayed, the common module on the Iframe base page is set to a hidden state, the common module same as the Iframe base page is contained in the Iframe element, the common module of the Iframe element is overlapped on the common module of the Iframe base page, and the Iframe element is displayed in full screen.

For example, an Iframe element full screen presentation may be achieved by setting the attributes width and height of the Iframe element to 100% after the initial URL to target URL conversion process described in the various embodiments above. And conceals the common module of the Iframe base page by setting the style attribute of the Iframe base page to display: none or visibility: hidden.

Html code example:

<div class="header"style="display:none;">header content</div>

<div class="left-menu"style="display:none;">menu content</div>

<Iframewidth="100%"height="100%"src="/childPageOne"></iframe>

</div>

In S1002, the next switch page request is listened to and hijacked. By way of example, because the common module of the Iframe base page is in a hidden state, a switch page request that occurs on the target subpage in the Iframe element may be performed by the target subpage parasitic script in the embodiments above. When a switch page request occurs on a target sub-page in the Iframe element, the target sub-page parasitic script may be notified by a postMessage function, and the Iframe base page parasitic script performs a subsequent series of processes in response to the switch page request.

The triggering path of the next page switching request can also be implemented in various manners as listed above, for example, by a user clicking on the element a to monitor click events, filtering the event clicking on the element a in a callback function and processing the event, or rewriting a window/open function to process the event, or providing a new attribute locationspa/href to replace the event, and the like.

In S1003, when it is monitored that a switch page request occurs, the common module of the Iframe base page is displayed above the common module of the Iframe element. Illustratively, this can be accomplished by setting absolute positioning, e.g., by setting the style attribute of the Iframe base page to 'position: absolute; top:0px; left:0px; z-index:1,' hide the header module of the Iframe base page to the upper layer of the header module in the Iframe element.

It should be noted that, before executing S803, the state of the common module in the Iframe element may be synchronized to the expanded state of the common module of the Iframe base page, such as menu bar' S menu, as needed. When covering is performed, the states of the two public modules are consistent, so that a user can not visually perceive the change.

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 switch page request.

In S1005, after the completion of the new sub-page load is monitored, the common module of the Iframe base page is again hidden. Illustratively, sub-page load completion may be perceived by listening to the onload events of Iframe, and common modules of the Iframe base page are 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 module, the user does not feel the hidden changes. After hiding, the user can complete all interactive operations on the newly loaded sub-page, like the sub-page opened directly in the browser.

According to the scheme, the effect of SPA is achieved through the mode that the common module of the full-screen Iframe element loading target sub-page and the Iframe base page is covered in the sub-page loading process, and the user experience is obviously improved. The scheme uses the Iframe to load the old page, the compatibility is very good, and the migration cost is very low, because the old page only needs to carry out a small amount of code transformation, and development and release mode change are not needed.

A flowchart for loading and displaying a target sub-page through an Iframe element in full screen is described below in connection with fig. 11.

S1101, loading the MPA sub-page in the browser;

s1102, injecting a base page parasitic script into the MPA sub-page;

S1103, the parasitic script of the base page hives and monitors the switching page request of the MPA sub-page;

S1104, the base page parasitic script constructs a base DOM container and an Iframe element of the Iframe base page;

S1105, the base page parasitic script clears the body element of the MPA sub-page and stores the public module;

S1106, adding an Iframe element and a stored public module into the constructed base DOM container by the base page parasitic script, setting the Iframe element to be full screen, and covering the public module of the frame public area of the Iframe base page on the upper layer of the public module of the Iframe element and setting the public module to be in a display state;

S1107, the parasitic script of the base page judges whether the initial URL in the page switching request and the URL of the Iframe base page belong to the same domain name, if so, S1108 is executed, and if not, S1109 is executed;

S1108, converting the initial URL into a target URL by the base page parasitic script, and replacing the initial URL in the browser with the target URL;

S1109, loading a target sub-page by the base page parasitic script through an Iframe element;

S1110, injecting a target sub-page parasitic script in the loading process of the target sub-page;

S1111, after the completion of loading of the target sub-page is monitored, setting the common module of the frame common area of the Iframe base page to a hidden state.

S1112, when the target sub-page parasitic script monitors the next page switching request, the base page parasitic script is notified to re-execute S1106-S1111.

The present specification also provides a distributed system including one or more computer devices, fig. 12 is a schematic hardware architecture diagram of a computer device of a distributed system, which includes a processor 1201, a memory 1202, an input/output interface 1203, a communication interface 1204, and a bus 1205, according to an embodiment of the present specification. Wherein the processor 1201, the memory 1202, the input/output interface 1203 and the communication interface 1204 enable communication connection between each other inside the device via a bus 1205.

The processor 1201 may 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 may also include a graphics card, which may be NVIDIA TITAN X graphics card, 1080Ti graphics card, or the like.

The Memory 1202 may be implemented in the form of Read Only Memory (ROM), random access Memory (Random Access Memory, RAM), static storage, dynamic storage, etc. Memory 1202 may store an operating system and other application programs, and when the techniques provided by embodiments of the present disclosure are implemented in software or firmware, the associated program code is stored in memory 1202 and executed by processor 1201.

The input/output interface 1203 is used to connect with the input/output module to realize information input and output. The input/output module may be configured as a component in a device (not shown) or may be external to the device to provide corresponding functionality. Wherein the input devices may include a keyboard, mouse, touch screen, microphone, various types of sensors, etc., and the output devices may include a display, speaker, vibrator, indicator lights, etc.

The communication interface 1204 is used to connect a communication module (not shown in the figure) to enable the present device to interact with other devices for communication. The communication module may implement communication through a wired manner (such as USB, network cable, etc.), or may implement communication through a wireless manner (such as mobile network, WIFI, bluetooth, etc.).

The bus 1205 includes a path to transfer information between various components of the device, such as the processor 1201, the memory 1202, the input/output interface 1203, and the communication interface 1204.

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, the device may further include other components necessary for realizing normal operation. Furthermore, those skilled in the art will appreciate that the above-described apparatus may include only the components necessary to implement the embodiments of the present disclosure, and not all of the components shown in the figures.

Embodiments of the present disclosure provide a computer program product comprising a computer program which, when executed by a processor, implements the method of any of the embodiments of the present disclosure.

The disclosed embodiments also provide a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the method of any of the previous embodiments.

Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer 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 disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.

From the foregoing description of the embodiments, it will be apparent to those skilled in the art that the disclosed embodiments may be implemented in software plus a necessary general purpose hardware platform. Based on such understanding, the technical solutions of the embodiments of the present disclosure may be embodied in essence or a part contributing to the prior art in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., including several instructions to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method described in the embodiments or some parts of the embodiments of the present disclosure.

The system, apparatus, module or unit set forth in the above embodiments may be implemented in particular by a computer apparatus or entity, or by an article of manufacture having some function. A typical implementation device is a computer, which may be in the form of a personal computer, laptop computer, cellular telephone, camera phone, smart phone, personal digital assistant, media player, navigation device, email device, game console, tablet computer, wearable device, or a combination of any of these devices.

The various embodiments in this disclosure are described in a progressive manner, and identical and similar parts of the various embodiments are all referred to each other, and each embodiment is mainly described as different from other embodiments. In particular, for the device embodiments, since they are substantially similar to the method embodiments, the description is relatively simple, and reference is made to the description of the method embodiments for relevant points. The apparatus embodiments described above are merely illustrative, in which the modules illustrated as separate components may or may not be physically separate, and the functions of the modules may be implemented in the same piece or pieces of software and/or hardware when implementing embodiments of the present disclosure. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present invention without undue burden.

The foregoing is merely a specific implementation of the embodiments of this disclosure, and it should be noted that, for a person skilled in the art, several improvements and modifications may be made without departing from the principles of the embodiments of this disclosure, which should also be considered as the protection scope of the embodiments of this disclosure.

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.