H5 Page Split-Screen Interaction via Transparent Web View
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current split-screen interaction methods on mobile terminals are inflexible and inefficient, relying on terminal capabilities and requiring frequent updates, with limited interaction forms and functions between split-screen pages.
Innovation Solution
A method and apparatus for split-screen interaction on mobile terminals, involving the creation of a full-screen transparent web view interface, loading a 5G H5 page, setting it as a split-screen page, loading a full-screen mask and pop-up split-screen page, and facilitating communication and interaction between these pages through page component communications.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If H5 page communicates with client through JSBridge to open full screen mask and display pop-up page, then split-screen interaction can be achieved, but split-screen efficiency is low and interaction forms are limited
Solution Approach 1:
The patent extracts the pop-up page rendering from the client-side native application and moves it into the H5 page itself. The H5 page contains a web view that can render pop-up pages independently, eliminating the need for JSBridge communication with the client to display pop-up interfaces. This extraction of rendering capability directly improves split-screen efficiency while reducing communication complexity.
Solution Approach 2:
The H5 page is designed to serve multiple functions: it displays the main split-screen content and also contains the capability to render pop-up pages within its own web view. This multi-functionality eliminates the need for separate native client components to handle pop-up displays, thereby improving efficiency and expanding interaction forms without increasing system complexity.
2Adaptability or versatility
If rely on terminal capabilities and add iteration of APP functions, then split-screen interaction can be implemented, but flexibility is reduced and frequent updates are required
Solution Approach 1:
The patent uses a web view within the H5 page to render pop-up pages, effectively copying the native application's rendering capability into the web page itself. This allows the H5 page to independently handle pop-up displays without relying on the terminal's native capabilities or requiring updates to the client application. The web view acts as a self-contained rendering engine that maintains flexibility while eliminating update dependencies.
3Ease of operation
If use half-screen container rendered by half-screen web view, then split-screen can be achieved, but interaction forms between split-screen interfaces are limited
Solution Approach 1:
The patent adds a new dimension to the interaction model by enabling the H5 page to render pop-up pages within its own web view. This creates a hierarchical structure where the H5 page can both display main content and embed additional interactive pages, expanding interaction forms from simple half-screen displays to multi-level, multi-dimensional interactions without compromising ease of operation.
Data Source
AI summary
The present disclosure discloses a split-screen interaction method and apparatus for a mobile terminal, a storage medium, and a device. The method comprises: first, creating a full-screen transparent web view of the mobile terminal as a carrier container, and loading the H5 page in the container; then setting the H5 page as a split-screen page of a first preset split-screen style, and loading a pop-up window split-screen page of a full-screen mask and a second preset split-screen style in the H5 page, thereby realizing communication and interaction between the split-screen page of the first preset split-screen style and the pop-up window split-screen page of the second preset split-screen style by means of communication among page components in the H5 page. Thus, first a full-screen transparent web view rendering container is realized, the H5 page is opened in the container; then a split-screen page of the preset split-screen style, a full-screen mask pop-up window split-screen page, and interaction and communication between the two split-screen pages are realized in the H5 page, so that split-screen efficiency is improved, and interaction form and functionality between the split-screen pages are enriched.