Web page cross-platform jump processing method and device and electronic equipment
Patent Information
- Application Number
- CN202610957036.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-06-29
- Publication Date
- 2026-10-09
AI Technical Summary
用户被迫丢失先前的操作进度,需要重新寻找播放进度、重新定位滚动位置或重新填写表单内容,导致跨平台体验的严重割裂
[0017]本发明还提供一种非暂态计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如上述任一种所述Web网页跨平台跳转处理方法。
Smart Images

Figure CN122885308A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of mobile internet technology, and in particular to a method, apparatus, and electronic device for cross-platform redirection of web pages. Background Technology
[0002] In the mobile internet field, web pages, such as H5 pages, typically use deep linking technology to redirect from the source application to the target application.
[0003] However, deep linking technologies typically only transmit static page identifiers, such as page IDs or product IDs, and cannot retain detailed user interaction states within an H5 page. For example, when a user plays a video to 15 minutes and 30 seconds, scrolls to 80% of a long article, fills out part of a form, or sets specific filter conditions on an H5 page, once they are redirected from the source application to the target application via a deep link, the target application usually only opens the page in its initial state based on the page ID. The user is forced to lose their previous progress, needing to find the playback progress again, reposition the scrolling location, or re-fill out form information, resulting in a severe disconnect in the cross-platform experience.
[0004] Therefore, how to achieve continuity and seamless transition of the UI state of a web page during the process of jumping from the source application to the target application has become a technical problem that urgently needs to be solved in this field. Summary of the Invention
[0005] This invention provides a method, apparatus, and electronic device for cross-platform web page redirection, which ensures the continuity and seamless transition of the UI page state of the web page during the process of redirecting from the source application to the target application, thereby effectively improving the user experience.
[0006] This invention provides a method for cross-platform redirection of web pages. The method is applied to a source application that displays a web page. The method includes: in response to triggering a platform redirection command, acquiring user interface state data of the web page displayed on the source application, wherein the platform redirection command is used to characterize an instruction to control the web page to redirect from the source application to a target application; generating a redirection link matching the user interface state data based on the user interface state data; and displaying the redirection link on the source application, so that when the redirection link is triggered, a web page with the same user interface state data is displayed on the target application.
[0007] According to a webpage cross-platform redirection method provided by the present invention, the step of generating a redirection link matching the user interface state data based on the user interface state data includes: packaging the user interface state data into a state snapshot according to a preset protocol, wherein the state snapshot is used to represent the user interface state data set of the webpage; uploading the state snapshot to a cloud processing system; generating a state snapshot index identifier matching the state snapshot based on the cloud processing system, and storing the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system; receiving the state snapshot index identifier issued by the cloud processing system; and generating a redirection link matching the user interface state data based on the state snapshot index identifier.
[0008] According to a web page cross-platform redirection processing method provided by the present invention, the step of storing the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system includes: setting a storage expiration time; and storing the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system within the storage expiration time.
[0009] The present invention also provides a method for cross-platform redirection of web pages, the method being applied to a target application, the method comprising: in response to a redirection link displayed on the source application being triggered, starting the target application and extracting user interface state data from the redirection link; and rendering a web page with the same user interface state data on the target application based on the user interface state data.
[0010] According to a webpage cross-platform redirection method provided by the present invention, the redirection link includes a state snapshot index identifier; the step of extracting user interface state data from the redirection link includes: extracting the state snapshot index identifier from the redirection link; initiating a state data acquisition request to a cloud processing system, so that the cloud processing system obtains user interface state data matching the state snapshot index identifier based on a stored correspondence and the state snapshot index identifier, wherein the state data acquisition request is used to represent a request to obtain user interface state data matching the state snapshot index identifier based on the state snapshot index identifier; and receiving the user interface state data sent by the cloud processing system.
[0011] According to a cross-platform redirection method for web pages provided by the present invention, the step of initiating a status data acquisition request to the cloud processing system includes: initiating a status data acquisition request to the cloud processing system within the storage expiration period, wherein the cloud processing system effectively stores the correspondence between the status snapshot index identifier and the status snapshot within the storage expiration period.
[0012] According to a cross-platform webpage redirection method provided by the present invention, the user interface state data includes routing stack information and user interface control attribute data; the step of rendering a webpage with the same user interface state data on the target application based on the user interface state data includes: initializing a page structure of the webpage on the target application based on the routing stack information, wherein the page structure includes view components; and rendering the user interface control attribute data to the view components in the page structure to render a webpage with the same user interface state data on the target application.
[0013] According to a cross-platform redirection method for web pages provided by the present invention, after the page structure of the web page is initialized on the target application, the method further includes: freezing the initialized page structure; the step of rendering the user interface control attribute data to the view component in the page structure to render a web page with the same user interface state data on the target application includes: after the user interface control attribute data has been rendered to the view component, unfreezing the page structure, and rendering a web page with the same user interface state data on the target application through animation fade-in.
[0014] This invention also provides a webpage cross-platform redirection processing device. The device is applied to a source application, which displays a webpage. The device includes: an acquisition module, configured to acquire user interface state data of the webpage displayed on the source application in response to a platform redirection command, wherein the platform redirection command represents an instruction to control the webpage to redirect from the source application to a target application; a generation module, configured to generate a redirection link matching the user interface state data; and a redirection module, configured to display the redirection link on the source application, so that when the redirection link is triggered, a webpage with the same user interface state data is displayed on the target application.
[0015] The present invention also provides a cross-platform web page redirection processing device, which is applied to a target application. The device includes: an extraction module, used to start the target application in response to a redirection link displayed on the source application being triggered, and to extract user interface state data from the redirection link; and a rendering module, used to render a web page with the same user interface state data on the target application based on the user interface state data.
[0016] The present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the web page cross-platform redirection processing method described above.
[0017] The present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the cross-platform redirection method for web pages as described above.
[0018] The present invention also provides a computer program product, including a computer program that, when executed by a processor, implements any of the above-described methods for cross-platform redirection of web pages.
[0019] This invention provides a method, apparatus, and electronic device for cross-platform redirection of web pages. The method is applied to a source application that displays a web page. The method includes: in response to a platform redirection command, acquiring user interface state data of the web page displayed on the source application, wherein the platform redirection command represents an instruction to control the web page to redirect from the source application to a target application; generating a redirection link matching the user interface state data based on the user interface state data; and displaying the redirection link on the source application, so that when the redirection link is triggered, a web page with the same user interface state data is displayed on the target application. This invention ensures the continuity and seamless transition of the web page's UI state during the redirection process from the source application to the target application, thereby effectively improving the user experience. Attached Figure Description
[0020] To more clearly illustrate the technical solutions in this invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.
[0021] Figure 1 This is one of the flowcharts illustrating the cross-platform redirection method for web pages provided by the present invention.
[0022] Figure 2 This is a schematic diagram of the process provided by the present invention for generating jump links that match the user interface state data based on the user interface state data.
[0023] Figure 3 This is the second flowchart of the cross-platform redirection method for web pages provided by the present invention.
[0024] Figure 4 This is a schematic diagram of the process for extracting user interface state data from the jump link provided by the present invention.
[0025] Figure 5 This is a schematic diagram illustrating an application scenario of the cross-platform redirection method for web pages provided by this invention.
[0026] Figure 6 This is one of the structural schematic diagrams of the cross-platform redirection processing device for web pages provided by the present invention.
[0027] Figure 7 This is the second schematic diagram of the cross-platform redirection processing device for web pages provided by the present invention.
[0028] Figure 8 This is a schematic diagram of the structure of the electronic device provided by the present invention. Detailed Implementation
[0029] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.
[0030] This invention provides a cross-platform web page navigation method designed to address the issue that Deep Link technology cannot retain detailed user interaction states (such as scroll position, playback progress, and temporary input data) during cross-platform (H5 to APP) navigation. By introducing a "cloud state snapshot" mechanism, it achieves seamless transition from the web client to the native client at the "pixel level" or "state level," ensuring that users can accurately restore their state at the instant before leaving the client / platform after switching terminals / platforms.
[0031] Figure 1 This is one of the flowcharts illustrating the cross-platform redirection method for web pages provided by the present invention.
[0032] The following will combine Figure 1 The process of the cross-platform redirection method for web pages provided by this invention will be described.
[0033] In an exemplary embodiment of the present invention, the cross-platform redirection method for web pages can be applied to a source application, which displays a web page. The source application can be a source application running on an electronic device such as a smartphone, tablet, or personal computer, for example, a first app. The web page can be a mobile web page or a PC web page built based on HTML5 technology, such as an H5 page. The target application can be a native application (app) different from the source application, such as a second app. In one example, the target application can be a native app related to the web page, and the web page can achieve more operational functions by being browsed or operated within the native app.
[0034] Combination Figure 1 As can be seen, the method for handling cross-platform redirection of web pages may include steps 110 to 130, and each step will be explained below.
[0035] In step 110, in response to triggering a platform jump instruction, the user interface state data displayed on the source application side of the web page is obtained, wherein the platform jump instruction is used to represent the instruction to control the web page to jump from the source application side to the target application side.
[0036] In one scenario, a user accesses a webpage (e.g., an H5 page) in the browser of the originating application and performs a series of interactive actions on that page. For example, the user scrolls to about 80% of a long article and enters part of a comment in the comment input box at the bottom of the page. At this point, the user expects to be redirected to the service provider's native app to continue browsing. The user clicks the "Open App" button on the webpage, which triggers the platform's redirection instruction.
[0037] In another embodiment, in response to the platform's redirection command, the source application can obtain the user interface state data displayed on the current webpage in the source application. This user interface state data includes, but is not limited to: the current page's scroll position (e.g., a vertical scroll distance of 1200 pixels), temporary text content in input boxes (e.g., "This product is good" already entered in the comment box), and the current page's routing stack information (e.g., the product ID on the current product details page is 1001), and the current timestamp (CurrentTime) of the audio / video player.
[0038] In another example, the source application can collect the aforementioned data by executing an embedded JavaScript script to traverse the DOM tree structure of the current web page and key variables in memory. During the application process, the JavaScript script can call `window.scrollY` to get the scroll position, use `document.querySelector('textarea').value` to get the input box content, and use `window.location.href` to get the current URL and extract route parameters.
[0039] In step 120, a jump link matching the user interface state data is generated based on the user interface state data.
[0040] In another embodiment, the source application can generate redirect links that match the collected user interface state data. Specifically, the source application can serialize the aforementioned user interface state data, for example, by converting it into a JSON string, and then append the JSON string as a parameter to the query string of a preset deep link.
[0041] In another example, to ensure that the link length does not exceed the limits of the browser or operating system, the source application can also use a compression algorithm to compress the state data before encoding.
[0042] In step 130, a redirect link is displayed on the source application so that, if the redirect link is triggered, a web page with the same user interface state data is displayed on the target application.
[0043] In another embodiment, the source application can display a redirect link on its own application. A common method is to generate a clickable button or overlay and bind the redirect link to the button. When the user clicks the button, the operating system recognizes the URL Scheme in the link and launches the target application (i.e., the native app). After launching, the target application parses the user interface state data in the redirect link and, based on this data, restores the web page or corresponding native page in the target application to a state completely consistent with the source application, i.e., the same scroll position (80%), the same comment input box content ("This product is good"), and the same product details page. This achieves a seamless transition from the web page in the source application to the target application.
[0044] In this embodiment, by actively acquiring the user interface state data of the webpage when a redirect is triggered on the source application side, and generating a redirect link based on this state data, the target application side can restore an interface state completely consistent with the source application side after receiving the link, based on the state data. Users do not need to search for previously viewed locations or re-enter previously entered content after the redirect, significantly improving the user experience of cross-platform redirection and solving the pain point that existing deep linking technology can only transmit static page IDs and cannot retain interactive states.
[0045] This invention provides a cross-platform redirection method for web pages. The method is applied to a source application that displays a web page. The method includes: in response to a platform redirection command, acquiring user interface state data of the web page displayed on the source application, wherein the platform redirection command represents an instruction to control the web page to redirect from the source application to a target application; generating a redirection link matching the user interface state data based on the user interface state data; and displaying the redirection link on the source application, so that when the redirection link is triggered, a web page with the same user interface state data is displayed on the target application. This invention ensures the continuity and seamless transition of the web page's UI state during redirection from the source application to the target application, thereby effectively improving the user experience.
[0046] The source application directly encodes and concatenates user interface state data into the URL of the redirect link. This method may face URL length limitations when the amount of state data is large. Therefore, this invention also provides a redirect link generation method based on a cloud processing system, which will be described below with reference to the following embodiments.
[0047] Figure 2 This is a schematic diagram of the process provided by the present invention for generating jump links that match the user interface state data based on the user interface state data.
[0048] The following will combine Figure 2 The process of generating jump links that match the user interface state data based on the user interface state data provided by the present invention will be described.
[0049] In an exemplary embodiment of the present invention, combined with Figure 2 As can be seen, generating a jump link that matches the user interface state data based on the user interface state data may include steps 210 to 250, and each step will be described below.
[0050] In step 210, the user interface state data is packaged into a state snapshot according to a preset protocol, wherein the state snapshot is used to represent the set of user interface state data of the web page.
[0051] In one embodiment, the source application can have a pre-defined general state protocol that defines a standardized JSON data structure for user interface state data. For example, the protocol specifies that a state snapshot should include a scene identifier (scene_id), context data, and a timestamp. The source application packages the collected discrete state data according to this protocol to generate a JSON-formatted state snapshot. This state snapshot fully represents the current set of user interface state data for the webpage.
[0052] In step 220, the status snapshot is uploaded to the cloud processing system.
[0053] In one embodiment, the source application can send the aforementioned JSON-formatted state snapshot as the request body to the API interface of a pre-defined cloud processing system via an HTTPS POST request. The cloud processing system can be a standalone server, cloud function, or object storage service.
[0054] In step 230, a state snapshot index identifier that matches the state snapshot is generated based on the cloud processing system, and the correspondence between the state snapshot index identifier and the state snapshot is stored in the cloud processing system.
[0055] In one embodiment, after receiving a state snapshot, the cloud processing system first verifies the data's validity (e.g., format check, size limit check). If the verification passes, the state snapshot can be persistently stored in a cache (e.g., Redis) or a cloud database. To ensure resources are not occupied for extended periods, a cache expiration period can be set, such as 10 minutes, since redirection actions typically occur instantly.
[0056] Furthermore, the cloud processing system can use a hash algorithm (such as MD5 or SHA-1 with the first 8 bits) or a random number generation algorithm to generate a unique snapshot token for the state snapshot. This token is a short string, such as an alphanumeric combination of 8 characters. The system can then store this token along with the complete state snapshot data as key-value pairs.
[0057] In step 240, the status snapshot index identifier issued by the cloud processing system is received.
[0058] In one embodiment, after generating the index identifier, the cloud processing system can return the index identifier to the source application via an HTTP response. The source application can then receive the state snapshot index identifier sent by the cloud processing system.
[0059] In step 250, a jump link matching the user interface state data is generated based on the state snapshot index identifier.
[0060] In another embodiment, after obtaining the state snapshot index identifier, the source application no longer appends the complete state data to the URL, but instead uses the state snapshot index identifier as a link parameter. Specifically, the source application can obtain a preset deep link template, then append the state snapshot index identifier as a parameter to the template to generate the final redirect link.
[0061] Understandably, the redirect link is displayed on the source application (e.g., as a button or floating layer). When the user clicks the link, the operating system launches the target application (the native app). The target application extracts a state snapshot index identifier from the redirect link and sends a request to the cloud processing system, passing in this state snapshot index identifier. The cloud processing system finds the corresponding state snapshot based on the state snapshot index identifier and returns it to the target application. The target application parses the state snapshot and reconstructs a user interface state completely identical to that of the source application. Ultimately, a web page or corresponding native page with the same user interface state data is displayed on the target application, achieving seamless cross-platform continuity.
[0062] In existing technologies, when the amount of user interface state data is large (such as long text drafts, multi-level filtering conditions, or a large amount of form data), directly encoding it into the URL query string can easily exceed the URL length limit of the browser or operating system. This embodiment fundamentally solves the URL capacity bottleneck problem by uploading the state snapshot to the cloud and only including a short index identifier in the redirect link, enabling user interface state data of any complexity to be reliably transmitted.
[0063] In another exemplary embodiment of the present invention, storing the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system can be achieved in the following way: Set storage expiration time; During the storage expiration period, the mapping between the state snapshot index identifier and the state snapshot is stored in the cloud processing system.
[0064] In one embodiment, before establishing the mapping between the storage state snapshot index identifier and the state snapshot, the cloud processing system can set a storage expiration time according to a preset strategy or dynamic configuration. This expiration time can be flexibly set according to the business scenario.
[0065] In one example, the storage expiration time can be set to 10 minutes. This is because the time from when a user triggers the redirect instruction to when they actually click the redirect link usually occurs within a short period, and a 10-minute window is sufficient to cover the vast majority of redirect scenarios. After 10 minutes, the state snapshot is considered no longer needed, and the system automatically deletes it.
[0066] In another example, when uploading a state snapshot, the source application can specify a desired storage expiration time based on the business type. For example, for scenarios with high immediacy requirements (such as browsing limited-time flash sale items), a shorter storage expiration time (such as 2 minutes) can be set; for scenarios where users may process the data later (such as filling out long forms), a longer storage expiration time (such as 30 minutes) can be set. The cloud processing system receives and follows this specified time.
[0067] Furthermore, after setting the storage expiration time, the cloud processing system can store the mapping relationship between the state snapshot index identifier and the state snapshot, such as key-value pairs, in the cache and specify the storage expiration time. During the storage expiration time, this mapping relationship remains valid, and any target application holding the state snapshot index identifier can request the corresponding state snapshot from the cloud processing system. Once the set storage expiration time has passed, the cloud processing system will automatically delete the expired key-value pairs. If a target application attempts to retrieve a state snapshot using the state snapshot index identifier after the expiration time, the cloud processing system will return an error response of "not found" or "snapshot expired," allowing the target application to perform a degradation process (e.g., opening the default state only based on the page ID, or prompting the user to perform the operation again).
[0068] In this embodiment, the state snapshot is temporary data for a one-time cross-platform jump service and does not need to be permanently saved. By setting a storage expiration time, the cloud processing system can automatically clean up expired data, preventing invalid data from occupying memory or disk space for a long time. When the business concurrency is high, this mechanism can significantly reduce storage costs and ensure the efficient operation of the system.
[0069] Based on the same inventive concept, the present invention also provides another method for cross-platform redirection of web pages, which will be described below in conjunction with the following embodiments.
[0070] Figure 3 This is the second flowchart of the cross-platform redirection method for web pages provided by the present invention.
[0071] The following will combine Figure 3 This paper describes another method for handling cross-platform redirection in web pages.
[0072] In an exemplary embodiment of the present invention, combined with Figure 3As can be seen, the cross-platform redirection processing method for web pages can also be applied to the target application. The cross-platform redirection processing method for web pages can include steps 310 to 320, which will be described in detail below.
[0073] In step 310, in response to the triggering of the jump link displayed on the source application, the target application is launched, and the user interface state data is extracted from the jump link.
[0074] In one embodiment, in response to a redirect link being triggered, the operating system first invokes and launches the target application. During application execution, if the user has already installed the target application, the operating system directly invokes the application via URL Scheme or Universal Links. If the user has not installed it, they are first redirected to the app store to download it, and the application is launched for the first time after installation (at this time, the token in the link is passed via clipboard or device fingerprint technology).
[0075] During startup, the target application obtains the complete redirect link string through a callback interface provided by the system. Subsequently, the target application extracts user interface state data from this redirect link.
[0076] In step 320, a web page with the same user interface state data is rendered on the target application based on the user interface state data.
[0077] In one embodiment, after successfully extracting the user interface state data, the target application can render a web page with the same user interface state data based on this data. The final rendered web page (H5 page) is consistent with the interface state when the user leaves the source application, and the user does not need to scroll, re-enter, or reposition.
[0078] In this embodiment, the target application extracts user interface state data from the redirect link and renders a web page based on this data. This ensures that the user sees an operation progress interface that is completely consistent with the source application, instead of the initial state page. Users do not need to search for previously viewed locations, re-enter previously entered content, or reset filter conditions. This achieves a cross-platform "state-level" continuous experience and solves the pain point that existing deep linking technologies can only transmit static page IDs and cannot retain interactive states.
[0079] Figure 4 This is a schematic diagram of the process for extracting user interface state data from the jump link provided by the present invention.
[0080] The following will combine Figure 4The process of extracting user interface state data from the jump link provided by the present invention will be described.
[0081] In an exemplary embodiment of the present invention, combined with Figure 4 It is known that the jump link includes a state snapshot index identifier; extracting user interface state data from the jump link may include steps 410 to 430, which will be described in detail below.
[0082] In step 410, the status snapshot index identifier is extracted from the jump link.
[0083] In one embodiment, the target application is invoked and launched by the operating system. During the launch process, the target application obtains the complete redirect link through a callback interface provided by the system. The target application parses the link and extracts the status snapshot index identifier from the query parameters of the link.
[0084] In step 420, a state data acquisition request is sent to the cloud processing system so that the cloud processing system can obtain user interface state data that matches the state snapshot index identifier based on the stored correspondence and state snapshot index identifier. The state data acquisition request is used to represent the request to obtain user interface state data that matches the state snapshot index identifier based on the state snapshot index identifier.
[0085] In one embodiment, after the target application extracts the state snapshot index identifier, it initiates a state data acquisition request to a preset cloud processing system. This request is used to represent a request to obtain user interface state data that matches the state snapshot index identifier.
[0086] During the application process, after receiving the request, the cloud processing system searches for the corresponding record in the stored mapping (i.e., the key-value pair storage of the state snapshot index identifier and the state snapshot) based on the state snapshot index identifier carried in the request. If the corresponding record is found, the cloud processing system encapsulates the corresponding user interface state data (i.e., state snapshot JSON) in the HTTP response body and returns it to the target application.
[0087] In step 430, user interface status data sent by the cloud processing system is received.
[0088] In one embodiment, the target application can receive an HTTP response from a cloud processing system over a network and parse the user interface state data from the response body. The user interface state data can be in JSON format.
[0089] During the application process, once the target application successfully obtains the user interface state data, it can render a web page or native page with the same user interface state data on the target application based on this data, so that the interface seen by the user on the target application is completely consistent with the state when leaving the source application.
[0090] In yet another exemplary embodiment of the present invention, continuing with the previously described embodiments, initiating a status data acquisition request to the cloud processing system can be achieved in the following manner: During the storage expiration period, a request to retrieve status data is initiated to the cloud processing system. The cloud processing system contains the correspondence between the valid storage status snapshot index identifier and the status snapshot during the storage expiration period.
[0091] In one embodiment, the request to retrieve state data must be initiated within the storage expiration time. That is, the time interval between the moment the cloud processing system stores the correspondence and the moment the target application initiates the request must not exceed the expiration time set by the cloud processing system.
[0092] In one example, suppose the cloud processing system receives and stores a state snapshot at time T0 (e.g., 14:00:00), with an expiration time of 10 minutes (i.e., the storage expires at 14:10:00). If a user clicks a redirect link within 8 minutes after T0, and the target application initiates a request at 14:08:00, this request occurs within the storage expiration time. Upon receiving the request, the cloud processing system searches for the corresponding snapshot in its storage system based on the state snapshot index. Since the snapshot has not yet expired, it finds the corresponding state snapshot and successfully returns it to the target application. The target application receives the sent user interface state data and then renders a webpage with the same state, achieving a seamless transition.
[0093] In yet another exemplary embodiment of the present invention, continuing with the previously described embodiments, the user interface state data may include routing stack information and user interface control attribute data; wherein, based on the user interface state data, rendering a web page with the same user interface state data on the target application can be achieved in the following manner: Based on the routing stack information, the page structure of the web page is initialized on the target application side, where the page structure includes view components; Render user interface control property data to view components in the page structure to render a web page with the same user interface state data on the target application.
[0094] In one embodiment, routing stack information refers to a Last-In-First-Out (LIFO) stack structure maintained by the page (or view) navigation history in the application, recording the order in which currently opened pages are located, with the newest page at the top and the oldest page at the bottom. In this embodiment, the routing stack information records the user's page navigation history within the web page. For example, the user may have entered a details page from a list page and is currently on the details page. The routing stack information may also include the routing path for each page, page identifiers, and navigation parameters between pages. User interface control attribute data can record the specific state of each view component on the current page.
[0095] During application execution, the target application can parse the routing stack information from the user interface state data. The routing stack information describes the user's historical navigation path on the source application, and the target application needs to reconstruct the same page stack structure based on this information.
[0096] In one example, the target application can obtain the route stack information. The target application's route manager (such as Android's Navigation component or iOS's UINavigationController) can create corresponding page instances sequentially based on this route stack information. For example, it can first create `product_list_page` (the product list page), but not immediately display it to the user; then it can create `product_detail_page` (the product details page) and push it onto the navigation stack, making the currently displayed page the product details page. After the above process is completed, the page structure in the target application is initialized. This page structure contains a series of view components, such as scroll views, image controls, and text input boxes. These components are currently in their default states (e.g., scroll position is 0, the image carousel displays the first image, and the input box is empty).
[0097] After the target application completes the initialization of the page structure, it further renders the extracted user interface control attribute data one by one onto the corresponding view components to achieve state restoration.
[0098] To ensure users seamlessly transition to the restored final interface and avoid abruptly jumping from the default state to the target state (i.e., "flickering" or "jumping"), the target application can employ a "freeze rendering" strategy: temporarily freeze screen updates after page structure initialization, and then display the restored interface all at once after all control property data has been rendered, or gradually reveal it through a transition animation. Ultimately, the webpage seen by the user on the target application is completely consistent with the state when leaving the source application, achieving seamless state continuity across platforms.
[0099] In yet another exemplary embodiment of the present invention, continuing with the previously described embodiments as an example, after the target application initializes and obtains the page structure of the Web page, the method further includes: Freeze the initialized page structure; Rendering user interface control property data to view components in the page structure, so as to render a web page with the same user interface state data on the target application, can be achieved in the following way: After the user interface control property data has been rendered to the view component, the page structure is unfrozen, and a web page with the same user interface state data is rendered on the target application through an animation fade-in.
[0100] In one embodiment, after the page structure is initialized but before the control attribute data rendering begins, the target application can perform a freeze operation. The freeze operation refers to preventing the current page structure from displaying its final image to the user, or pausing the automatic layout and redrawing process of the view.
[0101] Furthermore, while the page structure is frozen, the target application can render the extracted user interface control attribute data one by one onto the corresponding view components. Once all user interface control attribute data has been successfully rendered to the view components, the target application performs an unfreezing operation and displays the final page to the user through a gradual animation. Ultimately, the user sees a complete page in the correct state on the target application, appearing with a smooth fade-in, without any flickering, jumps, or misalignments caused by the restoration of the state.
[0102] Figure 5 This is a schematic diagram illustrating an application scenario of the cross-platform redirection method for web pages provided by this invention.
[0103] To further introduce the cross-platform redirection method for web pages provided by this invention, the following will be combined with... Figure 5 This paper describes the application scenarios of cross-platform redirection methods for web pages.
[0104] In an exemplary embodiment of the present invention, combined with Figure 5As can be seen, on the source application side, when a user browses the H5 webpage displayed in the source application, clicking a "Open in App" or similar function button triggers a platform redirection command. Furthermore, the source application side uses JavaScript to traverse the DOM tree structure of the current H5 webpage and key variables in memory, precisely collecting UI state data at the current moment. This data includes, but is not limited to: the page's vertical / horizontal scroll position (ScrollOffset), temporary text content in input boxes, the current timestamp of the audio / video player (CurrentTime), and the current routing stack information. The collected discrete data is then packaged and serialized into a JSON format "state snapshot" conforming to a predefined protocol.
[0105] Furthermore, the source application can upload the generated JSON state snapshot to the cloud (cloud processing system) snapshot service via a network request. After receiving the snapshot data, the cloud processing system persists it (or sets a short-term cache) and generates a unique index identifier, Snapshot_Token, using a hash algorithm. The cloud processing system returns the generated Snapshot_Token to the source application. Upon receiving the token, the source application uses it to replace the complex business parameters in the original Deep Link, dynamically generating a new redirect link (e.g., myapp: / / path?token=xyz), and displays it to the user.
[0106] The user clicks the link to launch the target application. If the user has already installed the target application (APP), the operating system will directly launch the APP via URL Scheme or Universal Links. If the user has not installed it, they will be redirected to the app store to download it. Upon first launch of the APP after installation (at this time, the token in the link is passed via clipboard or device fingerprint technology). The target application parses the launch URL and extracts the Snapshot_Token during its launch lifecycle.
[0107] Furthermore, the target application sends a request to the cloud snapshot service (i.e., the cloud processing system), passing in the Token. After verifying the validity of the Token, the cloud service returns the corresponding JSON status snapshot.
[0108] On the target application side, the APP routing component initializes the target page structure based on the "routing stack information" in the snapshot. During the page rendering process, the APP automatically executes the scene reconstruction logic: slide the scroll view to the specified coordinates, jump the player to the specified progress, and fill the text content back into the input box. Thus, the user sees the same interface state on the target application side as on the source application side, achieving seamless cross-platform continuity.
[0109] As described above, this invention provides a cross-platform redirection method for web pages. The method is applied to a source application, which displays a web page. The method includes: responding to a platform redirection command, acquiring user interface state data of the web page displayed on the source application, wherein the platform redirection command represents an instruction to control the web page to redirect from the source application to a target application; generating a redirection link matching the user interface state data based on the user interface state data; and displaying the redirection link on the source application, so that when the redirection link is triggered, a web page with the same user interface state data is displayed on the target application. This invention ensures the continuity and seamless transition of the web page's UI state during redirection from the source application to the target application, thereby effectively improving the user experience.
[0110] The following describes the Web page cross-platform redirection processing device provided by the present invention. The Web page cross-platform redirection processing device described below can be referred to in correspondence with the Web page cross-platform redirection processing method described above.
[0111] Figure 6 This is one of the structural schematic diagrams of the cross-platform redirection processing device for web pages provided by the present invention.
[0112] The following will combine Figure 6 The structure of the cross-platform redirection processing device for web pages provided by the present invention will be described.
[0113] In yet another exemplary embodiment of the present invention, combined with Figure 6 As can be seen, the Web page cross-platform redirection processing device is applied to the source application end, which displays a Web page. The device includes an acquisition module 610, a generation module 620, and a redirection module 630. Each module will be described in detail below.
[0114] The acquisition module 610 can be configured to acquire user interface state data displayed by the Web page on the source application terminal in response to a platform jump instruction, wherein the platform jump instruction is used to represent an instruction to control the Web page to jump from the source application terminal to the target application terminal; The generation module 620 can be configured to generate jump links that match the user interface state data based on the user interface state data. The jump module 630 can be configured to display the jump link on the source application, so that when the jump link is triggered, a web page with the same user interface state data will be displayed on the target application.
[0115] In an exemplary embodiment of the present invention, the generation module 620 may generate a jump link that matches the user interface state data based on the user interface state data in the following manner: According to a preset protocol, the user interface state data is packaged into a state snapshot, wherein the state snapshot is used to represent the user interface state data set of the Web page; The aforementioned status snapshot is uploaded to the cloud processing system; The cloud processing system generates a state snapshot index identifier that matches the state snapshot, and stores the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system. Receive the status snapshot index identifier sent by the cloud processing system; Based on the state snapshot index identifier, a jump link matching the user interface state data is generated.
[0116] In an exemplary embodiment of the present invention, the generation module 620 may store the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system in the following manner: Set storage expiration time; During the storage expiration period, the correspondence between the state snapshot index identifier and the state snapshot is stored in the cloud processing system.
[0117] Based on the same inventive concept, the present invention provides a web page cross-platform redirection processing device.
[0118] Figure 7 This is the second schematic diagram of the cross-platform redirection processing device for web pages provided by the present invention.
[0119] The following will combine Figure 7 The structure of the cross-platform redirection processing device for web pages provided by the present invention will be described.
[0120] In yet another exemplary embodiment of the present invention, combined with Figure 7 As can be seen, the Web page cross-platform redirection processing device is applied to the target application end. The device includes an extraction module 710 and a rendering module 720. Each module will be described in detail below.
[0121] The extraction module 710 can be configured to launch the target application in response to the triggering of a jump link displayed on the source application, and extract user interface state data from the jump link. The rendering module 720 can be configured to render a web page with the same user interface state data on the target application based on the user interface state data.
[0122] In another exemplary embodiment of the present invention, the jump link includes a state snapshot index identifier; the extraction module 710 can extract user interface state data from the jump link in the following manner: The status snapshot index identifier is extracted from the jump link; A status data acquisition request is initiated to the cloud processing system so that the cloud processing system can obtain user interface status data that matches the status snapshot index identifier based on the stored correspondence and the status snapshot index identifier. The status data acquisition request is used to represent a request to obtain user interface status data that matches the status snapshot index identifier based on the status snapshot index identifier. Receive the user interface status data sent by the cloud processing system.
[0123] In yet another exemplary embodiment of the present invention, the extraction module 710 may initiate a status data acquisition request to the cloud processing system in the following manner: During the storage expiration period, a status data retrieval request is initiated to the cloud processing system, wherein the cloud processing system effectively stores the correspondence between the status snapshot index identifier and the status snapshot during the storage expiration period.
[0124] In another exemplary embodiment of the present invention, the user interface state data includes routing stack information and user interface control attribute data; the rendering module 720 can render a web page with the same user interface state data on the target application terminal based on the user interface state data in the following manner: Based on the routing stack information, the page structure of the web page is initialized on the target application, wherein the page structure includes view components; The user interface control attribute data is rendered to the view components in the page structure to render a web page with the same user interface state data on the target application.
[0125] In yet another exemplary embodiment of the present invention, the rendering module 720 may also be configured to: Freeze the initialized page structure; The rendering module 720 can render the user interface control attribute data to the view components in the page structure in the following way, so as to render a web page with the same user interface state data on the target application: After the user interface control attribute data has been rendered to the view component, the page structure is unfrozen, and a web page with the same user interface state data is rendered on the target application through an animation fade-in.
[0126] Figure 8 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 8 As shown, the electronic device may include: a processor 810, a communications interface 820, a memory 830, and a communications bus 840, wherein the processor 810, the communications interface 820, and the memory 830 communicate with each other through the communications bus 840. Processor 810 can call logical instructions in memory 830 to execute a web page cross-platform redirection processing method. The method is applied to a source application that displays a web page. The method includes: in response to triggering a platform redirection instruction, acquiring user interface state data displayed on the source application for the web page, wherein the platform redirection instruction represents an instruction to control the web page to redirect from the source application to a target application; generating a redirection link matching the user interface state data based on the user interface state data; displaying the redirection link on the source application so that, when the redirection link is triggered, a web page with the same user interface state data is displayed on the target application; or, executing a web page cross-platform redirection processing method applied to the target application. The method includes: in response to triggering a redirection link displayed on the source application, starting the target application and extracting user interface state data from the redirection link; and rendering a web page with the same user interface state data on the target application based on the user interface state data.
[0127] Furthermore, the logical instructions in the aforementioned memory 830 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
[0128] On the other hand, the present invention also provides a computer program product, which includes a computer program that can be stored on a non-transitory computer-readable storage medium. When the computer program is executed by a processor, the computer can execute the web page cross-platform redirection processing method provided by the above methods. The method is applied to a source application, which displays a web page. The method includes: in response to triggering a platform redirection instruction, acquiring user interface state data of the web page displayed on the source application, wherein the platform redirection instruction is used to characterize an instruction to control the web page to redirect from the source application to a target application; based on the... User interface state data is used to generate a jump link that matches the user interface state data; the jump link is displayed on the source application, so that when the jump link is triggered, a web page with the same user interface state data is displayed on the target application, or, a cross-platform web page jump processing method is executed, the method being applied to the target application, the method comprising: in response to the jump link displayed on the source application being triggered, starting the target application and extracting user interface state data from the jump link; and rendering a web page with the same user interface state data on the target application based on the user interface state data.
[0129] In another aspect, the present invention also provides a non-transitory computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the web page cross-platform redirection processing method provided by the above methods. The method is applied to a source application, which displays a web page. The method includes: in response to triggering a platform redirection instruction, acquiring user interface state data of the web page displayed on the source application, wherein the platform redirection instruction represents an instruction to control the web page to redirect from the source application to a target application; generating a redirection link matching the user interface state data based on the user interface state data; displaying the redirection link on the source application, so that when the redirection link is triggered, a web page with the same user interface state data is displayed on the target application; or, executing the web page cross-platform redirection processing method, which is applied to the target application. The method includes: in response to triggering the redirection link displayed on the source application, starting the target application and extracting user interface state data from the redirection link; and rendering a web page with the same user interface state data on the target application based on the user interface state data.
[0130] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.
[0131] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.
[0132] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.
Claims
1. A method for cross-platform redirection of web pages, characterized in that, The method is applied to a source application that displays a web page. The method includes: In response to a platform redirection command, the user interface state data displayed by the web page on the source application terminal is obtained, wherein the platform redirection command is used to represent an instruction to control the web page to redirect from the source application terminal to the target application terminal; Based on the user interface state data, generate a jump link that matches the user interface state data; The redirect link is displayed on the source application so that, when the redirect link is triggered, a web page with the same user interface state data is displayed on the target application.
2. The web page cross-platform redirection processing method according to claim 1, characterized in that, The step of generating a jump link that matches the user interface state data based on the user interface state data includes: According to a preset protocol, the user interface state data is packaged into a state snapshot, wherein the state snapshot is used to represent the user interface state data set of the Web page; The aforementioned status snapshot is uploaded to the cloud processing system; The cloud processing system generates a state snapshot index identifier that matches the state snapshot, and stores the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system; Receive the status snapshot index identifier sent by the cloud processing system; Based on the state snapshot index identifier, a jump link matching the user interface state data is generated.
3. The method for cross-platform redirection of web pages according to claim 2, characterized in that, The step of storing the correspondence between the state snapshot index identifier and the state snapshot in the cloud processing system includes: Set storage expiration time; During the storage expiration period, the correspondence between the state snapshot index identifier and the state snapshot is stored in the cloud processing system.
4. A method for cross-platform redirection of web pages, characterized in that, The method is applied to the target application, and the method includes: In response to the triggering of a jump link displayed on the source application, the target application is launched, and user interface state data is extracted from the jump link; Based on the user interface state data, a web page with the same user interface state data is rendered on the target application.
5. The method for cross-platform redirection of web pages according to claim 4, characterized in that, The redirect link includes a status snapshot index identifier; The user interface state data extracted from the redirect link includes: The status snapshot index identifier is extracted from the jump link; A status data acquisition request is initiated to the cloud processing system so that the cloud processing system can obtain user interface status data that matches the status snapshot index identifier based on the stored correspondence and the status snapshot index identifier. The status data acquisition request is used to represent a request to obtain user interface status data that matches the status snapshot index identifier based on the status snapshot index identifier. Receive the user interface status data sent by the cloud processing system.
6. The method for cross-platform redirection of web pages according to claim 5, characterized in that, The step of initiating a status data acquisition request to the cloud processing system includes: During the storage expiration period, a status data retrieval request is initiated to the cloud processing system, wherein the cloud processing system effectively stores the correspondence between the status snapshot index identifier and the status snapshot during the storage expiration period.
7. The method for cross-platform redirection of web pages according to claim 4, characterized in that, The user interface state data includes routing stack information and user interface control attribute data; the rendering of a web page with the same user interface state data on the target application based on the user interface state data includes: Based on the routing stack information, the page structure of the web page is initialized on the target application, wherein the page structure includes view components; The user interface control attribute data is rendered to the view components in the page structure to render a web page with the same user interface state data on the target application.
8. The method for cross-platform redirection of web pages according to claim 7, characterized in that, After the target application initializes and obtains the page structure of the web page, the method further includes: Freeze the initialized page structure; The step of rendering the user interface control attribute data to the view component in the page structure, so as to render a web page with the same user interface state data on the target application, includes: After the user interface control attribute data has been rendered to the view component, the page structure is unfrozen, and a web page with the same user interface state data is rendered on the target application through an animation fade-in.
9. A webpage cross-platform redirection processing device, characterized in that, The device is applied to a source application that displays a web page, and the device includes: The acquisition module is used to acquire the user interface state data displayed by the Web page on the source application terminal in response to the triggering platform jump instruction, wherein the platform jump instruction is used to represent the instruction to control the Web page to jump from the source application terminal to the target application terminal; The generation module is used to generate jump links that match the user interface state data based on the user interface state data. The jump module is used to display the jump link on the source application, so that when the jump link is triggered, a web page with the same user interface state data will be displayed on the target application.
10. A web page cross-platform redirection processing device, characterized in that, The device is applied to the target application terminal, and the device includes: The extraction module is used to launch the target application in response to the triggering of a jump link displayed on the source application, and extract user interface state data from the jump link. The rendering module is used to render a web page with the same user interface state data on the target application based on the user interface state data.
11. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the Web page cross-platform redirection processing method as described in any one of claims 1 to 3, or the Web page cross-platform redirection processing method as described in any one of claims 4 to 8.
12. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the Web page cross-platform redirection processing method as described in any one of claims 1 to 3, or the Web page cross-platform redirection processing method as described in any one of claims 4 to 8.
13. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the Web page cross-platform redirection processing method as described in any one of claims 1 to 3, or the Web page cross-platform redirection processing method as described in any one of claims 4 to 8.