CN115952367A - A page display method, device and equipment - Google Patents

Abstract

The embodiment of the specification discloses a page display method, a page display device and page display equipment. The scheme can comprise the following steps: in the process of displaying the target page in the iframe element of the webpage in the earlier stage, modifying the first access path information of the webpage according to the second access path information of the target page, so that the history record information of the target browser is generated according to the modified access path information of the webpage by using the webpage, and the history record information of the browser is not generated by using the iframe element, so that the phenomenon that the webpage and the iframe element share the history record information of the browser is avoided. Subsequently, when the user uses the forward, backward and refresh functions of the browser to display the target page based on the history information of the browser, the access path information of the target page can be recovered according to the modified access path information of the web page corresponding to the history information of the target browser, so that the target page is displayed in the iframe element of the web page based on the access path information of the target page.

Description

A page display method, device and equipment

technical field

The present application relates to the technical field of webpages, in particular to a method, device and equipment for displaying webpages.

Background technique

The iframe element is a Hyper Text Markup Language (Hyper Text Markup Language, English abbreviation HTML) tag, and the iframe element can be used to create an inline frame (that is, an inline frame) that contains another document. Since another document can be conveniently embedded in an HTML document (for example, a web page) by using the iframe element, it has been widely used. However, since the webpage and iframe elements share browser history information, and the iframe element will be reset after the page is refreshed, it is easy to cause the browser's forward, backward, and refresh functions to fail, affecting the user experience during the page display process.

Based on this, how to use the iframe element in the web page to conveniently display the page on the basis of ensuring the normal operation of the browser function has become an urgent technical problem to be solved.

Contents of the invention

The page display method, device and equipment provided in the embodiments of this specification can use the iframe element in the web page to conveniently display the page on the basis of ensuring the normal operation of the browser function.

In order to solve the above-mentioned technical problems, the embodiments of this specification are implemented as follows:

A page display method provided in the embodiment of this specification includes:

Obtain the user's page display request for the target page displayed in the iframe element on the web page;

In response to the page display request, determine the access path information of the target page according to the historical record information of the target browser; wherein, the historical record information of the target browser is based on the historical display process of the target page according to the Generated by the modified access path information of the webpage, the modified access path information is used to reflect the first access path information of the web page and the second access path information of the target page;

According to the access path information of the target page, the target page is displayed in the iframe element on the webpage.

A page display method and device provided in an embodiment of this specification includes:

The first obtaining module is used to obtain the user's page display request for the target page displayed in the iframe element at the web page;

An access path determining module, configured to determine the access path information of the target page according to the target browser history record information in response to the page display request; wherein, the target browser history record information is in the target page Generated according to the modified access path information of the webpage during the history display process, the modified access path information is used to reflect the first access path information of the web page and the second access path information of the target page;

The page display module is configured to display the target page in the iframe element on the web page according to the access path information of the target page.

A page display device provided in an embodiment of this specification includes:

at least one processor; and,

a memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor, the instructions being executable by the at least one processor to enable the at least one processor to:

Obtain the user's page display request for the target page displayed in the iframe element on the web page;

In response to the page display request, determine the access path information of the target page according to the historical record information of the target browser; wherein, the historical record information of the target browser is based on the historical display process of the target page according to the Generated by the modified access path information of the webpage, the modified access path information is used to reflect the first access path information of the web page and the second access path information of the target page;

According to the access path information of the target page, the target page is displayed in the iframe element on the webpage.

At least one embodiment provided in this specification can achieve the following beneficial effects:

In the process of historically displaying the target page in the iframe element at the web page, the first access path information of the web page is modified according to the second access path information of the target page to generate the modified access path information of the web page, because The modified access path information of the web page can be used to reflect the first access path information and the second access path information, so that the web page can be used to generate target browser history record information according to the modified access path information of the web page, and The iframe element is no longer used to generate browser history information, so as to avoid sharing browser history information between web pages and iframe elements. Subsequently, when the user uses the browser's forward, backward, and refresh functions to display the target page again based on the target browser's historical record information, the modified access path of the web page corresponding to the target browser's historical record information can be used. Information, to restore the access path information of the target page, and then display the target page in the iframe element of the web page according to the access path information of the target page, so as to ensure the normal operation of the browser's forward, backward and refresh functions On the Internet, use the iframe element in the web page to display the page conveniently.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of this specification or the prior art, the following will briefly introduce the drawings that need to be used in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only These are some embodiments described in this application. Those skilled in the art can also obtain other drawings based on these drawings without any creative effort.

FIG. 1 is a schematic flowchart of a page display method provided by an embodiment of this specification;

FIG. 2 is a schematic diagram of a target page in an iframe element at a web page provided by an embodiment of this specification;

Fig. 3 is a schematic diagram of the swimming lane process corresponding to the page display method in Fig. 1 provided by the embodiment of this specification;

Fig. 4 is a schematic structural diagram of a page display device corresponding to Fig. 1 provided by the embodiment of this specification;

FIG. 5 is a schematic structural diagram of a page display device corresponding to FIG. 1 provided by the embodiment of this specification.

Detailed ways

In order to make the purpose, technical solutions and advantages of one or more embodiments of this specification more clear, the following will clearly and completely describe the technical solutions of one or more embodiments of this specification in conjunction with specific embodiments of this specification and corresponding drawings . Apparently, the described embodiments are only some of the embodiments in this specification, not all of them. Based on the embodiments in this specification, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the protection scope of one or more embodiments in this specification.

The technical solutions provided by each embodiment of this specification will be described in detail below in conjunction with the accompanying drawings.

In the prior art, in the process of using the original iframe element to display the pages of other websites or systems in the webpage, not only a browser history record information (history) may be generated for the webpage, but also a browser history information (history) may be generated for the iframe The element generates other browser history information (history), so that the web page and the iframe element will share the browser history information, which will easily cause the user to be unable to use the browser's forward, backward and other functions to achieve a complete historical browsing page jump. Therefore, in the process of using the iframe element, there may be a problem that the forward and backward functions of the browser become invalid.

In addition, after the user refreshes the webpage using the browser's refresh function, the uniform resource locator information (uniform resource locator, English abbreviation URL) of the iframe element at the webpage will be reset, so that the display cannot continue. The iframe element is displaying the page content before the webpage is refreshed, which may cause the problem that the refresh function of the browser may be invalid when the user uses the iframe element.

Based on this, how to use the iframe element in the webpage to conveniently display the page on the basis of ensuring the normal operation of the forward, backward and refresh functions of the browser has become a technical problem to be solved urgently.

In order to solve the defects in the prior art, this program provides the following embodiments:

FIG. 1 is a schematic flow chart of a page display method provided by an embodiment of this specification. From a program point of view, the subject of execution of this process may be a terminal device for displaying a target page in an iframe element on a web page, or an application program on the terminal device. As shown in Figure 1, the process may include the following steps:

Step 102: Obtain a user's page display request for the target page displayed in the iframe element on the web page.

In the embodiment of this specification, a web page is also called a Web page (web page), which can refer to a file organized in the format of Hyper Text Markup Language (HTML), and the user can view it in a browser or a Web application program. Open the webpage in the webpage to view the content in the webpage, or use the controls on the webpage to handle business. Wherein, the web application program is an application program that can be accessed through the web. Since the user only needs to have a browser to open the web application program without installing other software, it is more convenient to use.

The iframe element is a Hyper Text Markup Language (Hyper Text Markup Language, English abbreviation HTML) tag, and the iframe element can be used to create an inline frame (that is, an inline frame) that contains another document. Developers generally need to pre-embed an iframe element at the webpage, so that when a user visits the webpage, the target page can be displayed by triggering the iframe element.

In the embodiment of this specification, the user has usually performed an operation for displaying the target page before performing step 102, and the browser or the Web application responds to the operation by displaying the target page, so that the browser or the Web application processes Have target browser history record information corresponding to the displayed target page. Thus, the user can usually trigger any one of the browser forward control, browser back control and browser refresh control to generate the page display request in step 102 . That is, the page display request in step 102 may be a request for re-displaying the displayed target page using browser history information.

For ease of understanding, FIG. 2 is a schematic diagram of a target page in an iframe element at a webpage provided by an embodiment of this specification. As shown in FIG. 2 , an iframe element 202 may be set in a webpage 201. If the target page is displayed in , the user can trigger at least one of the browser back control 203, the browser forward control 204, and the browser refresh control 205 to make the device obtain the user's iframe element 202 for the web page 201. A page display request for the displayed target page.

In practical applications, an address bar 206 and a scroll bar 207 may also be displayed in the web page 201, so that the access path information of the web page and/or the target page displayed in the iframe element 202 is displayed through the address bar 206, and the scroll bar is used to display The user can drag the web page 210 and/or the target page displayed in the iframe element 202 to browse more page information.

Step 104: In response to the page presentation request, determine the access path information of the target page according to the target browser history record information; wherein, the target browser history record information is during the history display process of the target page Generated according to the modified access path information of the webpage, the modified access path information is used to reflect the first access path information of the web page and the second access path information of the target page.

In this embodiment of the specification, the target browser history record information is usually browser history record information generated for the displayed target page. Wherein, the browser history record information can be a history object, which can be used to record the access path information (for example, URL path and URL parameters) of the pages that the user has browsed, so that the user can use the browser history record information to implement browser forward, backward and refresh functions.

In the embodiment of the present specification, when a target page is displayed in an iframe element on a web page, the web page may generally have first access path information, and the target page displayed in the iframe element may generally have second access path information. In order to prevent the iframe element from sharing the browser history information with the webpage, and ensure that the page information in the target page displayed in the iframe element can be restored according to the browser history information, you can display the target page in the history, according to the The second access path information of the target page modifies the first access path information of the web page, so that the modified access path information of the web page can simultaneously reflect the second access path information and the first access path information , at this time, since the access path information of the web page has changed, the web page can use the modified access path information of the web page to generate a piece of target browser history record information, without having to target the iframe element separately The second access path information of the target page is used to generate a piece of browser history record information.

In the embodiment of this specification, since the target browser history record information can be used to record the modified access path information of the web page, and the modified access path information can be used to reflect the first access path information of the web page and the second access path information of the target page, so that the target browser history record information can be used to determine the access path information of the target page. Wherein, the access path information of the target page may be access path information for specific page information in the target page that has been displayed.

Step 106: Display the target page in the iframe element on the webpage according to the access path information of the target page.

In the embodiment of this specification, the page data of the target page that has been displayed can be obtained according to the access path information of the target page, and the obtained page data is displayed in the iframe element of the web page, so that The user can usually trigger the browser forward control, browser back control or browser refresh control to display the specific content in the target page again in the iframe element at the web page.

The method in Figure 1, in the process of historically displaying the target page in the iframe element at the web page, modifying the first access path information of the web page according to the second access path information of the target page to generate a modification of the web page access path information, since the modified access path information of the web page can be used to reflect the first access path information and the second access path information, the web page can be used to generate the web page according to the modified access path information of the web page The target browser history record information, instead of using the iframe element to generate browser history record information, to avoid sharing browser history record information between web pages and iframe elements. Subsequently, when the user uses the browser's forward, backward, and refresh functions to display the target page again based on the target browser's historical record information, the modified access path of the web page corresponding to the target browser's historical record information can be used. Information, to restore the access path information of the target page, and then display the target page in the iframe element of the web page according to the access path information of the target page, so as to ensure the normal operation of the browser's forward, backward and refresh functions On the Internet, use the iframe element in the web page to display the page conveniently.

Based on the method in FIG. 1 , the embodiment of this specification also provides some specific implementations of the method, which will be described below.

For ease of understanding, the principle of generating the history record information of the target browser is explained here.

Specifically, before step 102: obtaining the user's page display request for the target page displayed in the iframe element on the web page, it may also include:

Get browser history generation request for said target page shown.

In response to the browser history record generation request, modify the first access path information of the webpage according to the second access path information of the target page to obtain the modified access path information of the web page.

The target browser history record information is generated according to the modified access path information of the webpage.

In the embodiment of this specification, when the user directly enters the webpage address in the address bar, or jumps to other webpages by clicking a hyperlink in the webpage, or jumps to other webpages by changing location.href through a script, or, through a form When submitting to jump to other webpages, the browser usually uses the browser history information to record the changed webpage, so that the user can quickly switch to the visited webpage through the browser's forward and back buttons. Based on this, after the user performs the above operation on the target page at the terminal device, the terminal device can usually obtain a browser history record generation request for the displayed target page. In practical applications, since the time required for page resource loading and rendering is not consistent, when the terminal device obtains the browser history record generation request, the terminal device may have already displayed the target page, or may The target page has not been displayed yet, and is not specifically limited.

In the embodiment of this specification, when the iframe element is used to display the target page, the iframe element has the ability to call the function at the browser to generate the browser history information. Therefore, in order to prevent the iframe element from sharing the browser history information with the web page As a result, the forward and backward functions of the browser are invalid, and the browser history record generation request generated by the iframe element by calling a function for generating browser history record information can be intercepted, so as to prohibit the generation of the browser history record information of the iframe element.

In addition, the first access path information of the web page can also be modified according to the second access path information of the target page, so that the modified access path information of the web page can reflect the above two types of access path information at the same time. The access path information of the webpage has changed, so that the webpage will call a function for generating browser history record information, so as to generate the target browser history record information of the webpage according to the modified access path information of the webpage.

Based on this, each browser history record information at the browser in the embodiment of this specification is generated by calling a corresponding function from the webpage, so that the browser history record information shared by the iframe element and the webpage can be avoided. At the same time, since the target browser history information generated by the web page can be used to reflect the access path information of the target page at the web page and the iframe element at the same time, the web page and the iframe element at the location can be restored subsequently according to the target browser history information. The access path information of the target page of the browser, and then display the web page and the target page again, so as to ensure the normal operation of the browser's forward, backward, refresh and other functions.

In the embodiment of this specification, for the sake of understanding, the process of generating the modified access path information of the webpage is explained here.

In response to the browser history record generation request, according to the second access path information of the target page, the first access path information of the webpage is modified to obtain the modified access path information of the web page, which may specifically include:

Obtain uniform resource locator information of the webpage.

Obtain relative path information of the target page relative to the web page and path parameter information of the target page.

Splicing the uniform resource locator information of the webpage, the relative path information and the path parameter information to obtain the modified access path information of the webpage.

In the embodiment of this specification, an absolute path may refer to a complete path to find a file starting from a computer drive letter or a domain name, and an absolute path may be used to describe the complete structure of a file's directories at various levels. A relative path can refer to a path that uses a certain file as a starting point to find the location of another file, and a relative path can be used to reflect the path relationship between the path where a certain file is located and other files.

In this embodiment of the specification, the first access path information of a webpage may be an absolute path, for example, the uniform resource locator information (URL address information) of the webpage, and the second access path information of the target page may be the relative path of the target page. The relative path information of the webpage and the path parameter information of the target page, wherein the path parameter information of the target page may be a URL parameter (Query).

For ease of understanding, an example is used to illustrate this. For example, when the webpage is of the same source as the target page displayed in the iframe element of the webpage, it is assumed that the uniform resource locator information of the webpage can be "http://www.a. com/", and the absolute path of the target page can be "http://www.a.com/w/b.html", then the relative path information of the target page relative to the webpage can be "w/b.html ", in addition, the target page may also have path parameter information "?id=123". Based on this, the uniform resource locator information of the webpage, the relative path information and the path parameter information are spliced, and the obtained modified access path information of the webpage can be "http://www.a. com/w/b.html?id=123".

Or, when the source of the web page is different from the target page displayed in the iframe element at the web page, it is assumed that the uniform resource locator information of the web page may be "http://www.a.com/", and the The absolute path of the target page displayed in the iframe element can be "http://www.b.com/w/c.html", at this time, the relative path information of the target page relative to the web page can be the preset path " d.html", at this time, it is necessary to save the corresponding relationship among the relative path information, the uniform resource locator information of the web page and the absolute path of the target page. In addition, the target page can also have path parameters message "?id=123". Based on this, the uniform resource locator information of the webpage, the relative path information and the path parameter information are spliced, and the modified access path information of the obtained webpage can be "http://www.a.com/ d.html?id=123".

Subsequently, when displaying the target page again according to the modified access path information of the web page, it is necessary to firstly display the target page based on the pre-saved URL information of the web page, the absolute path of the target page, and the relative path information. The corresponding relationship between them, the relative path information "d.html" is extracted from the modified access path information of the web page, and then the absolute path "http://www.b" of the target page corresponding to the relative path information "d.html" is determined .com/w/c.html", and extract the path parameter information "?id=123" from the modified access path information of the webpage, so that the display can be displayed according to the obtained absolute path of the target page and the extracted path parameter information The displayed target page avoids the loss of the page state of the target page.

In practical applications, when using the iframe element to display the target page, the iframe element usually has the ability to call the function at the browser to generate the browser history information. Therefore, it is necessary to intercept the related function call operation of the iframe element and use the webpage To perform related function calls to avoid sharing browser history information between iframe elements and web pages.

Based on this, obtaining a browser history generation request for the displayed target page may specifically include:

Detecting the first calling request of the target page for the pushState function.

Correspondingly, according to the modified access path information of the webpage, the historical record information of the target browser is generated, which may include:

Using the webpage to generate a second call request for the pushState function carrying the modified access path information.

In response to the second call request, the target browser history record information is generated according to the modified access path information.

In the embodiment of this specification, the pushState function (that is, the history.pushState function/method) may be an application programming interface (Application Program Interface, English abbreviation API) for adding browser history records. In practical applications, the pushState function usually accepts three parameters: state, title, and url. Among them, state can be a state object related to the specified URL. When the popstate event is triggered, the object will be passed into the callback function. If you don't need this object, you can fill in null here. title can be the title of the new page, but currently browsers usually ignore this value, so you can fill in null here. The url may be access address information of a newly displayed page.

Since the iframe element usually calls the pushState function to request to generate a browser history record for the target page after displaying the target page, it is possible to detect and intercept the first call request of the target page for the pushState function, and, in After the first call request is intercepted, it is also possible to forbid further processing of the first call request, so as to prohibit the iframe element from generating browser history records by calling the pushState function. This prevents the frame element from sharing browser history information with the web page.

In addition, in order to record the user's access behavior to the target page in the iframe element, and to facilitate subsequent users to use the browser history to re-display the previously displayed target page, the target page in the iframe element is detected and intercepted for pushState After the first call request of the function, the first access path information of the webpage will be modified according to the second access path information of the target page to obtain a modified access path that can reflect both the first access path information and the second access path information information. At this time, since the access path information of the web page changes, the web page will initiate a second call request for the pushState function, and the second call request may carry the modified access path information of the web page as the input of the pushState function. ginseng. Subsequently, the second call request may be allowed to be processed, so that the web page can generate target browser history record information reflecting the modified access path information by itself by calling the pushState function.

In the embodiment of this specification, the method in FIG. 1 can be used to enable the user to display the target page again based on the browser history information by triggering the browser forward control, browser back control or browser refresh control. Therefore, the page presentation request mentioned in step 102 can be obtained by detecting the trigger event for the above controls.

Based on this, step 102: obtaining the user's page display request for the target page displayed in the iframe element at the web page may include:

detecting a popState event for displaying said target page; or,

Detect the beforeunload event for displaying said target page.

In the embodiment of this specification, in browser-related technologies, the data structure used to store browser history information can be called a history stack, and an access pointer can be used to indicate that the page currently displayed at the browser is in the history stack s position. When we use the forward and backward functions of the browser, the content of the history stack will not usually be changed, but the position of the access pointer will be moved, so that the browser can go to the corresponding browser history record information according to the moved pointer position. Display the page.

In practical applications, after the user triggers the browser forward control or the browser back control, or after the user calls the back, forward, and go methods of the history object, the access pointer used to move the history stack is usually triggered. Therefore, if the popState event for displaying the target page is detected, it can be regarded as having received a page display request for the target page displayed in the iframe element on the web page.

In the embodiment of this specification, when the user refreshes the currently displayed page in the browser, the beforeunload event is usually triggered. If the user needs to continue browsing the currently displayed page, the page can be displayed again based on the browser history information. Therefore, if the iframe element at the browser currently displays a target page and detects a beforeunload event for refreshing the page, it may also be regarded as having received a page display request for the target page displayed in the iframe element at the web page.

In the embodiment of this specification, when the user uses the forward and backward functions of the browser to display the target target page in the iframe element at the webpage again, if the page currently displayed by the browser also belongs to the page in the iframe element at the webpage, then At the time, the browser usually has created the iframe element in the dom. If you want to continue to display the target page in the created iframe element, you need to change the URL set in the created iframe element to the URL corresponding to the target page. It will cause the behavior of the iframe element to call the pushState function to generate the browser history information by itself, thus causing the problem that the iframe element and the web page share the browser history information.

Based on this, in order to avoid iframe element and webpage share browser history record information, described according to the access path information of described target page, display described target page in described iframe element at described webpage place, specifically can comprise:

If the created iframe element exists on the web page, destroy the created iframe element.

Create a newly added iframe element for displaying the target page according to the access path information of the target page.

In the embodiment of this specification, since the iframe element will not call the pushState function to generate the browser history record when setting the URL for the newly created iframe element, when it is determined according to the target browser history record information that it needs to be performed in the iframe element After displaying the access path information of the target page, you can check whether the iframe element has been created in the dom. If so, the iframe element is usually set with the URL of other pages. Therefore, in order to avoid changing the setting of the iframe element URL, you can delete the created iframe element, then create a new iframe element in the dom, and set the URL at the newly created iframe element according to the access path information of the target page, so as to ensure that the target page in the iframe element It can avoid the iframe element to call the pushState function to generate the browser history record by itself, so as to solve the possible problems caused by the iframe element and the web page sharing the browser history record information.

In practical applications, because people usually need to write the size of the iframe element into the program code in a hard-coded manner, the size of the iframe element is relatively fixed, resulting in poor adaptability between the iframe element and the target page it displays , affecting user experience.

Based on this, the creation of a new iframe element for displaying the target page according to the access path information of the target page may specifically include:

In the process of using the newly added iframe element to display the page information obtained from the access path information of the target page, the MutationObserver interface and the ResizeObserver interface are used to determine the target display size of the page information.

The target display size is set as the display size of the added iframe element.

In the embodiment of this specification, the Mutation Observer interface (change observer) may be an API interface for monitoring DOM changes. In practical applications, the Mutation Observer interface can be used to monitor the increase or decrease of nodes, changes of attributes, changes of text content, etc. Based on this, the Mutation Observer interface can be used to monitor the DOM initialization loading process corresponding to the target page, so as to obtain the display size of the page information in the target page.

The Resize Observer interface can be notified when the size of page elements changes. Based on this, you can also use the Resize Observer interface to obtain the display size of the page information in the target page.

In practical applications, since the Mutation Observer interface usually cannot monitor the display size change after the img loads the image, the Resize Observer interface can monitor the display size change after the img loads the image. Therefore, it can be combined with Mutation at the same time. The Observer interface and the Resize Observer interface determine the display size of each page information in the target page, and determine the sum of the display sizes of each page information in the target page as the target display size, so as to ensure the accuracy of the target display size. Subsequently, the display size of the iframe element can also be set as the target display size, so that the iframe element and the target page displayed can show good adaptability, which is conducive to improving user experience.

In practical application, if the scroll bar position of the current browser is lower, when the user uses the forward or back function of the browser to display the target page, because the initial display size of the iframe element is too small, there may be cases where the iframe element does not In the case of displaying in the visible area of the browser window, at this time, the Resize Observer interface is usually only triggered once when the DOM is initialized, so that neither the Mutation Observer interface nor the Resize Observer interface can monitor the display size after the img loads the image The change. However, compared with the initial display size of the iframe element, by setting the target display size determined by the Mutation Observer interface and the Resize Observer interface according to the DOM change as the display size of the iframe element, the function of increasing the display size of the iframe element can be realized. In this way, the iframe element is displayed in the visible area of the browser window, and the Resize Observer interface restores the monitoring function for the display size change after the img loads the image. Based on this, the subsequent display can also be monitored according to the ResizeObserver interface If the size changes, re-set the display size of the iframe element to further ensure good adaptability between the iframe element and the target page it displays. That is, the display size of the iframe element can be changed and set multiple times according to actual needs, so as to ensure the adaptability between the iframe element and the target page displayed.

In practical applications, if the display size set for the iframe element is larger than the target display size of the target page, it will usually cause the user to be unable to scroll to view the target page, affecting user experience.

Based on this, after setting the target display size as the display size of the newly added iframe element, it may also include:

Detecting the third calling request of the target page for the scrollTo function.

Determine the page scrolling parameter carried in the third call request.

Using the webpage to perform a page scrolling operation according to the page scrolling parameter.

In the embodiment of this specification, the scrollTo function can be used to locate the position of the scroll bar. If the user performs a page scrolling operation on the target page, the target page usually determines the page scrolling parameters according to the user's page scrolling operation, and uses the page scrolling parameters as an input parameter when calling the scrollTo function to scroll the page to a specified position. Wherein, the page scrolling parameter can be used to reflect how much distance needs to be scrolled in which direction from the current position to reach the target position, or can also be used to reflect the position information of the target position, which is not specifically limited.

In the embodiment of this specification, in order to ensure the scrolling function of the user on the target page and improve the user experience, the scroll bar at the iframe element can be canceled and the scroll bar at the web page can be reserved. After detecting the third call request of the target page for the scrollTo function , you can use the webpage to call the scrollTo function to control the scroll bar of the webpage to scroll, so as to realize the scrolling of the display area of the iframe element by controlling the scrolling of the webpage in the visible area of the browser window, and then achieve the scrolling of the iframe element The visual effect of the target page to ensure that users can scroll to view the target page, which is conducive to improving user experience.

In practical applications, when there is a cross-domain situation between the webpage and the target page, the webpage usually cannot obtain the variables and methods under the dom and window of the target page, thus affecting the application of the method in Figure 1 and the solution in the embodiment .

Based on this, the performing page scrolling operation according to the page scrolling parameters by using the webpage may specifically include:

The page scrolling parameter is sent to the webpage by using the postMessage function.

Using the webpage to generate a fourth call request for the scrollTo function that carries the page scrolling parameter.

In the embodiment of this specification, the PostMessage function can be used to put (send) the message into the message queue corresponding to the thread created by the specified window, and the message demander can use the GetMessage and PeekMessage functions to obtain the messages in the message queue. message, which can be used to solve the communication problem between the web page and the target page in the case of cross-domain. In practical applications, the postMessage function can be applied to the target page to write the page scrolling parameters obtained by the target page into the message queue, and the webpage can obtain the page scrolling parameters from the message queue, and then use the page scrolling parameters to call the The scrollTo function at the webpage to realize the scrolling of the target page.

In addition, in the embodiment of this specification, other information at the target page that the web page needs to obtain, such as the detection result of the first call request of the pushState function for the target page, the target page information determined for the target page Display size, etc., can be sent from the target page to the webpage by using the postMessage function to ensure the operation of the method in Figure 1 and the solutions in the embodiments, which will not be described in detail.

FIG. 3 is a schematic diagram of a swimming lane process corresponding to the page display method in FIG. 1 provided by the embodiment of this specification. As shown in FIG. 3 , the page display process may involve execution entities such as web pages and iframe elements.

In the browser history generation stage, if the user needs to display the target page in the iframe element at the webpage, the user can perform the first user operation by entering the access path in the webpage at the terminal device, clicking a link in the webpage, and the like. In response to the first user operation, the terminal device can display the target page in the iframe element on the web page, and if it detects the first call request of the target page for the pushState function, it can intercept the first call request and obtain the Uniform resource locator information, relative path information of the target page relative to the webpage, and path parameter information of the target page, for the uniform resource locator information of the webpage, the relative path information, and the path parameter information The information is spliced to obtain the modified access path information of the webpage. The terminal device may also use the web page to generate a second call request for the pushState function carrying the modified access path information, so as to generate target browser history information according to the modified access path information of the web page.

In the stage of displaying the target page, if the user needs to display the target page again based on the browser history information, the first step for triggering the browser forward control, browser back control or browser refresh control in the web page can be executed at the terminal device. Two user operations. After the terminal device detects the popState event or the beforeunload event of the target page in the iframe element used to display the web page, it can determine the access path information of the target page according to the historical record information of the target browser, and determine that the web page has The iframe element has been created. If the webpage has the created iframe element, destroy the created iframe element, and create a new iframe element for displaying the target page according to the access path information of the target page, and Yes, in the process of using the new iframe element to display the page information of the target page, use the MutationObserver interface and the ResizeObserver interface to determine the target display size of the page information, and set the target display size to the new iframe element display size to ensure the page display effect of the target page.

Subsequently, if the terminal device detects the third calling request of the target page for the scrollTo function, the target page can also be made to use the postMessage function to send the page scrolling parameters to the webpage, and use the webpage to generate The fourth call request for the scrollTo function of the page scrolling parameter, so as to realize the viewing angle effect of the scrolling target page.

Based on the same idea, the embodiment of this specification also provides a device corresponding to the above method. FIG. 4 is a schematic structural diagram of a page display device corresponding to FIG. 1 provided by the embodiment of this specification. As shown in Figure 4, the device may include:

The first obtaining module 402 is configured to obtain a user's page display request for the target page displayed in the iframe element on the web page.

The access path determination module 404 is configured to determine the access path information of the target page according to the target browser history record information in response to the page display request; wherein, the target browser history record information is in the target page Generated according to the modified access path information of the webpage during the historical presentation process, the modified access path information is used to reflect the first access path information of the web page and the second access path information of the target page.

The page display module 406 is configured to display the target page in the iframe element on the webpage according to the access path information of the target page.

Based on the device in FIG. 4 , the embodiment of this specification also provides some specific implementations of the device, which will be described below.

Optionally, the device in Figure 4 may also include:

The second acquiring module is configured to acquire a browser history generation request for the displayed target page.

A path modification module, configured to modify the first access path information of the web page according to the second access path information of the target page in response to the browser history record generation request, to obtain the modified access path of the web page path information.

A historical record generating module, configured to generate the target browser historical record information according to the modified access path information of the webpage.

Optionally, the path modification module may include:

The first obtaining unit is configured to obtain the uniform resource locator information of the webpage.

The second acquiring unit is configured to acquire relative path information of the target page relative to the web page and path parameter information of the target page.

The splicing unit is configured to splice the uniform resource locator information of the webpage, the relative path information and the path parameter information to obtain the modified access path information of the webpage.

Optionally, the second obtaining module may specifically be configured to: detect the first calling request of the target page for the pushState function.

The history record generating module may be specifically configured to: use the webpage to generate a second call request for the pushState function carrying the modified access path information; and, in response to the second call request, according to The modified access path information generates the target browser history record information.

Optionally, the page display request is a request generated by the user by performing a trigger operation on any one of the browser forward control, browser back control and browser refresh control.

Optionally, the first obtaining module 402 may be specifically configured to: detect a popState event used to display the target page; or detect a beforeunload event used to display the target page.

Optionally, the page display module 406 may include:

An element destroying unit, configured to destroy the created iframe element if the created iframe element exists on the web page.

The element creation unit is configured to create a newly added iframe element for displaying the target page according to the access path information of the target page.

Optionally, the page display module 406 may specifically be used for:

In the process of using the newly added iframe element to display the page information obtained from the access path information of the target page, the MutationObserver interface and the ResizeObserver interface are used to determine the target display size of the page information.

The target display size is set as the display size of the added iframe element.

Optionally, the device in Figure 4 may also include:

A detection module, configured to detect the third calling request of the target page for the scrollTo function.

A page scrolling parameter determining module, configured to determine the page scrolling parameter carried in the third call request.

A page scrolling operation executing module, configured to use the webpage to perform a page scrolling operation according to the page scrolling parameters.

Optionally, the page scrolling operation execution module can specifically be used for:

The page scrolling parameter is sent to the webpage by using the postMessage function.

Using the webpage to generate a fourth call request for the scrollTo function that carries the page scrolling parameter.

Based on the same idea, the embodiment of this specification also provides a device corresponding to the above method.

FIG. 5 is a schematic structural diagram of a page display device corresponding to FIG. 1 provided by the embodiment of this specification. As shown in Figure 5, device 500 may include:

at least one processor 510; and,

a memory 530 communicatively connected to the at least one processor; wherein,

The memory 530 stores instructions 520 executable by the at least one processor 510, the instructions are executed by the at least one processor 510, so that the at least one processor 510 can:

Obtain the user's page display request for the target page displayed in the iframe element on the web page.

In response to the page display request, determine the access path information of the target page according to the historical record information of the target browser; wherein, the historical record information of the target browser is based on the historical display process of the target page according to the The modified access path information of the webpage is generated, and the modified access path information is used to reflect the first access path information of the web page and the second access path information of the target page.

According to the access path information of the target page, the target page is displayed in the iframe element on the web page.

Each embodiment in this specification is described in a progressive manner, the same and similar parts of each embodiment can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device shown in FIG. 5 , since it is basically similar to the method embodiment, the description is relatively simple, and for relevant parts, refer to part of the description of the method embodiment.

In the 1990s, the improvement of a technology can be clearly distinguished as an improvement in hardware (for example, improvements in circuit structures such as diodes, transistors, and switches) or improvements in software (improvement in method flow). However, with the development of technology, the improvement of many current method flows can be regarded as the direct improvement of the hardware circuit structure. Designers almost always get the corresponding hardware circuit structure by programming the improved method flow into the hardware circuit. Therefore, it cannot be said that the improvement of a method flow cannot be realized by hardware physical modules. For example, a programmable logic device (Programmable Logic Device, PLD) (such as a field programmable gate array (Field Programmable GateArray, FPGA)) is such an integrated circuit, the logic function of which is determined by the user's programming of the device. It is programmed by the designer to "integrate" a digital system on a PLD, instead of asking a chip manufacturer to design and make a dedicated integrated circuit chip. Moreover, nowadays, instead of making integrated circuit chips by hand, this kind of programming is mostly realized by "logic compiler (logic compiler)" software, which is similar to the software compiler used when program development and writing, but before compiling The original code of the computer must also be written in a specific programming language, which is called a hardware description language (Hardware Description Language, HDL), and there is not only one kind of HDL, but many kinds, such as ABEL (Advanced Boolean Expression Language) , AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc., currently the most commonly used is VHDL (Very-High-Speed Integrated Circuit Hardware Description Language) and Verilog. It should also be clear to those skilled in the art that only a little logical programming of the method flow in the above-mentioned hardware description languages and programming into an integrated circuit can easily obtain a hardware circuit for realizing the logic method flow.

The controller may be implemented in any suitable way, for example the controller may take the form of a microprocessor or processor and a computer readable medium storing computer readable program code (such as software or firmware) executable by the (micro)processor , logic gates, switches, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), programmable logic controllers and embedded microcontrollers, examples of controllers include but are not limited to the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20 and Silicone Labs C8051F320, the memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art also know that, in addition to realizing the controller in a purely computer-readable program code mode, it is entirely possible to make the controller use logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded The same function can be realized in the form of a microcontroller or the like. Therefore, such a controller can be regarded as a hardware component, and the devices included in it for realizing various functions can also be regarded as structures within the hardware component. Or even, means for realizing various functions can be regarded as a structure within both a software module realizing a method and a hardware component.

The systems, devices, modules, or units described in the above embodiments can be specifically implemented by computer chips or entities, or by products with certain functions. A typical implementing device is a computer. Specifically, the computer may be, for example, 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 device, a game console, a tablet computer, a wearable device, or Combinations of any of these devices.

For the convenience of description, when describing the above devices, functions are divided into various units and described separately. Of course, when implementing the present application, the functions of each unit can be implemented in one or more pieces of software and/or hardware.

Those skilled in the art should understand that the embodiments of the present invention may be provided as methods, systems, or computer program products. Accordingly, the present invention can take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It should be understood that each procedure and/or block in the flowchart and/or block diagram, and a combination of procedures and/or blocks in the flowchart and/or block diagram can be realized by computer program instructions. These computer program instructions may be provided to a general purpose computer, special purpose computer, embedded processor, or processor of other programmable data processing equipment to produce a machine such that the instructions executed by the processor of the computer or other programmable data processing equipment produce a An apparatus for realizing the functions specified in one or more procedures of the flowchart and/or one or more blocks of the block diagram.

These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing apparatus to operate in a specific manner, such that the instructions stored in the computer-readable memory produce an article of manufacture comprising instruction means, the instructions The device realizes the function specified in one or more procedures of the flowchart and/or one or more blocks of the block diagram.

These computer program instructions can also be loaded onto a computer or other programmable data processing device, causing a series of operational steps to be performed on the computer or other programmable device to produce a computer-implemented process, thereby The instructions provide steps for implementing the functions specified in the flow chart or blocks of the flowchart and/or the block or blocks of the block diagrams.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

Memory may include non-permanent storage in computer-readable media, in the form of random access memory (RAM) and/or nonvolatile memory such as read-only memory (ROM) or flash RAM. Memory is an example of computer readable media.

Computer-readable media, including both permanent and non-permanent, removable and non-removable media, can be implemented by any method or technology for storage of information. Information may be computer readable instructions, data structures, modules of a program, 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 Disc Read-Only Memory (CD-ROM), Digital Versatile Disc (DVD) or other optical storage, Magnetic tape cartridge, tape disk storage or other magnetic storage device or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media excludes transitory computer-readable media, such as modulated data signals and carrier waves.

It should also be noted that the term "comprises", "comprises" or any other variation thereof is intended to cover a non-exclusive inclusion such that a process, method, article, or apparatus comprising a set of elements includes not only those elements, but also includes Other elements not expressly listed, or elements inherent in the process, method, commodity, or apparatus are also included. Without further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article or apparatus comprising said element.

Those skilled in the art should understand that the embodiments of the present application may be provided as methods, systems or computer program products. Accordingly, the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

This application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including storage devices.

The above descriptions are only examples of the present application, and are not intended to limit the present application. For those skilled in the art, various modifications and changes may occur in this application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included within the scope of the claims of the present application.

Claims (21)

1. A page display method comprises the following steps:

acquiring a page display request of a user for a target page displayed in an iframe element at a webpage;

responding to the page display request, and determining access path information of the target page according to the historical record information of the target browser; the target browser historical record information is generated according to modified access path information of the webpage in the historical display process of the target page, and the modified access path information is used for reflecting first access path information of the webpage and second access path information of the target page;

and displaying the target page in the iframe element of the webpage according to the access path information of the target page.

2. The method of claim 1, before the obtaining the page display request of the user for the target page displayed in the iframe element of the web page, further comprising:

acquiring a browser history record generation request aiming at the displayed target page;

responding to the browser history record generation request, and modifying the first access path information of the webpage according to the second access path information of the target page to obtain modified access path information of the webpage;

and generating the historical record information of the target browser according to the modified access path information of the webpage.

3. The method according to claim 2, wherein the generating of the request in response to the browser history record includes modifying first access path information of the web page according to second access path information of the target page, and obtaining modified access path information of the web page, and specifically includes:

acquiring uniform resource locator information of the webpage;

acquiring relative path information of the target page relative to the webpage and path parameter information of the target page;

and splicing the uniform resource locator information, the relative path information and the path parameter information of the webpage to obtain modified access path information of the webpage.

4. The method according to claim 2, wherein the obtaining of the browser history record generation request for the displayed target page specifically includes:

detecting a first call request of the target page for a pushState function;

generating the target browser history record information according to the modified access path information of the webpage, specifically comprising:

generating a second calling request carrying the modified access path information and aiming at the pushState function by utilizing the webpage;

and responding to the second calling request, and generating the historical record information of the target browser according to the modified access path information.

5. The method of claim 1, wherein the page show request is a request generated by the user by performing a trigger operation for any one of a browser forward control, a browser back control, and a browser refresh control.

6. The method according to claim 5, wherein the acquiring a page display request of a user for a target page displayed in an iframe element of a web page specifically includes:

detecting a popState event for displaying the target page; or,

and detecting a beforeunload event for displaying the target page.

7. The method according to claim 5, wherein the displaying the target page in the iframe element of the web page according to the access path information of the target page specifically includes:

if the created iframe element exists in the webpage, destroying the created iframe element;

and creating a newly added iframe element for displaying the target page according to the access path information of the target page.

8. The method according to claim 7, wherein creating, according to the access path information of the target page, an iframe element for displaying the target page includes:

in the process of displaying the page information acquired from the access path information of the target page by using the newly added iframe element, determining the target display size of the page information by using a MutationObserver interface and a ResizeObserver interface;

and setting the target display size as the display size of the newly added iframe element.

9. The method of claim 8, wherein after setting the target presentation size to the presentation size of the new iframe element, further comprising:

detecting a third call request of the target page for a scrollTo function;

determining a page rolling parameter carried in the third calling request;

and executing page scrolling operation by utilizing the webpage according to the page scrolling parameter.

10. The method of claim 9, wherein the performing, by using the web page, a page scrolling operation according to the page scrolling parameter specifically includes:

sending the page scrolling parameter to the webpage by using a postMessage function;

and generating a fourth call request carrying the page rolling parameter and aiming at the scrollTo function by utilizing the webpage.

11. A page display method and device comprises the following steps:

the first acquisition module is used for acquiring a page display request of a user for a target page displayed in an iframe element at a webpage;

the access path determining module is used for responding to the page display request and determining access path information of the target page according to the historical record information of the target browser; the target browser history record information is generated according to modified access path information of the webpage in the history display process of the target page, and the modified access path information is used for reflecting first access path information of the webpage and second access path information of the target page;

and the page display module is used for displaying the target page in the iframe element of the webpage according to the access path information of the target page.

12. The apparatus of claim 11, further comprising:

the second acquisition module is used for acquiring a browser history record generation request aiming at the displayed target page;

the path modification module is used for responding to the browser history record generation request, modifying the first access path information of the webpage according to the second access path information of the target page, and obtaining the modified access path information of the webpage;

and the history record generating module is used for generating the history record information of the target browser according to the modified access path information of the webpage.

13. The apparatus of claim 12, the path modification module, comprising:

the first acquisition unit is used for acquiring uniform resource locator information of the webpage;

a second obtaining unit, configured to obtain relative path information of the target page with respect to the web page and path parameter information of the target page;

and the splicing unit is used for splicing the uniform resource locator information, the relative path information and the path parameter information of the webpage to obtain the modified access path information of the webpage.

14. The apparatus of claim 12, wherein the second obtaining module is specifically configured to: detecting a first call request of the target page for a pushState function;

the history record generation module is specifically configured to: generating a second call request carrying the modified access path information and aiming at the pushState function by utilizing the webpage; and responding to the second calling request, and generating the target browser historical record information according to the modified access path information.

15. The apparatus of claim 11, the page show request being a request generated by the user by performing a trigger operation for any of a browser forward control, a browser back control, and a browser refresh control.

16. The apparatus of claim 15, wherein the first obtaining module is specifically configured to:

detecting a popdate event for displaying the target page; or,

and detecting a beforeunload event for displaying the target page.

17. The apparatus of claim 15, the page presentation module, comprising:

the element destroying unit is used for destroying the created iframe element if the webpage has the created iframe element;

and the element creating unit is used for creating a new iframe element for displaying the target page according to the access path information of the target page.

18. The apparatus of claim 17, wherein the page display module is specifically configured to:

in the process of displaying the page information acquired from the access path information of the target page by using the newly added iframe element, determining the target display size of the page information by using a MutationObserver interface and a ResizeObserver interface;

and setting the target display size as the display size of the newly added iframe element.

19. The apparatus of claim 18, further comprising:

the detection module is used for detecting a third call request of the target page for the scrollTo function;

a page scrolling parameter determining module, configured to determine a page scrolling parameter carried in the third invocation request;

and the page rolling operation execution module is used for executing page rolling operation by utilizing the webpage according to the page rolling parameters.

20. The apparatus according to claim 19, wherein the page scrolling operation executing module is specifically configured to:

sending the page scrolling parameter to the webpage by using a postMessage function;

and generating a fourth call request carrying the page rolling parameter and aiming at the scrollTo function by utilizing the webpage.

21. A page display apparatus comprising:

at least one processor; and the number of the first and second groups,

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor to enable the at least one processor to:

acquiring a page display request of a user for a target page displayed in an iframe element at a webpage;

responding to the page display request, and determining access path information of the target page according to the historical record information of the target browser; the target browser history record information is generated according to modified access path information of the webpage in the history display process of the target page, and the modified access path information is used for reflecting first access path information of the webpage and second access path information of the target page;

and displaying the target page in the iframe element of the webpage according to the access path information of the target page.

Images