Page control method and device, storage medium and electronic equipment

Abstract

The invention discloses a page control method and device, a storage medium and electronic equipment. The method comprises the steps that an interactive area in a target webpage is obtained, the target webpage is embedded in a native page of a target application, and the interactive area comprises a display area for displaying webpage content of the target webpage in a carousel mode; responding to the trigger operation executed on the interactive area, and generating an interactive event; the interaction event is sent to the native page, a target message is generated, and the target message carries an event state identifier used for representing starting or ending of the interaction event; and dynamically adjusting a control instruction of the native page based on the event state identifier, the control instruction including prohibiting sliding of the native page and allowing sliding of the native page. According to the method and the device, the gesture conflict problem of the trigger event between the H5 page and the native page in the hybrid development scene is solved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a page control method and apparatus, a storage medium, and an electronic device. Background Technology

[0002] In hybrid development scenarios, H5 pages are typically embedded within the target application's native pages to achieve dynamic content loading and cross-platform compatibility. However, when H5 pages contain interactive elements, such as swiping and dragging, these may conflict with the gesture controls of the native page.

[0003] To address this conflict, related technologies typically employ a global gesture disabling method or a coordinate-based judgment method. Specifically, completely disabling gesture operations (such as scrolling and dragging) on ​​the native page during H5 page interaction results in a poor user experience. Alternatively, determining whether to intercept touch events involves calculating the user's touch position on the H5 page, but this approach is complex and less accurate, failing to resolve the gesture conflict issue between H5 pages and native pages in hybrid development scenarios.

[0004] There is currently no effective solution to the above problems. Summary of the Invention

[0005] This application provides a page control method and apparatus, storage medium and electronic device to at least solve the problem of gesture conflicts in triggering events between H5 pages and native pages in hybrid development scenarios.

[0006] According to one aspect of the embodiments of this application, a page control method is provided, comprising: obtaining an interactive area in a target webpage, wherein the target webpage is embedded in a native page of a target application, and the interactive area includes a display area for carousel display of webpage content of the target webpage; generating an interactive event in response to performing a trigger operation on the interactive area; sending the interactive event to the native page and generating a target message, wherein the target message carries an event status identifier for indicating the start or end of the interactive event; and dynamically adjusting control instructions of the native page based on the event status identifier, wherein the control instructions include disabling scrolling of the native page and allowing scrolling of the native page.

[0007] Optionally, sending the interaction event to the native page and generating a target message includes: sending the event type of the interaction event to the native page; responding to the received event type by calling back a target processing function, wherein the target processing function is used to define the writing format of the execution state of the interaction event, the execution state including a start interaction event and an end interaction event; and generating the target message by executing the target processing function.

[0008] Optionally, the above-mentioned response to performing a trigger operation on the interactive area to generate an interactive event includes: binding the area label of the interactive area to an event listener of the interactive event; in response to performing the trigger operation on the interactive area, broadcasting the operation type of the trigger operation and the control state of the target control in the interactive area through the event listener; and generating the interactive event based on the operation type and the control state.

[0009] Optionally, the above-mentioned acquisition of the interactive area in the target webpage includes: initializing the target webpage and determining at least one control in the target webpage according to business requirements; in response to performing a trigger operation on the at least one control, displaying the webpage content in a carousel; and determining the area used to display the webpage content as the interactive area.

[0010] Optionally, the control command for dynamically adjusting the native page based on the event status identifier includes at least one of the following: when the event status identifier is a first value, the control command is adjusted to prohibit scrolling of the native page; when the event status identifier is a second value, the control command is adjusted to allow scrolling of the native page.

[0011] Optionally, when the event status identifier is set to a first value, adjusting the control command to prohibit scrolling of the native page includes at least one of the following: when the interactive area includes only one area and only one scroll operation is performed on the first carousel component in the interactive area, modifying the value of the event status identifier from the second value to the first value; and adjusting the control command from allowing scrolling of the native page to prohibiting scrolling of the native page; when the interactive area includes only one area and multiple scroll operations are performed on the second carousel component in the interactive area, in response to each scroll operation performed on the second carousel component, modifying the value of the event status identifier from the second value to the first value, adjusting the control command from allowing scrolling of the native page to prohibiting scrolling of the native page; and after each scroll operation ends, modifying the value of the event status identifier from the first value to the second value, and simultaneously restoring the control command to allowing scrolling of the native page.

[0012] Optionally, the above method further includes: when the interactive area includes multiple areas, in response to performing a swiping operation on at least one carousel component in the multiple areas, modifying the value of at least one event state identifier corresponding to at least one area where the at least one carousel component is located to the first value; in response to the value of the at least one event state identifier being modified to the first value, adjusting the control instruction to prohibit swiping the native page.

[0013] According to another aspect of the embodiments of this application, a page control device is also provided, comprising: a first acquisition unit, configured to acquire an interactive area in a target webpage, wherein the target webpage is embedded in the native page of a target application, and the interactive area includes a display area for carousel display of webpage content of the target webpage; a first processing unit, configured to generate an interactive event in response to performing a trigger operation on the interactive area; a sending unit, configured to send the interactive event to the native page and generate a target message, wherein the target message carries an event status identifier for indicating the start or end of the interactive event; and an adjustment unit, configured to dynamically adjust control instructions of the native page based on the event status identifier, wherein the control instructions include prohibiting scrolling of the native page and allowing scrolling of the native page.

[0014] According to another aspect of the embodiments of this application, a computer-readable storage medium is also provided, wherein a computer program is stored in the computer program for executing the above-described page control method when the electronic device is run.

[0015] According to another aspect of the embodiments of this application, a computer program product is also provided, including a computer program that, when executed by a processor, implements the steps of the above-described method.

[0016] According to another aspect of the embodiments of this application, an electronic device is also provided, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to execute the page control method described above through the computer program.

[0017] Using the embodiments provided in this application, interactive events generated in a pre-determined interactive area of ​​the target page are sent to the native page of the target application upon triggering an operation on that interactive area, so that the target message is assembled on the native side. Finally, the control commands of the native page are dynamically adjusted by the value of the time status identifier parsed on the native side to avoid conflicts between the target webpage's carousel display via touch events and gesture operations on the native page. In other words, by establishing communication between the target webpage and the native page and sending touch events from the target page to the native side in real time, the response to gesture operations on the native page is prohibited, thus solving the problem of gesture conflicts in triggering events between the H5 page and the native page, and improving the flexibility and accuracy of page control. Attached Figure Description

[0018] The accompanying drawings, which are provided to further illustrate this application and form part of this application, illustrate exemplary embodiments of this application and are used to explain this application, but do not constitute an undue limitation of this application.

[0019] Figure 1 This is a schematic diagram illustrating an application scenario of an optional page control method according to an embodiment of this application;

[0020] Figure 2 This is a flowchart of an optional page control method according to an embodiment of this application;

[0021] Figure 3 This is an overall flowchart of an optional page control method according to an embodiment of this application;

[0022] Figure 4 This is a schematic diagram of an optional page control system according to an embodiment of this application;

[0023] Figure 5 This is a specific example of an optional page control method according to an embodiment of this application;

[0024] Figure 6 This is a schematic diagram of an optional page control device according to an embodiment of this application;

[0025] Figure 7 This is a schematic diagram of the structure of an optional electronic device according to an embodiment of this application. Detailed Implementation

[0026] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0027] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0028] The technical solutions in this application will comply with legal regulations during implementation. When operating according to the technical solutions in the embodiments, the data used will not involve user privacy, ensuring that the operation process is compliant and legal while guaranteeing data security. In addition, when the above embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use, and processing of related data must comply with the relevant regulations and standards of the relevant countries or regions.

[0029] According to one aspect of the embodiments of this application, a page control method is provided. As an optional implementation, the above-described page control method may be applied to, but is not limited to, [examples of other methods]. Figure 1 The application scenarios shown are as follows. In, for example... Figure 1 In the application scenario shown, the target terminal 102 can communicate with the server 106 via network 104, but is not limited to this. The server 106 can perform operations on the database 108, such as write or read data operations. The target terminal 102 may include, but is not limited to, a human-computer interaction screen, a processor, and a memory. The human-computer interaction screen may be used to display the native page and target webpage adjusted using the page control instructions in this application on the target terminal 102. The processor may be used to respond to the human-computer interaction operations, execute corresponding operations, or generate corresponding instructions and send the generated instructions to the server 106. The memory is used to store relevant processing data, such as interaction events, target messages, and control instructions.

[0030] Optionally, in this embodiment, the target terminal can be a terminal configured with a target client, which may include, but is not limited to, at least one of the following: mobile phone (such as Android phone, iOS phone, etc.), laptop computer, tablet computer, PDA, MID (Mobile Internet Devices), PAD, desktop computer, smart TV, etc. The target client may be a video client, instant messaging client, browser client, educational client, etc. The network may include, but is not limited to, wired network and wireless network, wherein the wired network includes: local area network, metropolitan area network and wide area network, and the wireless network includes: Bluetooth, WIFI and other networks that enable wireless communication. The server may be a single server, a server cluster composed of multiple servers, or a cloud server.

[0031] The technical solution of this application can be widely applied to the handling of gesture conflicts between the native page and H5 page of the target application in a hybrid app development scenario. For example, it can address gesture conflicts between the sliding operation of interactive elements (carousel, product attribute slider) in the product details page of an e-commerce application and the up and down scrolling operation of the native page of a shopping app. In the dynamic display process of a social media application, if the user interacts with H5 elements, the page scrolling function of the native application should be disabled in a timely manner to avoid gesture conflicts.

[0032] H5 pages, also known as HTML5 pages, refer to web pages or application interfaces built using HTML5 standards and related web technologies (such as CSS3 and JavaScript). H5 pages have gained significant attention due to their cross-platform compatibility, dynamic loading capabilities, and ease of updating. They can be run directly through a browser or a WebView component embedded within a native application, meaning the same H5 page can display well on different operating systems and devices.

[0033] To address the gesture conflict issue in event triggering between H5 pages and native pages in hybrid development scenarios, this application proposes a page control method. Figure 2 This is a flowchart of a page control method according to an embodiment of the present application, which includes the following steps S202 to S208.

[0034] It should be noted that the page control method shown in steps S202 to S208 can be, but is not limited to, executed by an electronic device. The electronic device can be, but is not limited to, a device that... Figure 1 The target terminal or server shown.

[0035] Step S202: Obtain the interactive area in the target webpage, wherein the target webpage is embedded in the native page of the target application, and the interactive area includes a display area that displays the webpage content of the target webpage in a carousel.

[0036] Step S204: In response to performing a trigger operation on the interactive area, an interactive event is generated;

[0037] Step S206: Send the interactive event to the native page and generate a target message, wherein the target message carries an event status identifier indicating the start or end of the interactive event;

[0038] Step S208: Based on the event status identifier, dynamically adjust the control instructions of the native page, wherein the control instructions include prohibiting scrolling of the native page and allowing scrolling of the native page.

[0039] Before explaining the technical solutions in this embodiment, the technical terms involved in this application will be briefly introduced.

[0040] Hybrid development is a development model that combines native applications and web applications. By embedding H5 pages in a native shell, the application can run on different platforms while retaining some characteristics of native applications, such as high performance and the ability to access hardware.

[0041] JavaScript Bridge (JSB) is a communication mechanism that allows HTML5 pages to call APIs provided by native applications, enabling data and event passing between HTML5 pages and native applications. It is an indispensable component of hybrid development, ensuring seamless integration between HTML5 and native applications.

[0042] UICollectionView is a UI component used to display a scrollable collection of items, often used to build interfaces with grid or list layouts. In various embodiments of this application, it is used as a native container to hold H5 content.

[0043] WKWebView is a UI component used for loading and displaying web content. Compared to the traditional UIWebView, it offers better performance and stability, making it suitable for loading complex H5 pages.

[0044] The Scroll Enabled property controls whether scrollable containers such as UIScrollView or UICollectionView can respond to user touch and swipe actions. When this property is set to true, the container is allowed to scroll; when set to false, the container is disabled to scroll.

[0045] In this embodiment, the initialization of the native container page is a fundamental step in hybrid development, involving the creation of the native UI layout.

[0046] On the native side, the native application uses UICollectionView to create a horizontally scrolling list interface. To host the H5 page, one of the cells is designed as a WKWebView container to load and display dynamic web page content.

[0047] For example, suppose you're developing a news reading application with a "Hot Articles" section, which is a scrollable list. Each list item is a Card, and one Card is specifically used to display the news details on an H5 page. The developer will embed a WKWebView within the Card to load the H5 page displaying the news details.

[0048] Next, a JSB communication interface is registered on the native side, specifically establishing a communication bridge between the H5 and native applications via JavaScript Bridge. This is because after creating the WKWebView, the native side registers custom methods, such as registerMethod, to establish a communication channel for calls from the H5 side. This allows the H5 page to send events or request information by calling the native side's API.

[0049] The native notification center is used to broadcast events, ensuring that all components within the native application receive specific information. In this embodiment, it is possible, but not limited to, to pre-subscribe to specific notifications using a native view controller, allowing it to listen for subsequent touch event broadcasts or notifications triggered by JSBs, and adjust scroll enable properties accordingly.

[0050] It should be noted that this application embodiment also provides an implementation method for on-demand listening to touch interactions on H5 pages. Specifically, on the H5 page, touch event listeners such as touchstart and touchend are bound to DOM elements in interactive areas based on business needs, while static areas are not bound, thus optimizing performance from the source.

[0051] When an H5 page loads, it adds touchstart and touchend event listeners only to areas that require scrolling, such as carousels and list items, based on business logic. This reduces unnecessary event listening and improves page performance.

[0052] Using a pre-established JSB communication interface, when an H5 page captures a touch event, it sends the event status to the native client by calling the native client's interface. Specifically, the H5 page's JavaScript code listens for the touchstart and touchend events. When these interactive events occur, it calls a method registered through JSB (such as MgtvApi.callhandler) to send a target message carrying an event status identifier (such as isTouchStart) to the native client, triggering the native client's scrolling control logic.

[0053] For example, when a user starts touching a control within the interactive area of ​​the carousel, the H5 page sends a message with isTouchStart=1 to the native client via the JSB interface, indicating that the interaction event has started, meaning that the user's finger is in contact with the control in the interactive area.

[0054] When the native application receives an H5 event, it triggers the registered JSB callback handler to process the event state from the H5. Upon receiving a touch event from the JSB interface, the native application executes a predefined callback method. This method is crucial for the interaction between H5 and native logic, converting the event state into a format understandable by the native application.

[0055] For example, in the news application mentioned above, when the native client receives the message isTouchStart=1, it will trigger a callback function. The function's purpose is to encapsulate the touch start state into a notification and send it out.

[0056] By leveraging the native system's notification center mechanism, the touch event state is broadcast to all components that have subscribed to this notification. Specifically, within the callback function, the native application broadcasts a notification containing the touch event state identifier (isTouchStart) through the system notification center, which all subscribed components can receive and react to.

[0057] Based on broadcast notifications or messages, the native view controller dynamically adjusts its scroll enable property to prevent gesture conflicts. Specifically, upon receiving a touch event state notification, the native view controller parses the `isTouchStart` state value and adjusts the `UICollectionView`'s scroll enable property accordingly. For example, when `isTouchStart = 1`, the native view's scrolling is disabled to prevent conflicts with swiping operations on the H5 page; when `isTouchStart = 0`, scrolling is restored to ensure normal application interaction.

[0058] For example, in a news app, when a user is scrolling through a carousel, a notification with isTouchStart=1 will cause the native UICollectionView to stop scrolling until the user releases the touch (isTouchStart=0), at which point the scrolling functionality of the UICollectionView will be re-enabled.

[0059] Based on the above analysis, the core of this embodiment lies in utilizing the JSB framework to achieve cross-platform communication, while simultaneously using the native notification center mechanism to transmit the touch event state of the H5 page to various relevant components of the native application in real time, thereby achieving dynamic adjustment of the native view scrolling behavior. The following are the execution steps of the entire process:

[0060] S11, Initialization Phase: On the native side, a container page is created to host the H5 content. Simultaneously, a JSB interface is registered to establish a communication bridge between the H5 and native sides. Furthermore, the native view controller subscribes to specific notifications, preparing to receive touch event states.

[0061] S12, Touch event listening: H5 pages listen for touch events in specific areas as needed, and only bind event listeners to interactive areas that need to be swiped, avoiding unnecessary performance overhead;

[0062] S13, Event Reporting: When a touch event is captured in the interactive area of ​​the H5 page, the event status is sent to the native side through the JSB interface, triggering the callback processing on the native side;

[0063] S14, Status Broadcast: After the JSB callback is executed on the native side, a notification carrying the event status is broadcast through the notification center to ensure that all relevant native components can receive it and respond appropriately;

[0064] S15, Dynamic Control: After receiving a status notification, the native view controller dynamically adjusts the scroll enable attribute according to the event status to achieve precise control and avoid gesture conflicts.

[0065] The above method resolves the touch event conflict between H5 pages and native applications in hybrid development scenarios, improving the user experience during swiping operations. This is especially advantageous for applications that require frequent page switching and content swiping, such as news reading and social media.

[0066] As an optional example, sending the interaction event to the native page and generating the target message as described above includes:

[0067] Send the event type of the interaction event to the native page;

[0068] In response to the received event type, a target processing function is called back, wherein the target processing function is used to define the writing format of the execution state of the interaction event, the execution state including a start interaction event and an end interaction event;

[0069] The target message is generated by executing the target processing function.

[0070] Through the JavaScript Bridge (JSB) mechanism, H5 pages can send standardized event types to native applications to indicate specific interaction states, such as touchstart or touchend.

[0071] Clearly, when a user performs a triggering action (such as clicking, long-pressing, or dragging) on ​​a control in an interactive area of ​​an H5 page, its JavaScript code captures this action and converts it into a specific event type. This event type is then sent to the native client via a registered JSB interface. For example, the "touchstart" event notifies the native client that the user has started touching the screen and may need to swipe, while the "touchend" event indicates that the user has completed the triggering action.

[0072] For example, in a news application, when a user starts touching the carousel area, the listener in the JavaScript framework captures the triggering event and sends a "touchstart" event to the native application by calling the native MgtvApi.callhandler interface.

[0073] It should be noted that the native client predefines callback handling functions, which are triggered and executed when an event type is received from the H5 page.

[0074] During initialization, native WKWebView or other container components register callback functions to handle H5 events. When an event type is received from the H5 side, the corresponding function is invoked. The task of this function may, but is not limited to, converting the received event type into an execution state writing format that the native side can understand.

[0075] During the execution of the target processing function, a target message body or target message carrying the execution status is constructed and broadcast to the entire application environment through the native notification center.

[0076] Inside the `handleTouchEvents` function, in addition to handling the event type, a message is constructed containing key execution status indicators. This target message is then sent out via the native notification center, allowing all components subscribed to this notification to receive the event status change.

[0077] For example, when the handleTouchEvents function is executed, the native application constructs a notification message in which the userInfo field contains the information isTouchStart=1. This target message is then broadcast to the entire application environment.

[0078] This embodiment refines the sending and processing flow of interaction events between the H5 page and the native application, ensuring accurate transmission of event status and timely response from the native application, and achieving precise avoidance of gesture conflicts. The specific steps are as follows:

[0079] S21, Event capture and sending;

[0080] First, when a user's touch action triggers an interactive area on the H5 page, the JavaScript on the H5 page will generate a corresponding event type;

[0081] S22, Event type handling and state transition;

[0082] After receiving the event type, the native application will call the pre-registered handling function. Inside the handling function, the event type is further interpreted and converted into a unified status identifier, such as setting isTouchStart=1, indicating that the user has started interacting with the H5 page.

[0083] S23, Status Broadcast;

[0084] After the handler function completes the state transition, it constructs a target message, which includes not only the state identifier but also potentially additional event information. This target message is then broadcast via the native notification center. All native components subscribed to this notification, such as UICollectionView, will receive the message and respond accordingly.

[0085] S24, State awareness and dynamic adjustment.

[0086] Native controls, such as UICollectionView, dynamically adjust their scroll enable properties based on the isTouchStart state value after receiving a status notification. For example, when isTouchStart = 1, the scrollEnabled property is immediately set to false to disable scrolling and avoid conflicts with the swiping operations of the H5 page; when isTouchStart = 0, the scrollEnabled property is restored to true to ensure normal scrolling interaction of the native control, improving user experience and optimizing application performance.

[0087] This embodiment refines the coordination mechanism for touch events between H5 pages and native applications. Through precise event type sending, efficient callback of target processing functions, and generation of status messages, it achieves seamless integration of gesture operations.

[0088] As an optional example, the above-described response to performing a triggering operation on the interactive area to generate an interactive event includes:

[0089] Bind the area label of the interactive area to the event listener of the interaction event;

[0090] In response to performing the triggering operation on the interactive area, the operation type of the triggering operation and the control state of the target control in the interactive area are broadcast through the event listener;

[0091] The interaction event is generated based on the operation type and the control state.

[0092] In this embodiment, based on the DOM elements contained in the H5 webpage, interactive events within the H5 webpage are bound to event listeners through the area tags of the interactive areas, so as to associate the interactive areas with touch events.

[0093] During H5 page initialization, JavaScript code uses CSS selectors to locate interactive areas in the DOM tree and binds specific touch event listeners, such as touchstart and touchend, to these areas. Simultaneously, for subsequent event handling, each interactive area is assigned a unique area tag to identify its role and location on the page.

[0094] For example, in a news application, the area where the carousel is located is designated as an interactive area. During the JavaScript initialization phase, the DOM element is located, and the touchstart and touchend event listeners are bound to the element using the addEventListener method. At the same time, the carousel area is marked with regionTag=1 for easy lookup and identification during subsequent event handling.

[0095] When a user performs a touch operation within an interactive area on an H5 page, the bound event listener captures the action, collects the operation type and the current state of the target control, and passes it to the native side via the JavaScript Bridge.

[0096] If the event listener in the interactive area detects that the user has triggered an interaction event (i.e., the user's finger has touched a control in the interactive area), it will collect the current operation type (such as touch start, touch move, touch end) and the state of the involved controls (such as the index currently displayed in the carousel). This information will be encapsulated in an event object and sent to the native application via the JSB interface, providing detailed data reference for the native event handling.

[0097] After receiving the operation type and control status from the H5 page on the native side, it will generate standardized interaction events based on this information to guide the behavior adjustment of native UI components.

[0098] For example, when a native JSB callback function receives an event object from an HTML5 application, it parses the operation type and control state information, converting it into an event format that the native application can understand. For instance, it maps `eventType` and `regionTag` to native event types and appends additional control state information to generate a complete interactive event.

[0099] This embodiment further refines the fine-grained management of interactive areas in H5 pages. By combining event listeners with area labels, it ensures that when users perform triggered operations within the H5 webpage, the operation type and control state can be accurately collected and transmitted to the native end, providing a data foundation for subsequent gesture coordination and interface control.

[0100] The above steps ensure high precision and low latency in touch event handling between H5 pages and native applications, providing a more robust and efficient interactive control solution for hybrid application development, thereby improving user experience and optimizing application performance.

[0101] As an optional implementation, the above method of obtaining interactive areas in the target webpage includes:

[0102] The target webpage is initialized, and at least one control in the target webpage is determined according to business requirements;

[0103] In response to a trigger operation performed on the at least one control, the webpage content is displayed in a carousel;

[0104] The area used to display the webpage content is defined as the interactive area.

[0105] In a hybrid development environment, after loading an H5 page on the native client, the H5 page (such as the target webpage) needs to be initialized, and interactive controls need to be identified and determined based on business logic.

[0106] After the target webpage is loaded into the WebView, the native application sets up specific URL paths, etc. Then, through interaction with the H5 page, the native application can identify and determine interactive areas on the page based on business needs, such as the carousel display area and list items.

[0107] The native application can respond to the triggering operations of controls in the H5 page and execute the carousel display of page content. If interactive controls (such as left and right scroll bars) are identified in the H5 page, the native application can respond to the triggering operations of these controls, such as user touch and swipe, to achieve a dynamic carousel display of page content.

[0108] For example, in a news application, when a user touches the scroll bar in the carousel area, the native client receives this operation through the JSB framework and then controls the carousel component to display the content in a carousel.

[0109] After identifying the interactive controls on the target webpage, the native application will further define the page area where these controls are located as an interactive area for subsequent interactive event listening and processing.

[0110] It's important to note that identifying interactive areas is crucial for event handling. Natively, the page marks areas containing interactive controls as interactive regions. This facilitates the deployment of event listeners, ensuring that only user actions within these areas are captured and processed, thereby improving the accuracy and efficiency of event handling.

[0111] For example, in the news details page of a news app, the area containing the carousel component is marked as an interactive area. This means that the event listener will only be triggered when the user swipes within this specific area, sending an event type to the native app to control the scrolling behavior of the native page and avoid conflicts with events from other static or unrelated areas.

[0112] Through the steps described above, the native application achieves precise response and control over actions triggered in interactive areas of the H5 page. This not only enhances the user experience in hybrid applications but also optimizes the performance of the target application and avoids unnecessary resource consumption. Furthermore, by listening to interactive events on the H5 page on demand, redundancy in event listening is reduced, further improving the efficiency and response speed of event handling.

[0113] As an optional example, the control instructions for dynamically adjusting the native page based on the event state identifier include at least one of the following:

[0114] If the event status identifier is set to the first value, the control command will be adjusted to prevent scrolling of the native page.

[0115] If the event status identifier is set to the second value, the control command will be adjusted to allow scrolling of the native page.

[0116] When an event status indicator received from the H5 page indicates that a triggering operation (such as clicking, long-pressing, double-clicking, etc.) is currently being performed on the H5 page, the native client will adjust its control commands to prohibit scrolling on the native page in order to avoid interaction conflicts with the H5 page.

[0117] This can include, but is not limited to, broadcasting target messages carrying event status identifiers to components that subscribe to notifications in the native app via the native notification center. When the event status identifier is set to the first value (e.g., isTouchStart = 1), it indicates that the user has begun interacting with the interactive area of ​​the H5 page. At this time, the native app's control logic will respond immediately, adjusting the control commands related to touch operations to disable swiping, ensuring that the scrolling of the native page does not conflict with the operation of the H5 page.

[0118] When the event status indicator received from the H5 page indicates that the interaction has ended, the native application will adjust the control commands and restore the scrolling of the native page to ensure smooth operation and user experience.

[0119] Similarly, when the event status flag is set to the second value (e.g., isTouchStart=0), it indicates that the user's interaction with the H5 page has been completed. The native control logic will respond promptly, adjusting the control command to allow scrolling, ensuring that the scrolling function of the native page is restored immediately, and meeting the user's operational needs for the entire application interface.

[0120] For example, in a news app, after a user touches the carousel, the H5 page generates a `touchend` event, and the value of its event state flag `isTouchStart` becomes 0. This information is broadcast to the `UICollectionView` control via the native notification center. Upon receiving `isTouchStart = 0`, the control immediately restores the native page's `scrollEnabled` property to `true`, allowing the user to swipe the native page again. Whether scrolling up to view article content or swiping left to switch to the next news item, the operation remains smooth and seamless.

[0121] The above method achieves precise gesture conflict avoidance. By dynamically adjusting control commands, it ensures that the native page's swiping function is disabled in a timely manner when the user interacts with the H5 page, avoiding interference with H5 operations. After the H5 interaction ends, the native page's swiping ability is quickly restored, ensuring the continuity of application operations and the smoothness of the user experience.

[0122] As an optional implementation, when the event state identifier is set to a first value, adjusting the control command to prevent scrolling of the native page includes at least one of the following:

[0123] When the interactive area includes only one area and only one swipe operation is performed on the first carousel component in the interactive area, the value of the event state identifier is changed from the second value to the first value; and the control command is changed from allowing swiping of the native page to disabling swiping of the native page.

[0124] If the interactive area comprises only one region and multiple swipe operations are performed on the second carousel component within the interactive area, in response to each swipe operation performed on the second carousel component, the value of the event state identifier is modified from the second value to the first value, and the control command is adjusted from allowing swiping of the native page to disabling swiping of the native page; and after each swipe operation ends, the value of the event state identifier is modified from the first value to the second value, and the control command is restored to allowing swiping of the native page.

[0125] like Figure 5 As shown in (a), assuming an H5 page is embedded within the native page of the target application, and the H5 page only contains a carousel area at the top of the page, when the user touches the carousel component, the value of isTouchStart is changed from 0 to 1. Using the JSB framework described in the above embodiments, a target message carrying an event state identifier of the interaction event is generated, and the target message is broadcast to the native end (i.e., the target application).

[0126] By parsing the target message and obtaining isTouchStart=1, the component control instructions of the native page are modified to disable swiping, such as... Figure 5 As shown in (b), when a touch event in the H5 page ends (such as when the user's finger leaves the interactive area), the value of isTouchStart is changed from 1 to 0, restoring the component control instructions of the native page to allow swiping.

[0127] In real-world applications, users may encounter issues related to... Figure 5 The carousel component shown in (a) performs multiple trigger operations, such as swiping twice (or more) or clicking twice. For each trigger operation, the corresponding event state is recorded, and the value of the event state identifier is determined based on the current event state.

[0128] For example, after the first swipe, the value of isTouchStart changes from 0 to 1, identifying this swipe as interaction event 1; after the first swipe ends, the value of isTouchStart changes from 1 to 0. After a 2-second interval, the user performs a second swipe on the same carousel component, and the value of isTouchStart changes from 0 to 1 again, identifying this swipe as interaction event 2. After listening to the two interaction events and obtaining the event state identifier of each interaction event, the native page will adjust the control instructions of the native page in real time according to the value.

[0129] For example, taking a shopping app as an example, suppose a user swipes twice consecutively in the top carousel ad area. Each time they swipe, the H5 application changes the isTouchStart status flag from 0 to 1 and sends it to the native application. At the start of the first swipe, the native application receives the status flag as 1 and immediately disables page scrolling; at the end of the swipe, the status flag returns to 0, and page scrolling resumes normally. The second swipe repeats the above process, ensuring that the native interface remains synchronized with the current operation during multiple swipes. This prevents accidental H5 interactions from affecting the H5 interaction and also ensures that the user can browse the native page normally after the operation ends.

[0130] By using the methods described above, hybrid application developers can more precisely control the handling logic of touch events, avoid unnecessary gesture conflicts, ensure the intuitiveness and smoothness of users when using the application, and also reserve flexible space for possible future expansion and upgrades.

[0131] As an optional implementation, the above method also includes:

[0132] When the interactive area includes multiple areas, in response to performing a sliding operation on at least one carousel component in the multiple areas, the value of at least one event state identifier corresponding to at least one area where the at least one carousel component is located is modified to the first value;

[0133] In response to the value of the at least one event status identifier being modified to the first value, the control instruction is adjusted to prohibit scrolling of the native page.

[0134] Apart from Figure 5 As shown, an H5 page may contain only one carousel area. In a hybrid development environment, there may be multiple interactive carousel areas. When any component is swiped by the user, the event state flag of the relevant area needs to be dynamically updated.

[0135] In other words, when an H5 page contains multiple interactive areas, and at least one area is a carousel component, whenever a user is detected to perform a swipe operation on one of the carousel components, the H5's JavaScript script will modify the value of the event state flag isTouchStart of the area corresponding to that carousel component to the first value (such as 1) according to a specific algorithm or rule, indicating that a swipe operation is currently in progress and the native client needs to respond.

[0136] The native client receives and parses event status identifiers from multiple interactive areas in the H5 page. When any event status identifier is detected to have the first value, the control command is adjusted to prevent the native page from scrolling.

[0137] In other words, when the native application receives the isTouchStart status flag of one or more areas of the H5 page as the first value, it will adjust the control command to disable page scrolling. This is to avoid conflicts between the user's scrolling of the H5 carousel component and the scrolling operation of the native page, and to ensure the focus and smoothness of user interaction.

[0138] In other words, the technical solution of this application is not only applicable to the sliding control of a single interactive area, but can also handle the complex situation of multiple carousel components in an H5 page. By independently maintaining the event state flag of each interactive area, the native client can intelligently determine when to disable and when to resume scrolling, achieving fine-grained coordination of operations across multiple areas. This mechanism not only avoids conflicts in gesture operations, but also ensures the stability and user-friendliness of hybrid applications in multi-point interaction scenarios, providing strong support for application development in complex interaction scenarios.

[0139] The technical solution presented in this application enables more precise and efficient control of the scrolling behavior of the native page when an H5 page contains multiple interactive areas. This avoids gesture conflicts during user operations, ensures the smoothness and responsiveness of the application interface under various interactive conditions, and further optimizes the user experience. It demonstrates the practicality of hybrid development technology in gesture coordination and multi-area interaction processing.

[0140] To more clearly understand the page control methods described above, the following will combine... Figure 3 The overall flowchart shown further describes it.

[0141] S302, Native container page initialization;

[0142] In hybrid application development, the native application is responsible for creating the container page that carries the H5 content. For example, in an iOS application, a UICollectionView is used to implement a horizontally scrollable list interface. A cell in the list acts as a container, embedding a WKWebView to load and display the H5 page.

[0143] S304, register the JSB communication interface on the native side;

[0144] After WKWebView is initialized, the native client registers custom methods (such as registerMethod) through the JavaScriptBridge (JSB) framework, ready to receive function calls from the H5 client, and establishes a two-way communication mechanism between the H5 and native clients.

[0145] By registering the JSB communication interface, the native client can receive touch event information sent by the H5 client, which is a key step in achieving gesture conflict coordination.

[0146] S306, native client controllers subscribe to native notifications;

[0147] The native view controller pre-subscribes to system notifications (such as VIC_WEBVIEW_PAGESWIPER_TOUCHEVENT) and begins listening for touch event broadcasts that will be triggered by JSB callbacks, preparing to respond to scroll control commands.

[0148] Subscribing to native notifications ensures that the native app receives touch events from the H5 app as soon as they occur, allowing it to make timely adjustments and avoid gesture conflicts.

[0149] S308, listens to touch interactions (touchStart / touchEnd) on H5 pages on demand;

[0150] During H5 page initialization, based on business requirements, touch event listeners such as touchstart, touchmove, and touchend are bound to DOM elements in specific interactive areas (such as carousels, scrollable components, etc.) that require scrolling.

[0151] By binding event listeners on demand, the number of event listeners can be reduced, optimizing the performance of H5 pages, while ensuring that only touch events in relevant areas are reported to the native client, thus improving the efficiency and accuracy of event handling.

[0152] S310 sends events to the native client via JSB;

[0153] When the interactive area being monitored captures a touch event on the H5 page, the H5 client sends the corresponding event type (such as touchStart, touchEnd) to the native client through the established JavaScriptBridge interface to trigger the native client's coordination mechanism.

[0154] This step is the trigger condition for gesture conflict coordination. By reporting H5 events to the native client, the touch events are synchronized between H5 and the native client, ensuring that the native page can make corresponding adjustments based on the touch state of H5.

[0155] S312, determine whether touchstart has been triggered;

[0156] If triggered, determine whether the event state flag is changed from 0 to 1 (finger touches the interactive area) or from 1 to 0 (finger leaves the interactive area).

[0157] S314, the JSB callback method is executed;

[0158] After the native application receives an event sent by the H5 application through the JSB interface, its corresponding JSB callback function is triggered and executed, serving as a hub connecting the H5 event and the native internal logic.

[0159] The execution of JSB callback methods enables the native client to parse H5 events and further determine the scrolling control strategy of the native page based on the event type and status identifier.

[0160] S316, Broadcast touch event status notification;

[0161] In the JSB callback function, a specific touch event notification is broadcast through the native notification center. The message body of this notification carries key event status identifiers (such as isTouchStart=1 to indicate the start of the touch, and isTouchStart=0 to indicate the end of the touch).

[0162] By broadcasting touch event status notifications, the native application can pass the touch status information of H5 to other components that have subscribed to this notification, thereby achieving information sharing and global coordination of scroll control.

[0163] S318, dynamically controls native view scrolling;

[0164] After receiving the notification broadcast in the above steps, the native view controller parses the isTouchStart state value and dynamically adjusts the scrollEnabled property of the UICollectionView accordingly. See step S320 for details.

[0165] S320 dynamically adjusts control commands based on the isTouchStart status value.

[0166] The control logic is as follows: when isTouchStart=1, the scrolling of the native view is immediately disabled to prevent gesture conflicts; when isTouchStart=0, the scrolling capability of the native view is restored in a timely manner to ensure normal interaction.

[0167] Dynamically controlling the scrolling of the native view is a key measure to resolve gesture conflicts. By disabling scrolling at appropriate times, it can be ensured that the scrolling of the native page will not cause confusion when users perform swiping operations on the H5 page, thereby improving the accuracy and experience of user operations.

[0168] The above steps resolve the gesture conflict issue between H5 pages and native interfaces in hybrid development scenarios, improving the user experience. From the initialization of the native container page to the on-demand listening and reporting of touch events on the H5 page, and then to the event reception, status broadcasting, and scroll control adjustment on the native side, the entire process forms a complete closed loop, ensuring that there are no gesture conflicts in the interaction between the H5 page and the native view (native page), thus enhancing the user experience.

[0169] According to another aspect of the embodiments of this application, as follows is also provided Figure 4 The page control system shown includes a native container page initialization module, a native client JSB communication interface registration module, and a native client notification subscription module. The following is a brief description of each module and the interaction process between them.

[0170] Native container page initialization module: responsible for building the native container interface that carries H5 content, such as using UICollectionView to create a scrollable list, in which WKWebView is embedded to display the H5 page.

[0171] Register the JSB communication interface module on the native side: After the WKWebView is initialized on the native side, a custom method is registered through the JavaScriptBridge framework to establish a channel for bidirectional communication between H5 and the native side.

[0172] Native app subscription notification module: The native view controller subscribes to specific system notifications to receive subsequent touch event broadcasts triggered by JSB callbacks, ensuring timely response to scroll control commands.

[0173] H5 Touch Event On-Demand Listening Module: During H5 page initialization, touch event listeners, such as touchstart and touchend, are bound to DOM elements in specific interactive areas according to business needs to optimize performance and reduce unnecessary event processing.

[0174] H5 JSB event sending module: When a touch event is detected in the interactive area of ​​the H5 page, a standardized event type is sent to the native side in real time through the JSB interface, triggering the native side's coordination mechanism.

[0175] Native JSB callback execution module: After receiving an H5 event on the native side, it triggers the JSB callback handling function, acting as an intermediary link between the H5 event and the native logic.

[0176] Native Event Status Broadcast Module: In the JSB callback, touch event notifications carrying status identifiers, such as the value of isTouchStart, are broadcast through the notification center to drive subsequent scroll control logic.

[0177] Native View Scrolling Dynamic Control Module: Based on the status indicator in the broadcast notification, dynamically adjust the scroll enable property of UICollectionView to disable scrolling at the start of swiping to avoid conflicts and immediately restore scrolling after swiping ends, ensuring a smooth interactive experience.

[0178] The interaction process between modules is as follows: First, the native container page initialization module and the native JSB communication interface registration module form the basic environment for system deployment. Then, the H5 touch event on-demand listening module and the H5 JSB event sending module are responsible for capturing touch events on the H5 page and sending them to the native side. After receiving the event, the native JSB callback execution module broadcasts the status identifier to the entire system through the native event status broadcast module. Finally, the native view scrolling dynamic control module dynamically adjusts the scrolling behavior according to the broadcast status, achieving gesture coordination and improving the user experience. Through the orderly interaction of the above modules, touch events are ensured to be processed accurately, which optimizes application performance and avoids gesture operation conflicts, demonstrating the efficiency and intelligence of the coordination mechanism in a hybrid development environment.

[0179] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0180] According to another aspect of the embodiments of this application, as follows is also provided Figure 6 A page control device is shown, the device comprising:

[0181] The first acquisition unit 602 is used to acquire an interactive area in a target webpage, wherein the target webpage is embedded in the native page of the target application, and the interactive area includes a display area that displays the webpage content of the target webpage in a carousel.

[0182] The first processing unit 604 is configured to generate an interactive event in response to a trigger operation performed on the interactive area;

[0183] Sending unit 606 is used to send the interactive event to the native page and generate a target message, wherein the target message carries an event status identifier indicating the start or end of the interactive event;

[0184] The adjustment unit 608 is used to dynamically adjust the control instructions of the native page based on the event state identifier, wherein the control instructions include prohibiting scrolling of the native page and allowing scrolling of the native page.

[0185] Optionally, the aforementioned transmitting unit 606 includes:

[0186] A sending module is used to send the event type of the interactive event to the native page;

[0187] A callback module is used to respond to the received event type by calling back the target processing function, wherein the target processing function is used to define the writing format of the execution state of the interaction event, and the execution state includes a start interaction event and an end interaction event;

[0188] The first processing module is used to generate the target message by executing the target processing function.

[0189] Optionally, the first processing unit 604 includes:

[0190] A binding module is used to bind the area label of the interactive area to the event listener of the interactive event;

[0191] The second processing module is used to respond to the triggering operation performed on the interactive area by broadcasting the operation type of the triggering operation and the control state of the target control in the interactive area through the event listener.

[0192] The third processing module is used to generate the interaction event based on the operation type and the control state.

[0193] Optionally, the first acquisition unit 602 mentioned above includes:

[0194] The fourth processing module is used to initialize the target webpage and determine at least one control in the target webpage according to business requirements;

[0195] The first display module is configured to display the webpage content in a carousel in response to a trigger operation performed on the at least one control;

[0196] The fifth processing module is used to determine the area used to display the webpage content as the interactive area.

[0197] Optionally, the aforementioned adjustment unit 608 includes:

[0198] The first adjustment module is used to adjust the control command to prohibit scrolling of the native page when the value of the event status identifier is the first value.

[0199] The second adjustment module is used to adjust the control command to allow scrolling of the native page when the event status identifier takes the second value.

[0200] Optionally, the first adjustment module mentioned above includes:

[0201] A first processing submodule is configured to perform at least one of the following: when the interactive area includes only one area and only one swipe operation is performed on the first carousel component in the interactive area, modify the value of the event status identifier from the second value to the first value; and adjust the control command from allowing swiping of the native page to disabling swiping of the native page; when the interactive area includes only one area and multiple swipe operations are performed on the second carousel component in the interactive area, in response to each swipe operation performed on the second carousel component, modify the value of the event status identifier from the second value to the first value, adjust the control command from allowing swiping of the native page to disabling swiping of the native page; and after each swipe operation ends, modify the value of the event status identifier from the first value to the second value, and simultaneously restore the control command to allowing swiping of the native page.

[0202] Optionally, the first adjustment module mentioned above further includes:

[0203] The modification submodule is configured to, in the case that the interactive area includes multiple areas, modify the value of at least one event state identifier corresponding to at least one area where the at least one carousel component is located to the first value in response to performing a sliding operation on at least one carousel component in the multiple areas.

[0204] The adjustment submodule is configured to adjust the control command to prohibit scrolling of the native page in response to the value of at least one event status identifier being modified to the first value.

[0205] It should be noted that the embodiments of the page control device here can refer to the embodiments of the page control method described above, and will not be repeated here.

[0206] According to another aspect of the embodiments of this application, an electronic device for implementing the above-described page control method is also provided. This electronic device may be... Figure 1 The target terminal or server is shown. This embodiment uses the electronic device as an example to illustrate the concept. Figure 7 As shown, the electronic device includes a memory 702 and a processor 704. The memory 702 stores a computer program, and the processor 704 is configured to execute the steps of any of the above method embodiments through the computer program.

[0207] Optionally, the aforementioned electronic device may be located in at least one of a plurality of network devices of the computer.

[0208] Optionally, the processor described above can be configured to perform the following steps via a computer program:

[0209] S1, Obtain the interactive area in the target webpage, wherein the target webpage is embedded in the native page of the target application, and the interactive area includes a display area that displays the webpage content of the target webpage in a carousel;

[0210] S2, in response to performing a trigger operation on the interactive area, an interactive event is generated;

[0211] S3, send the interaction event to the native page and generate a target message, wherein the target message carries an event status identifier indicating the start or end of the interaction event;

[0212] S4. Based on the event status identifier, dynamically adjust the control instructions of the native page, wherein the control instructions include prohibiting scrolling of the native page and allowing scrolling of the native page.

[0213] Alternatively, as those skilled in the art will understand, Figure 7 The structure shown is for illustrative purposes only. Figure 7This does not limit the structure of the aforementioned electronic devices or electronic equipment. For example, electronic devices or electronic equipment may also include components that are more... Figure 7 The more or fewer components shown (such as network interfaces, etc.), or having the same Figure 7 The different configurations shown.

[0214] The memory 702 can be used to store software programs and modules, such as the program instructions / modules corresponding to the page control method and apparatus in this embodiment. The processor 704 executes various functional applications and data processing by running the software programs and modules stored in the memory 702, thereby implementing the aforementioned page control method. The memory 702 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 702 may further include memory remotely located relative to the processor 704, and these remote memories can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. Specifically, the memory 702 may be used, but is not limited to, to store interactive events, event status identifiers, and control instructions. As an example, such as... Figure 7 As shown, the memory 702 may include, but is not limited to, the first acquisition unit 602, the first processing unit 604, the sending unit 606, and the adjustment unit 608 in the page control device. Furthermore, it may include, but is not limited to, other module units in the page control device, which will not be elaborated upon in this example.

[0215] Optionally, the transmission device 706 described above is used to receive or send data via a network. Specific examples of the network described above may include wired networks and wireless networks. In one example, the transmission device 706 includes a Network Interface Controller (NIC), which can be connected to other network devices and a router via a network cable to communicate with the Internet or a local area network. In another example, the transmission device 706 is a radio frequency (RF) module, used for wireless communication with the Internet.

[0216] In addition, the aforementioned electronic device also includes: a display 708 for displaying native pages and target web pages; and a connection bus 710 for connecting various module components in the aforementioned electronic device.

[0217] In other embodiments, the target terminal or server described above can be a node in a distributed system. This distributed system can be a blockchain system, formed by connecting multiple nodes through network communication. The nodes can form a point-to-point network, and any type of computing device, such as a server or target terminal, can become a node in the blockchain system by joining this point-to-point network.

[0218] According to another aspect of this application, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the page control method provided in various optional implementations of the above-described server verification processing, wherein the computer program is configured to execute the steps in any of the above-described method embodiments at runtime.

[0219] Optionally, in this embodiment, the computer-readable storage medium described above may be configured to store a computer program for performing the following steps:

[0220] S1, Obtain the interactive area in the target webpage, wherein the target webpage is embedded in the native page of the target application, and the interactive area includes a display area that displays the webpage content of the target webpage in a carousel;

[0221] S2, in response to performing a trigger operation on the interactive area, an interactive event is generated;

[0222] S3, send the interaction event to the native page and generate a target message, wherein the target message carries an event status identifier indicating the start or end of the interaction event;

[0223] S4, based on the event state identifier, dynamically adjust the control instructions of the native page, wherein the control instructions include disabling scrolling of the native page and allowing scrolling of the native page. Optionally, in the embodiments of this application, the term "module" or "unit" refers to a computer program or part of a computer program with a predetermined function, which works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0224] Optionally, in this embodiment, those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the target terminal. The program can be stored in a computer-readable storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0225] The sequence numbers of the embodiments in this application are merely for description and do not represent the superiority or inferiority of the embodiments. If the integrated units in the above embodiments are implemented as software functional units and sold or used as independent products, they can be stored in the aforementioned computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or 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 one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the methods in the various embodiments of this application.

[0226] In the above embodiments of this application, the descriptions of each embodiment have their own emphasis. Parts not described in detail in a certain embodiment can be referred to in the relevant descriptions of other embodiments. It should be understood that the disclosed client can be implemented in other ways in the several embodiments provided in this application. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division. In actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling or direct coupling or communication connection may be through some interfaces; the indirect coupling or communication connection of units or modules may be electrical or other forms.

[0227] 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 units can be selected to achieve the purpose of this embodiment according to actual needs. Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated units described above can be implemented in hardware or as software functional units.

[0228] The above are merely preferred embodiments of this application. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A page control method, characterized in that, include: Obtain the interactive area in the target webpage, wherein the target webpage is embedded in the native page of the target application, and the interactive area includes a display area that displays the webpage content of the target webpage in a carousel; In response to a trigger operation performed on the interactive area, an interactive event is generated; Send the interaction event to the native page and generate a target message, wherein the target message carries an event status identifier indicating the start or end of the interaction event; Based on the event status identifier, the control instructions of the native page are dynamically adjusted, wherein the control instructions include prohibiting scrolling of the native page and allowing scrolling of the native page.

2. The method according to claim 1, characterized in that, Sending the interaction event to the native page and generating the target message includes: Send the event type of the interaction event to the native page; In response to the received event type, a target processing function is called back, wherein the target processing function is used to define the writing format of the execution state of the interaction event, the execution state including a start interaction event and an end interaction event; The target message is generated by executing the target processing function.

3. The method according to claim 1, characterized in that, The step of generating an interactive event in response to performing a trigger operation on the interactive area includes: Bind the area label of the interactive area to the event listener of the interaction event; In response to performing the triggering operation on the interactive area, the operation type of the triggering operation and the control state of the target control in the interactive area are broadcast through the event listener; The interaction event is generated based on the operation type and the control state.

4. The method according to claim 1, characterized in that, The step of obtaining the interactive area in the target webpage includes: The target webpage is initialized, and at least one control in the target webpage is determined according to business requirements; In response to a trigger operation performed on the at least one control, the webpage content is displayed in a carousel; The area used to display the webpage content is defined as the interactive area.

5. The method according to claim 1, characterized in that, The control instructions for dynamically adjusting the native page based on the event state identifier include at least one of the following: If the event status identifier is set to the first value, the control command will be adjusted to prevent scrolling of the native page. If the event status identifier is set to the second value, the control command will be adjusted to allow scrolling of the native page.

6. The method according to claim 5, characterized in that, When the event status identifier is set to a first value, the control command is adjusted to prevent scrolling of the native page, including at least one of the following: When the interactive area includes only one area and only one swipe operation is performed on the first carousel component in the interactive area, the value of the event state identifier is changed from the second value to the first value; and the control command is changed from allowing swiping of the native page to disabling swiping of the native page. When the interactive area comprises only one region and multiple swipe operations are performed on the second carousel component within the interactive area, in response to each swipe operation performed on the second carousel component, the value of the event state identifier is modified from the second value to the first value, and the control command is adjusted from allowing swiping of the native page to disabling swiping of the native page; and after each swipe operation ends, the value of the event state identifier is modified from the first value to the second value, and the control command is restored to allowing swiping of the native page.

7. The method according to claim 5, characterized in that, The method further includes: When the interactive area includes multiple areas, in response to performing a sliding operation on at least one carousel component in the multiple areas, the value of at least one event state identifier corresponding to at least one area where the at least one carousel component is located is modified to the first value; In response to the value of the at least one event status identifier being modified to the first value, the control instruction is adjusted to prohibit scrolling of the native page.

8. A page control device, characterized in that, include: The first acquisition unit is used to acquire an interactive area in a target webpage, wherein the target webpage is embedded in the native page of the target application, and the interactive area includes a display area that displays the webpage content of the target webpage in a carousel. The first processing unit is configured to generate an interactive event in response to a trigger operation performed on the interactive area; The sending unit is configured to send the interactive event to the native page and generate a target message, wherein the target message carries an event status identifier indicating the start or end of the interactive event; An adjustment unit is used to dynamically adjust the control instructions of the native page based on the event state identifier, wherein the control instructions include disabling scrolling of the native page and allowing scrolling of the native page.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein the program can be executed by a terminal device or computer at runtime as described in any one of claims 1 to 7.

10. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to perform the method as described in any one of claims 1 to 7 via the computer program.

Images