A page display method, device and equipment

Abstract

The embodiment of the present specification discloses a page display method, device and equipment. The scheme can include: in the process of displaying the target page in the iframe element of the front-end display web page, modifying the first access path information of the web page according to the second access path information of the target page, so as to generate target browser history record information according to the modified access path information of the web page by using the web page, and no longer use the iframe element to generate the browser history record information, so as to avoid that the web page and the iframe element share the browser history record information. Subsequently, when the user uses the forward, backward and refresh functions of the browser to display the target page based on the browser history record information, the access path information of the target page can be restored according to the modified access path information of the web page corresponding to the target browser history record information, so as to display the target page in the iframe element of the web page based on the access path information of the target page.

Description

Technical Field

[0001] This application relates to the field of web page technology, and in particular to a method, apparatus and device for displaying web pages. Background Technology

[0002] The iframe element is a Hyper Text Markup Language (HTML) tag used to create inline frames that contain another document. It's widely used because it allows for easy embedding of another document within an HTML document (e.g., a webpage). However, because webpages and iframes share browser history, and iframes reset after a page refresh, browser navigation (forward, back, and refresh) can become unresponsive, negatively impacting the user experience.

[0003] Therefore, how to conveniently display web pages using iframe elements while ensuring the normal operation of browser functions has become an urgent technical problem to be solved. Summary of the Invention

[0004] The embodiments of this specification provide a page display method, apparatus, and device that can conveniently display pages using iframe elements in web pages while ensuring the normal operation of browser functions.

[0005] To solve the above-mentioned technical problems, the embodiments in this specification are implemented as follows:

[0006] This specification provides an embodiment of a page display method, including:

[0007] Get the page display request from the user for the target page displayed in the iframe element of the webpage;

[0008] In response to the page display request, the access path information of the target page is determined based on the target browser history information; wherein, the target browser history information is generated based on the modified access path information of the webpage during the historical display process of the target page, and the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page;

[0009] Based on the access path information of the target page, the target page is displayed in the iframe element at the webpage.

[0010] This specification provides an embodiment of a page display method apparatus, comprising:

[0011] The first acquisition module is used to acquire the page display request of the user for the target page displayed in the iframe element of the webpage;

[0012] The access path determination module is used to respond to the page display request and determine the access path information of the target page based on the target browser history information; wherein, the target browser history information is generated based on the modified access path information of the webpage during the historical display process of the target page, and the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page;

[0013] The page display module is used to display the target page in the iframe element of the webpage according to the access path information of the target page.

[0014] This specification provides an embodiment of a page display device, comprising:

[0015] At least one processor; and,

[0016] A memory communicatively connected to the at least one processor; wherein,

[0017] The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to:

[0018] Get the page display request from the user for the target page displayed in the iframe element of the webpage;

[0019] In response to the page display request, the access path information of the target page is determined based on the target browser history information; wherein, the target browser history information is generated based on the modified access path information of the webpage during the historical display process of the target page, and the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page;

[0020] Based on the access path information of the target page, the target page is displayed in the iframe element at the webpage.

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

[0022] During the process of displaying the target page within an iframe element on a webpage's history page, the first access path information of the webpage is modified based on the second access path information of the target page to generate the modified access path information. Since this modified access path information reflects both the first and second access path information, the webpage itself can be used to generate the target browser history information based on this modified access path information, instead of using the iframe element to generate browser history information, thus avoiding the webpage and iframe element sharing browser history information. Subsequently, when the user uses the browser's forward, back, and refresh functions to re-display the target page based on the target browser history information, the access path information of the target page can be recovered based on the modified access path information of the webpage corresponding to the target browser history information. Then, the target page is displayed within the iframe element on the webpage based on this access path information, thus conveniently displaying the page using the iframe element while ensuring the normal operation of the browser's forward, back, and refresh functions. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in the embodiments or prior art of this specification, the drawings used in the description of the embodiments or prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0024] Figure 1 A flowchart illustrating a page display method provided in an embodiment of this specification;

[0025] Figure 2 This is a schematic diagram of a target page within an iframe element of a webpage, provided as an embodiment of this specification.

[0026] Figure 3 The embodiments provided in this specification correspond to Figure 1 A schematic diagram of the swimlane flow for page display methods in the text;

[0027] Figure 4 The embodiments provided in this specification correspond to Figure 1 A schematic diagram of the structure of a page display device;

[0028] Figure 5 The embodiments provided in this specification correspond to Figure 1 A schematic diagram of the structure of a page display device. Detailed Implementation

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

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

[0031] In existing technologies, when using native iframe elements to display pages from other websites or systems within a webpage, not only may a browser history record be generated for the webpage, but also for the iframe element. This results in the webpage and iframe element sharing browser history information, which can easily prevent users from using the browser's forward and back navigation functions to navigate through the entire browsing history. Therefore, using iframe elements may cause browser forward and back navigation functions to malfunction.

[0032] In addition, after a user refreshes a webpage using the browser's refresh function, the Uniform Resource Locator (URL) information of the iframe element on that webpage is reset, thus preventing the iframe element from continuing to display the page content that was being displayed before the webpage refresh. This can cause the browser's refresh function to malfunction when the user is using the iframe element.

[0033] Therefore, how to conveniently display the page using the iframe element in the webpage while ensuring the normal operation of the browser's forward, back, and refresh functions has become an urgent technical problem to be solved.

[0034] To address the shortcomings of existing technologies, this solution provides the following embodiments:

[0035] Figure 1 This is a flowchart illustrating a page display method provided in an embodiment of this specification. From a programming perspective, the executing entity of this process can be a terminal device used to display the target page within an iframe element of a webpage, or an application application on the terminal device. Figure 1 As shown, the process may include the following steps:

[0036] Step 102: Obtain the page display request from the user for the target page displayed in the iframe element of the webpage.

[0037] In this specification, a webpage is also referred to as a web page, which can refer to a file organized in Hyper Text Markup Language (HTML) format. Users can open the webpage in a browser or web application to view its content or use controls on the webpage to conduct business. A web application is an application that can be accessed via the web. Since users only need a browser to open a web application without needing to install other software, it offers good ease of use.

[0038] The iframe element is a Hyper Text Markup Language (HTML) tag used to create inline frames that contain another document. Developers typically embed iframe elements in advance on a webpage so that when a user visits the webpage, the iframe element can be triggered to display the target page.

[0039] In this embodiment, the user has typically performed an operation to display the target page before executing step 102, and the browser or web application has displayed the target page in response to this operation, resulting in the browser or web application having target browser history information corresponding to the displayed target page. This allows the user to typically trigger any one of the browser's 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 can be a request to re-display the previously displayed target page using the browser history information.

[0040] For ease of understanding, Figure 2 This is a schematic diagram of a target page within an iframe element at a webpage, provided as an embodiment of this specification. Figure 2 As shown, webpage 201 may contain an iframe element 202. If a user has previously displayed a target page in the iframe element 202, the user can trigger at least one of the browser back control 203, browser forward control 204, and browser refresh control 205 to make the device obtain the page display request of the user for the target page displayed in the iframe element 202 of webpage 201.

[0041] In practical applications, webpage 201 may also display an address bar 206 and a scroll bar 207. The address bar 206 can be used to display the access path information of the target page displayed in the webpage and / or iframe element 202, and the scroll bar can be used to allow users to drag the target page displayed in the webpage 210 and / or iframe element 202 to browse more page information.

[0042] Step 104: In response to the page display request, determine the access path information of the target page based on the target browser history information; wherein, the target browser history information is generated based on the modified access path information of the webpage during the historical display of the target page, and the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page.

[0043] In the embodiments of this specification, the target browser history information is typically browser history information generated for target pages that have already been displayed. This browser history information can be a history object, which can be used to record the access path information (e.g., URL path and URL parameters) of pages that the user has previously viewed, thereby allowing the user to use the browser history information to implement the browser's forward, backward, and refresh functions.

[0044] In the embodiments of this specification, when a target page is displayed within an iframe element on a webpage, the webpage typically has first access path information, while the target page displayed within the iframe element typically has second access path information. To avoid the iframe element and the webpage sharing browser history information, and to ensure that page information in the target page displayed within the iframe element can be recovered based on the browser history information, the first access path information of the webpage can be modified according to the second access path information of the target page during the historical display of the target page. This allows the modified access path information of the webpage to simultaneously reflect both the second and first access path information. Since the access path information of the webpage has changed, the webpage can use the modified access path information to generate a target browser history record without needing to generate a separate browser history record for the second access path information of the target page within the iframe element.

[0045] In this embodiment of the specification, since the target browser history information can be used to record the modified access path information of the webpage, and the modified access path information can be used to reflect the first access path information of the webpage and the second access path information of the target page, the access path information of the target page can be determined using the target browser history information. The access path information of the target page can be access path information for specific page information within the target page that has already been displayed.

[0046] Step 106: Based on the access path information of the target page, display the target page in the iframe element at the webpage.

[0047] In this embodiment of the specification, page data of a previously displayed target page can be obtained based on the access path information of the target page. By displaying the obtained page data in the iframe element of the webpage, users can typically trigger the browser forward control, browser back control, or browser refresh control to re-display the specific content of the target page in the iframe element of the webpage.

[0048] Figure 1 The method described above modifies the first access path information of a webpage within an iframe element at the webpage's history display location. This modified access path information reflects both the first and second access paths, allowing the webpage to generate its own browser history information without relying on the iframe element. This avoids the webpage and iframe sharing browser history information. Subsequently, when a user uses browser navigation (forward, back, refresh) to re-enable the target page based on its history, the modified access path information allows the webpage's access path information to be reconstructed. The target page is then displayed within the iframe element at the webpage's location, ensuring the browser's navigation functions (forward, back, refresh) work correctly while conveniently displaying the page using the iframe element.

[0049] based on Figure 1 In addition to the method described in the embodiments of this specification, some specific implementation schemes of the method are also provided, which will be described below.

[0050] To facilitate understanding, the principle behind the generation of history information in the target browser will be explained here.

[0051] Specifically, before step 102: obtaining the user's page display request for the target page displayed in the iframe element of the webpage, it may also include:

[0052] Obtain a request to generate the browser history for the target page that has already been displayed.

[0053] In response to the browser history generation request, the first access path information of the webpage is modified according to the second access path information of the target page to obtain the modified access path information of the webpage.

[0054] Based on the modified access path information of the webpage, the target browser history information is generated.

[0055] In the embodiments of this specification, when a user directly enters a webpage address in the address bar, or jumps to another webpage by clicking a hyperlink within a webpage, or jumps to another webpage by changing the location.href in a script, or jumps to another webpage by submitting a form, the browser usually uses browser history information to record the changed webpage so that the user can quickly switch to the visited webpage using the browser's forward and back buttons. Based on this, when a user performs the above operations on a target page on a terminal device, the terminal device can usually obtain a browser history 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 generation request, the terminal device may have already displayed the target page or may not have displayed it yet; this is not specifically limited.

[0056] In the embodiments of this specification, since the iframe element has the ability to call functions in the browser to generate browser history information when displaying the target page, in order to avoid the browser forward and back functions from failing due to the iframe element sharing browser history information with the webpage, the browser history generation request generated by the iframe element through calling the function used to generate browser history information can be intercepted, so as to prevent the generation of browser history information of the iframe element.

[0057] Furthermore, the first access path information of the webpage can be modified according to the second access path information of the target page, so that the modified access path information of the webpage can reflect both access path information at the same time. At this time, since the access path information of the webpage has changed, the webpage will call the function used to generate browser history information to generate the target browser history information of the webpage according to the modified access path information of the webpage.

[0058] Therefore, in the embodiments of this specification, all browser history information in the browser is generated by the webpage calling the corresponding function, thereby avoiding the sharing of browser history information between the iframe element and the webpage. Simultaneously, since the target browser history information generated by the webpage can simultaneously reflect the access path information of the target page at both the webpage and the iframe element, the access path information of the target page at the webpage and the iframe element can be subsequently recovered based on the target browser history information, allowing the webpage and the target page to be displayed again, thus ensuring the normal operation of the browser's forward, back, and refresh functions.

[0059] In this embodiment of the specification, for ease of understanding, the process of generating access path information after the webpage has been modified is explained.

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

[0061] Obtain the Uniform Resource Locator (URL) information of the webpage.

[0062] Obtain the relative path information of the target page relative to the webpage and the path parameter information of the target page.

[0063] The Uniform Resource Locator (URL), relative path, and path parameter information of the webpage are concatenated to obtain the modified access path information of the webpage.

[0064] In the embodiments of this specification, an absolute path can refer to the complete path to a file starting from a computer drive letter or domain name. An absolute path can be used to describe the complete structure of a file's directories at each level. A relative path, on the other hand, can refer to the path to find the location of another file starting from a certain file. A relative path can be used to reflect the path relationship between the path of a certain file and other files.

[0065] In the embodiments of this specification, the first access path information of the webpage can be an absolute path, such as the Uniform Resource Locator (URL address information) of the webpage, while the second access path information of the target page can be the relative path information of the target page relative to the webpage and the path parameter information of the target page, wherein the path parameter information of the target page can be URL parameters (Query).

[0066] To facilitate understanding, an example is given. For instance, when a webpage and a target page displayed within an iframe element on that webpage share the same origin, assuming the webpage's Uniform Resource Locator (URL) is "http: / / www.a.com / ", and the target page's absolute path is "http: / / www.a.com / w / b.html", then the target page's relative path to the webpage is "w / b.html". Furthermore, the target page may also have the path parameter information "?id=123". Based on this, by concatenating the webpage's URL, relative path, and path parameter information, the modified access path information for the webpage can be "http: / / www.a.com / w / b.html?id=123".

[0067] Alternatively, when the webpage and the target page displayed in the iframe element of the webpage have different origins, assuming the webpage's Uniform Resource Locator (URL) information can be "http: / / www.a.com / ", and the absolute path of the target page displayed in the iframe element of the webpage can be "http: / / www.b.com / w / c.html", the relative path information of the target page relative to the webpage can be a preset path "d.html". In this case, it is necessary to save the correspondence between the relative path information, the webpage's URL information, and the target page's absolute path. In addition, the target page can also have path parameter information "?id=123". Based on this, the webpage's URL information, the relative path information, and the path parameter information are concatenated to obtain the modified access path information of the webpage, which can be "http: / / www.a.com / d.html?id=123".

[0068] Subsequently, when displaying the target page again based on the modified access path information of the webpage, it is necessary to first extract the relative path information "d.html" from the modified access path information of the webpage according to the pre-saved correspondence between the webpage's Uniform Resource Locator information, the absolute path of the target page, and the relative path information. Then, determine the absolute path of the target page corresponding to the relative path information "d.html" "http: / / www.b.com / w / c.html", and extract the path parameter information "?id=123" from the modified access path information of the webpage. Thus, the previously displayed target page can be displayed based on the obtained absolute path of the target page and the extracted path parameter information, avoiding the problem of losing the page state of the target page.

[0069] In practical applications, when using iframe elements to display target pages, iframe elements usually have the ability to call functions in the browser to generate browser history information. Therefore, it is necessary to intercept the relevant function call operations of iframe elements and use the webpage to execute the relevant function call operations to avoid iframe elements and webpages sharing browser history information.

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

[0071] The first call request from the target page to the pushState function is detected.

[0072] Correspondingly, based on the modified access path information of the webpage, the target browser's history information is generated, which may include:

[0073] The webpage is used to generate a second call request for the pushState function, which carries the modified access path information.

[0074] In response to the second call request, the target browser history information is generated based on the modified access path information.

[0075] In the embodiments described in this specification, the `pushState` function (i.e., the `history.pushState` function / method) can be an Application Programming Interface (API) used for adding browser history. In practical applications, the `pushState` function typically accepts three parameters: `state`, `title`, and `url`. `state` can be a state object associated with a specified URL; this object is passed to a callback function when the `popstate` event is triggered. If this object is not needed, it can be null. `title` can be the title of the new page; however, browsers currently usually ignore this value, so it can be null. `url` can be the access address information of the newly displayed page.

[0076] Since an iframe element typically calls the `pushState` function after displaying the target page to request the generation of a browser history entry for that page, the first call to the `pushState` function by the target page can be detected and intercepted. Furthermore, after intercepting the first call, further processing of that request can be prevented, thus preventing the iframe element from generating its own browser history by calling the `pushState` function. This avoids the iframe element sharing browser history information with the webpage.

[0077] In addition, to record user access behavior to target pages within iframe elements and to facilitate subsequent browser history re-encountering of previously viewed target pages, after detecting and intercepting the first call request of the target page to the `pushState` function within the iframe element, the first access path information of the webpage is modified based on the second access path information of the target page. This results in modified access path information that reflects both the first and second access path information. At this point, due to the change in the webpage's access path information, the webpage initiates a second call request to the `pushState` function, which can carry the modified access path information as an input parameter to the `pushState` function. Subsequently, the second call request can be processed, allowing the webpage to automatically generate target browser history information reflecting the modified access path information by calling the `pushState` function.

[0078] In the embodiments described in this specification, Figure 1The method described above can be used to allow users to trigger the browser's forward, back, or refresh controls, thereby displaying the target page again based on browser history information. Therefore, the page display request mentioned in step 102 can be obtained by detecting the trigger events for the aforementioned controls.

[0079] Based on this, step 102: obtaining the user's page display request for the target page displayed in the iframe element of the webpage, may include:

[0080] Detect the popState event used to display the target page; or,

[0081] Detect the beforeunload event used to display the target page.

[0082] In the embodiments 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 the position of the currently displayed page in the history stack. When we use the browser's forward and back functions, the contents of the history stack are usually not changed, but the position of this access pointer is moved slightly, so that the browser can display the page according to the browser history information corresponding to the moved pointer position.

[0083] In practical applications, after a user triggers the browser's forward or back control, or after the user calls the back, forward, or go methods of the history object, the popstate event, which is used to move the access pointer position in the history stack, is usually triggered. Therefore, if a popstate event for displaying the target page is detected, it can be regarded as receiving a page display request for the target page that has been displayed in the iframe element of the webpage.

[0084] In the embodiments described in this specification, when a 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 in the browser is currently displaying a target page and a beforeunload event for refreshing the page is detected, it can also be regarded as receiving a page display request for the target page displayed in the iframe element of the webpage.

[0085] In the embodiments described in this specification, when a user uses the browser's forward and back functions to re-view the target page within an iframe element on a webpage, if the page currently displayed by the browser also belongs to the iframe element on the webpage, the browser has usually already created the iframe element in the DOM. If the target page is to be displayed within the already created iframe element, the URL set in the already created iframe element needs to be changed to the URL corresponding to the target page. This will cause the iframe element to automatically call the pushState function to generate browser history information, resulting in the iframe element and the webpage sharing browser history information.

[0086] Therefore, to avoid the iframe element sharing browser history information with the webpage, the step of displaying the target page in the iframe element at the webpage according to the access path information of the target page may specifically include:

[0087] If the webpage contains the iframe element that has already been created, then the iframe element that has already been created is destroyed.

[0088] Based on the access path information of the target page, create a new iframe element to display the target page.

[0089] In this embodiment, since the iframe element does not call the pushState function to generate browser history when setting the URL for a newly created iframe element, after determining the access path information of the target page to be displayed in the iframe element based on the target browser history information, it can be checked whether the iframe element has already been created in the DOM. If so, the URL of another page is usually already set at the iframe element. Therefore, to avoid changing the URL set at the iframe element, the existing iframe element can be deleted, and then a new iframe element can be created in the DOM. The URL at the newly created iframe element can be set according to the access path information of the target page. This ensures the normal display of the target page in the iframe element and avoids the iframe element calling the pushState function to generate browser history on its own, thereby solving the problem that may be caused by the iframe element and the webpage sharing browser history information.

[0090] In practical applications, because people usually need to hard-code the size of the iframe element into the program code, the size of the iframe element is relatively fixed, resulting in poor adaptability between the iframe element and the target page it is displayed on, which affects the user experience.

[0091] Based on this, the step of creating a new iframe element for displaying the target page according to the access path information of the target page may specifically include:

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

[0093] Set the target display size to the display size of the newly added iframe element.

[0094] In the embodiments described in this specification, the Mutation Observer interface can be an API interface used to monitor DOM changes. In practical applications, the Mutation Observer interface can be used to monitor the addition or removal of nodes, changes in attributes, changes in text content, etc. Based on this, the Mutation Observer interface can be used to monitor the DOM initialization and loading process corresponding to the target page, thereby obtaining the display size of page information on the target page.

[0095] The Resize Observer interface can notify you when the size of page elements changes. Therefore, the Resize Observer interface can also be used to obtain the display size of page information on a target page.

[0096] In practical applications, the Mutation Observer interface typically cannot detect changes in display size after an image has finished loading, while the Resize Observer interface can. Therefore, both the Mutation Observer and Resize Observer interfaces can be used together to determine the display size of each page element on the target page. Furthermore, the sum of the display sizes of all page elements on the target page can be used to determine the target display size, ensuring its accuracy. Subsequently, the display size of the iframe element can be set to the target display size, ensuring good adaptation between the iframe element and the displayed target page, thus improving user experience.

[0097] In practical applications, if the current browser scrollbar is positioned too low, when a user uses the browser's forward or back functions to view the target page, the iframe element may not be displayed in the browser window's visible area due to its initial small display size. In this case, the Resize Observer interface is usually only triggered once during DOM initialization, making it impossible for both the Mutation Observer and Resize Observer interfaces to detect changes in the display size of the image after it has finished loading. However, compared to the initial display size of the iframe element, by setting the target display size determined by the Mutation Observer and Resize Observer interfaces based on DOM changes as the iframe element's display size, the iframe element's display size can be increased. This ensures the iframe element is displayed within the browser window's visible area, allowing the Resize Observer interface to regain its ability to monitor changes in display size after the image has loaded. Based on this, the iframe element's display size can be reset based on changes detected by the Resize Observer interface, further ensuring good adaptation between the iframe element and its target page. In other words, the iframe element's display size can be changed and set multiple times according to actual needs to guarantee adaptation between the iframe element and its target page.

[0098] In practical applications, if the display size set for an iframe element is larger than the target display size of the target page, it will usually prevent users from scrolling through the target page, thus affecting the user experience.

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

[0100] Detect the target page's third call request to the scrollTo function.

[0101] Determine the page scrolling parameters carried in the third call request.

[0102] The webpage is used to perform a page scrolling operation according to the page scrolling parameters.

[0103] In the embodiments described in this specification, the `scrollTo` function can be used to locate the scrollbar position. If a user performs a page scrolling operation on the target page, the target page will typically determine the page scrolling parameters based on the user's scrolling operation and use these parameters as input parameters when calling the `scrollTo` function to scroll the page to the specified position. The page scrolling parameters can reflect either the direction and distance of scrolling from the current position to reach the target position, or they can reflect the positional information of the target position; no specific limitation is made in either case.

[0104] In the embodiments of this specification, to ensure the user's scrolling function on the target page and improve the user experience, the scrollbar at the iframe element can be removed while the scrollbar on the webpage is retained. When a third call request for the scrollTo function is detected from the target page, the webpage can call the scrollTo function to control the scrollbar of the webpage. By controlling the scrolling of the webpage in the visible area of ​​the browser window, the display area of ​​the iframe element can be scrolled, thereby achieving the visual effect of scrolling the target page in the iframe element. This ensures that the user can scroll to view the target page, which is beneficial to improving the user experience.

[0105] In practical applications, when a webpage and a target page are in a cross-domain situation, the webpage typically cannot access the target page's DOM, as well as variables and methods under the window attribute, thus affecting... Figure 1 Application of the methods and the solutions in the embodiments.

[0106] Based on this, the step of performing page scrolling operation using the webpage according to the page scrolling parameters may specifically include:

[0107] The page scrolling parameters are sent to the webpage using the postMessage function.

[0108] The webpage is used to generate a fourth call request for the scrollTo function, which carries the page scrolling parameters.

[0109] In the embodiments described in this specification, the PostMessage function can be used to place (send) a message into a message queue corresponding to the thread created by the specified window. The message requester can then retrieve the message from the message queue using the GetMessage and PeekMessage functions, thereby resolving communication issues between a webpage and a target page in cross-domain scenarios. 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. The webpage can then retrieve the page scrolling parameters from the message queue and use these parameters to call the scrollTo function on the webpage to achieve page scrolling.

[0110] In addition, in the embodiments of this specification, other information required by the webpage from the target page, such as the detection result of the first call request of the pushState function to the target page, and the target display size determined based on the page information of the target page, can all be sent from the target page to the webpage using the postMessage function to ensure... Figure 1 The operation of the methods and the schemes in the embodiments will not be described in detail.

[0111] Figure 3 The embodiments provided in this specification correspond to Figure 1 The swimlane flow diagram illustrates the page display method in the example. Figure 3 As shown, the page display process can involve execution entities such as web pages and iframe elements.

[0112] During the browser history generation phase, if a user needs to display a target page within an iframe element on a webpage, the user can perform a first user action by entering an access path in the webpage on the terminal device, clicking a link in the webpage, etc. In response to the first user action, the terminal device can display the target page within an iframe element on the webpage. Furthermore, if it detects a first call request from the target page to the `pushState` function, it can intercept the first call request and obtain the webpage's Uniform Resource Locator (URL), the relative path information of the target page relative to the webpage, and the path parameter information of the target page. The terminal device then concatenates the URL, relative path, and path parameter information to obtain the modified access path information of the webpage. The terminal device can also use the webpage to generate a second call request to the `pushState` function carrying the modified access path information, thereby generating target browser history information based on the modified access path information of the webpage.

[0113] During the target page display phase, if the user needs to re-display the target page based on browser history information, a second user operation can be performed on the terminal device to trigger the browser's forward, back, or refresh controls on the webpage. After detecting the `popState` or `beforeunload` event of the target page within the iframe element used to display the webpage, the terminal device can determine the access path information of the target page based on the target browser history information, and determine if the webpage contains the already created iframe element. If the webpage contains the already created iframe element, it is destroyed, and a new iframe element is created to display the target page based on the access path information. Furthermore, during the process of displaying the target page information using the new iframe element, the `MutationObserver` and `ResizeObserver` interfaces are used to determine the target display size of the page information, and this target display size is set to the display size of the new iframe element to ensure the optimal display effect of the target page.

[0114] Subsequently, if the terminal device detects a third call request from the target page to the scrollTo function, it can also instruct the target page to send the page scrolling parameters to the webpage using the postMessage function, and generate a fourth call request for the scrollTo function carrying the page scrolling parameters using the webpage, thereby achieving the visual effect of scrolling the target page.

[0115] Based on the same idea, the embodiments of this specification also provide the apparatus corresponding to the above method. Figure 4 The embodiments provided in this specification correspond to Figure 1 A schematic diagram of the structure of a page display device. For example... Figure 4 As shown, the device may include:

[0116] The first acquisition module 402 is used to acquire the page display request of the user for the target page displayed in the iframe element of the webpage.

[0117] The access path determination module 404 is used to respond to the page display request and determine the access path information of the target page based on the target browser history information; wherein, the target browser history information is generated based on the modified access path information of the webpage during the historical display of the target page, and the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page.

[0118] The page display module 406 is used to display the target page in the iframe element of the webpage according to the access path information of the target page.

[0119] based on Figure 4 The embodiments of this specification also provide some specific implementations of the device, which will be described below.

[0120] Optional, Figure 4 The device may further include:

[0121] The second acquisition module is used to acquire browser history generation requests for the displayed target page.

[0122] The path modification module is used to respond to the browser history generation request and 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 webpage.

[0123] The history generation module is used to generate the target browser's history information based on the modified access path information of the webpage.

[0124] Optionally, the path modification module may include:

[0125] The first acquisition unit is used to acquire the Uniform Resource Locator (URL) information of the webpage.

[0126] The second acquisition unit is used to acquire the relative path information of the target page relative to the webpage and the path parameter information of the target page.

[0127] The splicing unit is used to splice the Uniform Resource Locator (URL) information, the relative path information, and the path parameter information of the webpage to obtain the modified access path information of the webpage.

[0128] Optionally, the second acquisition module can be specifically used to: detect the first call request of the target page for the pushState function.

[0129] The history generation module can be specifically used to: generate a second call request for the pushState function using the webpage, carrying the modified access path information; and, in response to the second call request, generate the target browser history information based on the modified access path information.

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

[0131] Optionally, the first acquisition module 402 may be specifically used to: detect the popState event for displaying the target page; or, detect the beforeunload event for displaying the target page.

[0132] Optionally, the page display module 406 may include:

[0133] An element destruction unit is used to destroy the created iframe element if the webpage contains the created iframe element.

[0134] The element creation unit is used to create a new iframe element for displaying the target page based on the access path information of the target page.

[0135] Optionally, the page display module 406 can be specifically used for:

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

[0137] Set the target display size to the display size of the newly added iframe element.

[0138] Optional, Figure 4 The device may further include:

[0139] The detection module is used to detect third call requests from the target page to the scrollTo function.

[0140] The page scrolling parameter determination module is used to determine the page scrolling parameters carried in the third call request.

[0141] The page scrolling operation execution module is used to perform page scrolling operations using the webpage according to the page scrolling parameters.

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

[0143] The page scrolling parameters are sent to the webpage using the postMessage function.

[0144] The webpage is used to generate a fourth call request for the scrollTo function, which carries the page scrolling parameters.

[0145] Based on the same idea, this specification also provides devices corresponding to the above methods in its embodiments.

[0146] Figure 5 The embodiments provided in this specification correspond to Figure 1 A schematic diagram of the structure of a page display device. For example... Figure 5 As shown, device 500 may include:

[0147] At least one processor 510; and,

[0148] Memory 530 communicatively connected to the at least one processor; wherein,

[0149] The memory 530 stores instructions 520 that can be executed by the at least one processor 510, the instructions being executed by the at least one processor 510 to enable the at least one processor 510 to:

[0150] Get the page display request from the user for the target page displayed in the iframe element of the webpage.

[0151] In response to the page display request, the access path information of the target page is determined based on the target browser history information; wherein, the target browser history information is generated based on the modified access path information of the webpage during the historical display process of the target page, and the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page.

[0152] Based on the access path information of the target page, the target page is displayed in the iframe element at the webpage.

[0153] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, for... Figure 5 As the device shown is basically similar to the method embodiment, the description is relatively simple, and relevant parts can be found in the description of the method embodiment.

[0154] In the 1990s, improvements to a technology could be clearly distinguished as either hardware improvements (e.g., improvements to the circuit structure of diodes, transistors, switches, etc.) or software improvements (improvements to the methodology). However, with technological advancements, many methodological improvements today can be considered direct improvements to the hardware circuit structure. Designers almost always obtain the corresponding hardware circuit structure by programming the improved methodology into the hardware circuit. Therefore, it cannot be said that a methodological improvement cannot be implemented using hardware physical modules. For example, a Programmable Logic Device (PLD) (such as a Field Programmable Gate Array (FPGA)) is such an integrated circuit whose logic function is determined by the user programming the device. Designers can program and "integrate" a digital system onto a PLD themselves, without needing chip manufacturers to design and manufacture dedicated integrated circuit chips. Furthermore, nowadays, instead of manually manufacturing integrated circuit chips, this programming is mostly implemented using "logic compiler" software. Similar to the software compiler used in program development, the original code before compilation must be written in a specific programming language, called a Hardware Description Language (HDL). There are many HDLs, 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, and RHDL (Ruby Hardware Description Language). Currently, the most commonly used are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art should understand that by simply performing some logic programming on the method flow using one of these hardware description languages ​​and programming it into an integrated circuit, the hardware circuit implementing the logical method flow can be easily obtained.

[0155] The controller can be implemented in any suitable manner. For example, it can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), 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 Silicon Labs C8051F320. A memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art will also recognize that, in addition to implementing the controller in purely computer-readable program code form, the same functionality can be achieved by logically programming the method steps to make the controller take the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers. Therefore, such a controller can be considered a hardware component, and the means included therein for implementing various functions can also be considered as structures within the hardware component. Alternatively, the means for implementing various functions can be considered as both software modules implementing the method and structures within the hardware component.

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

[0157] For ease of description, the above devices are described separately by function as various units. Of course, in implementing this application, the functions of each unit can be implemented in one or more software and / or hardware.

[0158] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can 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.) containing computer-usable program code.

[0159] This 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 will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0160] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0161] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable apparatus for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

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

[0163] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0164] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0165] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0166] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can 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.) containing computer-usable program code.

[0167] This application can be described in the general context of computer-executable instructions, such as program modules, that are executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a specific task or implement a specific abstract data type. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0168] The above description is merely an embodiment of this application and is not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A method for displaying a page, comprising: Get the page display request from the user for the target page displayed in the iframe element of the webpage; In response to the page display request, the access path information of the target page is determined based on the target browser history information. Specifically, before generating the target browser history information, browser history generation requests generated by iframe elements through calling functions for generating browser history information are intercepted to prevent the generation of browser history information for the iframe elements. The target browser history information is generated during the historical display of the target page based on the modified access path information of the webpage. The modified access path information is obtained by concatenating the Uniform Resource Locator (URL) information of the webpage, the relative path information of the target page, and path parameter information. The modified access path information reflects the first access path information of the webpage and the second access path information of the target page. If the webpage contains an iframe element that has already been created, then destroy the iframe element that has already been created. Based on the access path information of the target page, a new iframe element is created to display the target page, and the target page is displayed in the new iframe element at the webpage; the new iframe element is an iframe element that does not generate browser history.

2. The method as described in claim 1, further comprising, before obtaining the user's page display request for the target page displayed in the iframe element of the webpage: Obtain a request to generate the browser history for the target page that has already been displayed; In response to the browser history generation request, the first access path information of the webpage is modified according to the second access path information of the target page to obtain the modified access path information of the webpage. Based on the modified access path information of the webpage, the target browser history information is generated.

3. The method as described in claim 2, wherein responding to the browser history generation request, modifying 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 webpage specifically includes: Obtain the Uniform Resource Locator (URL) information of the webpage; Obtain the relative path information of the target page relative to the webpage and the path parameter information of the target page; The Uniform Resource Locator (URL), relative path, and path parameter information of the webpage are concatenated to obtain the modified access path information of the webpage.

4. The method as described in claim 2, wherein obtaining the browser history generation request for the displayed target page specifically includes: Detect the first call request of the target page to the pushState function; The step of generating the target browser history information based on the modified access path information of the webpage specifically includes: The webpage is used to generate a second call request for the pushState function, which carries the modified access path information. In response to the second call request, the target browser history information is generated based on the modified access path information.

5. The method as described in claim 1, wherein the page display request is a request generated by the user through performing a trigger operation on any one of the browser's forward control, browser's back control, and browser's refresh control.

6. The method as described in claim 5, wherein obtaining the user's page display request for the target page displayed in the iframe element of the webpage specifically includes: Detect the popState event used to display the target page; or, Detect the beforeunload event used to display the target page.

7. The method as described in claim 5, wherein displaying the target page in the iframe element at the webpage according to the access path information of the target page specifically includes: If the webpage contains an iframe element that has already been created, then destroy the iframe element that has already been created. Based on the access path information of the target page, create a new iframe element to display the target page.

8. The method as described in claim 7, wherein creating a new iframe element for displaying the target page based on the access path information of the target page specifically includes: In the process of displaying page information obtained from the access path information of the target page using the newly added iframe element, the MutationObserver interface and the ResizeObserver interface are used to determine the target display size of the page information; Set the target display size to the display size of the newly added iframe element.

9. The method of claim 8, further comprising, after setting the target display size to the display size of the newly added iframe element: Detect the third call request from the target page to the scrollTo function; Determine the page scrolling parameters carried in the third call request; The webpage is used to perform a page scrolling operation according to the page scrolling parameters.

10. The method of claim 9, wherein performing page scrolling operation using the webpage according to the page scrolling parameters specifically includes: The page scrolling parameters are sent to the webpage using the postMessage function; The webpage is used to generate a fourth call request for the scrollTo function, which carries the page scrolling parameters.

11. A page display method apparatus, comprising: The first acquisition module is used to acquire the page display request of the user for the target page displayed in the iframe element of the webpage; The access path determination module is used to respond to the page display request and determine the access path based on the target browser's history information. The access path information of the target page is defined; wherein, before generating the target browser history information, the browser history generation request generated by the iframe element through calling the function used to generate browser history information is intercepted, so as to prevent the generation of browser history information of the iframe element; the target browser history information is generated based on the modified access path information of the webpage during the historical display process of the target page, and the modified access path information is obtained by concatenating the Uniform Resource Locator information of the webpage, the relative path information of the target page, and the path parameter information; the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page. If the webpage contains an iframe element that has already been created, then destroy the iframe element that has already been created. The page display module is used to create a new iframe element for displaying the target page based on the access path information of the target page, and to display the target page in the new iframe element at the webpage; the new iframe element is an iframe element that does not generate browser history.

12. The apparatus of claim 11, further comprising: The second acquisition module is used to acquire browser history generation requests for the displayed target page; The path modification module is used to respond to the browser history generation request and modify the path based on the second path of the target page. Access path information: Modify the first access path information of the webpage to obtain the modified access path information of the webpage; The history generation module is used to generate the target browser's history information based on the modified access path information of the webpage.

13. The apparatus of claim 12, wherein the path modification module comprises: The first acquisition unit is used to acquire the Uniform Resource Locator (URL) information of the webpage; The second acquisition unit is used to acquire the relative path information of the target page relative to the webpage and the path parameter information of the target page; The splicing unit is used to splice the Uniform Resource Locator (URL) 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 acquisition module is specifically configured to: detect the first call request of the target page for the pushState function; The history generation module is specifically configured to: generate a second call request for the pushState function using the webpage, carrying the modified access path information; and, in response to the second call request, generate the target browser history information based on the modified access path information.

15. The apparatus of claim 11, wherein 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.

16. The apparatus of claim 15, wherein the first acquisition module is specifically used for: Detect the popState event used to display the target page; or, Detect the beforeunload event used to display the target page.

17. The apparatus of claim 15, wherein the page display module comprises: An element destruction unit is used to destroy the created iframe element if the webpage contains the created iframe element. The element creation unit is used to create a new iframe element for displaying the target page based on the access path information of the target page.

18. The apparatus of claim 17, wherein the page display module is specifically used for: In the process of displaying page information obtained from the access path information of the target page using the newly added iframe element, the MutationObserver interface and the ResizeObserver interface are used to determine the target display size of the page information; Set the target display size to the display size of the newly added iframe element.

19. The apparatus of claim 18, further comprising: The detection module is used to detect third call requests from the target page to the scrollTo function; The page scrolling parameter determination module is used to determine the page scrolling parameters carried in the third call request; The page scrolling operation execution module is used to perform page scrolling operations using the webpage according to the page scrolling parameters.

20. The apparatus of claim 19, wherein the page scrolling operation execution module is specifically used for: The page scrolling parameters are sent to the webpage using the postMessage function; The webpage is used to generate a fourth call request for the scrollTo function, which carries the page scrolling parameters.

21. A page display device, comprising: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, the instructions being executed by the at least one processor. The processor executes such that the at least one processor is capable of: Get the page display request from the user for the target page displayed in the iframe element of the webpage; In response to the page display request, the access history of the target page is determined based on the target browser's history information. Path information; wherein, before generating the target browser history information, the browser history generation request generated by the iframe element through calling the function used to generate browser history information is intercepted, so as to prevent the generation of browser history information of the iframe element; the target browser history information is generated based on the modified access path information of the webpage during the historical display process of the target page, and the modified access path information is obtained by concatenating the Uniform Resource Locator information of the webpage, the relative path information of the target page, and the path parameter information; the modified access path information is used to reflect the first access path information of the webpage and the second access path information of the target page; If the webpage contains an iframe element that has already been created, then destroy the iframe element that has already been created. Based on the access path information of the target page, a new iframe element is created to display the target page, and the target page is displayed in the new iframe element at the webpage; the new iframe element is an iframe element that does not generate browser history.

Images