Method and system for controlling browser interface return in iOS application by gesture

Abstract

This invention provides a method and system for controlling browser interface return in an iOS application via gestures, comprising: creating a subclass of the WebView control to disable the native iOS system gestures; adding a custom right swipe gesture; customizing response processing logic for the right swipe gesture, performing corresponding actions according to the right swipe gesture to complete the response processing; and adding real-time swiping display effects to the response processing. This invention, by creating a subclass of WebView, disabling the system's built-in right swipe gesture, adding a custom right swipe gesture, and customizing response processing logic, ensures that the logic for swiping to return to the previous level matches the user's expectations, thereby improving the user experience.

Description

Technical Field

[0001] This invention relates to the field of communication technology, and more specifically, to a method and system for controlling the browser interface return in an iOS application via gestures. Background Technology

[0002] The iOS system provides the WebView browser display control (specifically the WKWebView class), which app developers can use to display HTML5 pages within their apps.

[0003] HTML5 (H5 for short) is a language for describing how to build web content. HTML5 is the next-generation standard for the internet, a language for building and presenting internet content, and is considered one of the core technologies of the internet.

[0004] The iOS system provides a JavaScript bridging mechanism (JS bridging), allowing HTML5 pages to call native app methods via JavaScript code. These methods are the native APIs provided by the app. iOS also provides a transform matrix (implemented by CGAffineTransform) for rotating, transforming, and translating the displayed view. This matrix facilitates animation development. In iOS, both the native navigation bar controller and WebView have a built-in right-swipe-to-go-back function. However, when using a right-swipe gesture to return to the previous page in a WebView control, the system invariably displays the previous record from the browsing history, which presents the following issues:

[0005] 1. If a user visits the list page and details page multiple times, the WebView's built-in right-swipe-to-go-back gesture will not return to the previous page as expected. For example, if the browsing history is: "Home -> List Page -> Details Page 1 -> List Page -> Details Page 2", when the user swipes right repeatedly to go back, the page display order will be: "List Page -> Details Page 1 -> List Page -> Home". This does not match the expected "List Page -> Home".

[0006] 2. The WebView control does not provide an API for controlling right-swipe gestures, preventing H5 pages from customizing gesture response events. For example, when swiping right to go back, it's possible to skip certain parts of the browsing history, or even completely block right-swipe gestures and have the H5 page handle the browsing history itself. Summary of the Invention

[0007] To address the shortcomings of existing technologies, the purpose of this invention is to provide a method and system for controlling the browser interface return in an iOS application via gestures.

[0008] A method for controlling the browser interface to return in an iOS application via gestures, according to the present invention, includes:

[0009] Step S1: Create a subclass of the WebView control to block the original gestures of the iOS system;

[0010] Step S2: Add a custom right swipe gesture;

[0011] Step S3: Customize the response processing logic for the right swipe gesture, and complete the response processing by performing the corresponding action according to the right swipe gesture;

[0012] Step S4: Add a real-time sliding display effect to the response processing.

[0013] Preferably, the response processing includes the following sub-steps:

[0014] Step S4.1: The right swipe gesture triggers the control command, and it is determined whether H5 has a custom gesture response event. If so, the real-time gesture progress animation is hidden, and the H5 response event is executed and cleared. If not, step S4.2 is triggered.

[0015] Step S4.2: Determine whether the WebView control needs to be closed. If yes, close the WebView control; otherwise, retrieve the browsing history list of the WebView control and trigger step S4.3:

[0016] Step S4.3: Find the appropriate previous browsing record. If the search fails, close the WebView control. If the search succeeds, the WebView control responds to the control command and goes back to the link specified in the current browsing record.

[0017] Preferably, finding a suitable previous browsing history includes the following sub-steps:

[0018] Step S4.3.1: Retrieve the browsing history list of the WebView control in reverse order;

[0019] Step S4.3.2: Check each currently viewed record to see if it is empty. If it is, return an empty record; otherwise, trigger step S4.3.3.

[0020] Step S4.3.3: Determine if there is a list of browsing records to be skipped and if the browsing record is in the list. If yes, trigger step S4.3.1; if no, obtain the index position of the current access record, perform a forward traversal of all browsing records to find if there is a browsing record that matches the access record. If yes, return the previous browsing record of the found browsing record as the previous page; if no, trigger step S4.3.4.

[0021] Step S4.3.4: Return to the previous access record as the previous page.

[0022] Preferably, the steps for adding a real-time sliding display effect are as follows:

[0023] Step A: Locate the previous browsing history you need to return to;

[0024] Step B: Determine if the current browsing history is found. If so, obtain the snapshot image corresponding to the browsing history and place the snapshot image below the WebView control; otherwise, do not respond.

[0025] Step C: Modify the transform property of the snapshot image and the WebView control according to the gesture swipe amount, and respond accordingly and display the corresponding swipe effect according to the finger movement trend.

[0026] Preferably, when swiping right to return, the blank page can be skipped and the user can continue to return to the previous page. Furthermore, on the specific business completion page, the right swipe gesture is set to return to the entry page of the business, thereby skipping all intermediate pages.

[0027] The real-time sliding display effect includes a wave-shaped mask.

[0028] A system for controlling browser interface return in an iOS application via gestures, according to the present invention, includes:

[0029] Module M1: Creates a subclass of the WebView control to block the original gestures of the iOS system;

[0030] Module M2: Add custom right swipe gesture;

[0031] Module M3: Customizes the response processing logic for the right swipe gesture, and completes the response processing by performing the corresponding action according to the right swipe gesture;

[0032] Module M4: Adds a real-time sliding display effect to the response processing.

[0033] Preferably, the response processing includes the following sub-modules:

[0034] Module M4.1: The right swipe gesture triggers a control command and determines whether H5 has a custom gesture response event. If so, the real-time gesture progress animation is hidden, and the H5's response event is executed and cleared. If not, module M4.2 is triggered.

[0035] Module M4.2: Determines whether the WebView control needs to be closed. If yes, closes the WebView control; otherwise, retrieves the WebView control's browsing history list and triggers module M4.3.

[0036] Module M4.3: Finds the previous browsing record. If the search fails, the WebView control is closed; if the search succeeds, the WebView control responds to the control command and returns to the link specified in the current browsing record.

[0037] Preferably, finding the appropriate previous browsing history includes the following sub-modules:

[0038] Module M4.3.1: Retrieves browsing history from the browsing history list of the WebView control in reverse order;

[0039] Module M4.3.2: Check each currently viewed record for whether it is empty. If it is, return an empty record; otherwise, trigger module M4.3.3.

[0040] Module M4.3.3: Determine if there is a list of browsing records to be skipped and if the browsing record is in the list. If yes, trigger module M4.3.1; otherwise, obtain the index position of the current access record, perform a forward traversal of all browsing records to find if there is a browsing record that matches the access record. If yes, return the previous browsing record of the found browsing record as the previous page; otherwise, trigger module M4.3.4.

[0041] Module M4.3.4: Returns the previous access record as the previous page.

[0042] Preferably, the module that adds a real-time sliding display effect is as follows:

[0043] Module A: Locate the previous browsing record that needs to be returned;

[0044] Module B: Determines whether the current browsing history is found. If so, it retrieves the snapshot image corresponding to the browsing history and places the snapshot image below the WebView control; otherwise, it does not respond.

[0045] Module C: Modifies the transform property of the snapshot image and the WebView control based on the gesture swipe amount, and responds accordingly and displays the corresponding swipe effect based on the finger movement trend.

[0046] Preferably, when swiping right to return, the blank page can be skipped and the user can continue to return to the previous page. Furthermore, on the specific business completion page, the right swipe gesture is set to return to the entry page of the business, thereby skipping all intermediate pages.

[0047] The real-time sliding display effect includes a wave-shaped mask.

[0048] Compared with the prior art, the present invention has the following beneficial effects:

[0049] 1. This invention creates a subclass of WebView, disables the system's built-in right swipe gesture, adds a custom right swipe gesture, and customizes the response processing logic, thereby making the logic of swiping right to return to the previous level match the user's expectations and improving the user experience.

[0050] 2. This invention uses a JavaScript bridge to open the right swipe gesture response API for H5 to call, enabling H5 to fully control the logic of swiping right to return to the previous page. Attached Figure Description

[0051] Other features, objects, and advantages of the present invention will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:

[0052] Figure 1 This is a schematic diagram of the response processing flow for the right swipe-back gesture in this invention.

[0053] Figure 2 This is a schematic diagram of the process for finding a suitable previous browsing record in this invention.

[0054] Figure 3 This is a diagram illustrating the UI effect of modifying the snapshot image and the transform property of the WebView based on the amount of sliding, as shown in this invention.

[0055] Figure 4 This is a diagram showing the interface effect after swiping back using the custom right-swipe gesture processing logic in this invention. Detailed Implementation

[0056] The present invention will now be described in detail with reference to specific embodiments. These embodiments will help those skilled in the art to further understand the present invention, but do not limit the invention in any way. It should be noted that those skilled in the art can make several changes and improvements without departing from the concept of the present invention. These all fall within the protection scope of the present invention.

[0057] Example 1

[0058] According to the present invention, a method for controlling the browser interface return in an iOS application via gestures is provided, such as... Figures 1 to 2 As shown, it includes:

[0059] Step S1: Create a subclass of the WebView control to block the original gestures of the iOS system.

[0060] Step S2: Add a custom right swipe gesture. The parameters and attributes for the added right swipe gesture include the array of links to ignore on right swipe, the flag for closing the WebView on right swipe, the link to return to on right swipe, the flag for the custom right swipe event callback, and the callback for the custom right swipe event. Details are as follows:

[0061] *ignoreBackUrls is an array of links to ignore when swiping right, representing a list of browsing history URLs to skip when swiping back.

[0062] *ignoreBackAllUrl is the flag for closing the WebView when swiping right. It determines whether to close the entire WebView when swiping right to go back.

[0063] *gestureBackToUrl is the link to go back to when you swipe right. Swiping right will take you directly back to the browsing history specified by that link.

[0064] *customBackGesture is a flag indicating whether to use a custom right-swipe back event callback in H5.

[0065] *whenCustomBackGesture is the callback for the custom right swipe event, and the H5 custom right swipe back response block.

[0066] Step S3: Customize the response processing logic for the right swipe gesture, and complete the response processing by performing the corresponding action according to the right swipe gesture.

[0067] Step S4: Add a real-time sliding display effect to the response processing. The response processing includes the following sub-steps:

[0068] Step S4.1: The right swipe gesture triggers the control command, and it is determined whether H5 has a custom gesture response event. If so, the real-time gesture progress animation is hidden, and the H5 response event is executed and cleared. If not, step S4.2 is triggered.

[0069] Step S4.2: Determine whether the WebView control needs to be closed. If yes, close the WebView control; otherwise, retrieve the browsing history list of the WebView control and trigger step S4.3:

[0070] Step S4.3: Find the appropriate previous browsing record. If the search fails, close the WebView control; if the search succeeds, the WebView control responds to the control command and returns to the link specified in the current browsing record. For example, the user's page access records are: 1 Home, 2 Investment List Page, 3 Investment Product A, 4 Investment List Page, 5 Investment Product B. When the user is at Investment Product B (page 5), a gesture triggers the back button. To return to Investment List Page (page 4), if the gesture triggers the back button again, the "appropriate" previous browsing record should be "1 Home," not "3 Investment Product A." Specifically, finding the appropriate previous browsing record includes the following sub-steps:

[0071] Step S4.3.1: Retrieve browsing records from the browsing history list of the WebView control in reverse order. Step S4.3.2: Check each browsing record to see if it is empty. If so, return an empty record; otherwise, check if there is a list of browsing records to skip and if the browsing record is in that list. If so, trigger step S4.3.1; otherwise, obtain the index position of the current access record, and perform a forward traversal through all browsing records to find if any browsing record matches the current access record. If so, return the previous browsing record of the found record as the previous page; otherwise, return the previous access record of the current access record as the previous page.

[0072] The steps for adding a real-time sliding display effect are as follows: Step A: Locate the previous browsing record to be returned to. Step B: Determine if the current browsing record is found. If so, obtain the snapshot image corresponding to the browsing record and place the snapshot image below the WebView control; otherwise, do not respond. Step C: ... Figure 3 As shown, the `transform` property of the snapshot image and the WebView control is modified according to the amount of finger swipe, and corresponding responses and swipe display effects are generated based on the finger movement trend. The real-time swipe display effect includes a wave-shaped mask, such as... Figure 4As shown. Specifically, it listens for changes in the current browser address. When a change occurs, it retrieves a snapshot image of the WebView and associates this image with the URL, storing it in memory. Then, it checks if it can return to the previous page by searching for a suitable previous browsing record. If it cannot return to the previous page, it disables the custom right swipe gesture. At the beginning of the right swipe gesture recognition phase, it finds the previous browsing record to return to through the "search for a suitable previous browsing record" process. If the record is found, and the current browsing record is also found, it retrieves the corresponding snapshot image and places it in the lower layer of the WebView. If not, it does not respond. During the right swipe gesture, the snapshot image and the WebView's transform property are modified according to the swipe amount. For example... Figure 3 As shown. When the right swipe gesture ends, the direction of the finger movement at the end is determined. If the direction is a left swipe, the "back to previous page" animation is canceled; otherwise, the "back to previous page" animation is played and the WebView returns to that page.

[0073] Furthermore, by using a JavaScript bridge, specifically WKUserContentController's (void)addScriptMessageHandler:(id <wkscriptmessagehandler>The `scriptMessageHandlername:(NSString*)name` method exposes the following related APIs, providing H5 with complete control over the logic of swiping right to return to the previous page:

[0074] 1) SkipBack: Skips the current page when swiping back. This API allows HTML5 to specify transition pages or blank pages that can be skipped when swiping back, allowing the user to return to the previous page.

[0075] 2) `skipBackUntil` (Swipe right to return to a specified page): This API allows you to specify whether a swipe-back gesture closes the entire WebView or returns to the browsing history of a specified link. Through this API, H5 pages can set a swipe-back gesture on the page where a specific business function is completed to return to the entry page of that function, thus skipping all intermediate pages.

[0076] 3) `registerCustomBackGestureListener`: This API allows you to customize the right-swipe-to-go-back gesture handling logic when an H5 page is embedded, thus hiding the subpage. After setting this method, the real-time swipe effect will change to adding a wave-shaped overlay, as shown below. Figure 4 As shown.

[0077] 4) unregisterCustomBackGestureListener(Unregister Right Swipe Back Event Callback): Unregisters the custom right swipe back gesture handling logic.

[0078] Example 2

[0079] A system for controlling browser interface return in an iOS application via gestures, according to the present invention, includes:

[0080] Module M1: Creates a subclass of the WebView control, which blocks the original gestures of the iOS system.

[0081] Module M2: Add custom right swipe gesture.

[0082] Module M3: Customizes the response processing logic for the right swipe gesture, performing corresponding actions based on the gesture to complete the response processing. When returning with a right swipe gesture, it can skip blank pages and continue returning to the previous page. Furthermore, on specific business completion pages, a right swipe gesture can be set to return to the entry page of that business, thus skipping all intermediate pages.

[0083] Module M4: Adds a real-time sliding display effect to the response processing. The response processing includes the following sub-modules:

[0084] Module M4.1: A right swipe gesture triggers a control command and determines whether the H5 has a custom gesture response event. If so, the real-time gesture progress animation is hidden, and the H5's response event is executed and cleared. If not, it determines whether the WebView control needs to be closed. If so, the WebView control is closed. If not, the WebView control's browsing history list is retrieved, and a suitable previous browsing history is searched for. If the search fails, the WebView control is closed. If the search succeeds, the WebView control responds to the control command and returns to the link specified in the current browsing history.

[0085] Specifically, finding the appropriate previous browsing record includes the following sub-modules: Module M4.3.1: Retrieves browsing records from the WebView's browsing record list in reverse order. Module M4.3.2: Checks each browsing record to see if it is empty. If so, it returns an empty record; otherwise, it checks if there is a list of browsing records to skip and whether the browsing record is in that list. If so, it triggers module M4.3.1; otherwise, it obtains the index position of the current access record, performs a forward traversal through all browsing records, and checks if there is a browsing record that matches the access record. If so, it returns the previous browsing record of the found browsing record as the previous page; otherwise, it returns the previous access record of the current access record as the previous page.

[0086] The modules for adding real-time sliding display effects are as follows: Module A: Locates the previous browsing record to be returned to; Module B: Determines whether the current browsing record is found. If so, it obtains the snapshot image corresponding to the browsing record and places the snapshot image below the WebView control; otherwise, it does not respond; Module C: Modifies the snapshot image and the transform property of the WebView control according to the gesture swipe amount, and responds accordingly and adds corresponding sliding display effects based on the finger movement trend. The real-time sliding display effect includes a wave-shaped mask.

[0087] Those skilled in the art will understand that, in addition to implementing the system, apparatus, and their modules provided by this invention in purely computer-readable program code, the same program can be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers by logically programming the method steps. Therefore, the system, apparatus, and their modules provided by this invention can be considered a hardware component, and the modules included therein for implementing various programs can also be considered structures within the hardware component; alternatively, modules for implementing various functions can be considered both software programs implementing the method and structures within the hardware component.

[0088] Specific embodiments of the present invention have been described above. It should be understood that the present invention is not limited to the specific embodiments described above, and those skilled in the art can make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. Unless otherwise specified, the embodiments and features described in this application can be arbitrarily combined with each other.< / wkscriptmessagehandler>

Claims

1. A method for controlling the browser interface to return in an iOS application via gestures, characterized in that, include: Step S1: Create a subclass of the WebView control to block the original gestures of the iOS system; Step S2: Add a custom right swipe gesture; Step S3: Customize the response processing logic for the right swipe gesture, and complete the response processing by performing the corresponding action according to the right swipe gesture; Step S4: Add a real-time sliding display effect to the response processing; The response processing includes the following sub-steps: Step S4.1: The right swipe gesture triggers the control command, and it is determined whether H5 has a custom gesture response event. If so, the real-time gesture progress animation is hidden, and the H5 response event is executed and cleared. If not, step S4.2 is triggered. Step S4.2: Determine whether the WebView control needs to be closed. If yes, close the WebView control; otherwise, retrieve the browsing history list of the WebView control and trigger step S4.3: Step S4.3: Find the appropriate previous browsing record. If the search fails, close the WebView control. If the search succeeds, the WebView control responds to the control command and goes back to the link specified in the current browsing record. Finding the appropriate previous browsing history involves the following sub-steps: Step S4.3.1: Retrieve the browsing history list of the WebView control in reverse order; Step S4.3.2: Check each currently viewed record to see if it is empty. If it is, return an empty record; otherwise, trigger step S4.3.

3. Step S4.3.3: Determine if there is a list of browsing records to be skipped and whether the browsing record is in the browsing list. If yes, trigger step S4.3.1; if no, obtain the index position of the current access record, perform a forward traversal in all browsing records to find if there is a browsing record that matches the access record. If yes, return the previous browsing record of the found browsing record as the previous page; if no, trigger step S4.3.

4. Step S4.3.4: Return to the previous access record as the previous page.

2. The method of claim 1, wherein the method is performed by a user of an iOS device. The steps to add a real-time sliding display effect are as follows: Step A: Locate the previous browsing history you need to return to; Step B: Determine if the current browsing history is found. If so, obtain the snapshot image corresponding to the browsing history and place the snapshot image below the WebView control; otherwise, do not respond. Step C: Modify the transform property of the snapshot image and the WebView control according to the gesture swipe amount, and respond accordingly and display the corresponding swipe effect according to the finger movement trend.

3. The method of claim 1, wherein the method is performed by a user of an iOS device. When swiping right to return, the blank page can be skipped and the user can continue to the previous page. Furthermore, on the specific business completion page, the right swipe gesture can be set to return to the entry page of the business, thereby skipping all intermediate pages. The real-time sliding display effect includes a wave-shaped mask.

4. A system for controlling a browser interface back in iOS application by gesture, characterized in that, include: Module M1: Creates a subclass of the WebView control to block the original gestures of the iOS system; Module M2: Add custom right swipe gesture; Module M3: Customizes the response processing logic for the right swipe gesture, and completes the response processing by performing the corresponding action according to the right swipe gesture; Module M4: Adds a real-time sliding display effect to the response processing; The response processing includes the following sub-modules: Module M4.1: The right swipe gesture triggers a control command and determines whether H5 has a custom gesture response event. If so, the real-time gesture progress animation is hidden, and the H5's response event is executed and cleared. If not, module M4.2 is triggered. Module M4.2: Determines whether the WebView control needs to be closed. If yes, closes the WebView control; otherwise, retrieves the WebView control's browsing history list and triggers module M4.

3. Module M4.3: Finds the previous browsing record. If the search fails, the WebView control is closed. If the search succeeds, the WebView control responds to the control command and goes back to the link specified in the current browsing record. Finding the appropriate previous browsing history includes the following sub-modules: Module M4.3.1: Retrieves browsing history from the browsing history list of the WebView control in reverse order; Module M4.3.2: Check each currently viewed record for whether it is empty. If it is, return an empty record; otherwise, trigger module M4.3.

3. Module M4.3.3: Determine if there is a list of browsing records to be skipped and whether the browsing record is in the browsing list. If yes, trigger module M4.3.1; if no, obtain the index position of the current access record, perform a forward traversal of all browsing records to find if there is a browsing record that matches the access record. If yes, return the previous browsing record of the found browsing record as the previous page; if no, trigger module M4.3.

4. Module M4.3.4: Returns the previous access record as the previous page.

5. The system for controlling return in a browser interface in an iOS application by a gesture according to claim 4, wherein, The following modules add a real-time sliding display effect: Module A: Locate the previous browsing record that needs to be returned; Module B: Determines whether the current browsing history is found. If so, it retrieves the snapshot image corresponding to the browsing history and places the snapshot image below the WebView control; otherwise, it does not respond. Module C: Modifies the transform property of the snapshot image and the WebView control based on the gesture swipe amount, and responds accordingly and displays the corresponding swipe effect based on the finger movement trend.

6. The system for controlling return in a browser interface in an iOS application by a gesture according to claim 4, wherein, When swiping right to return, the blank page can be skipped and the user can continue to the previous page. Furthermore, on the specific business completion page, the right swipe gesture can be set to return to the entry page of the business, thereby skipping all intermediate pages. The real-time sliding display effect includes a wave-shaped mask.

Images