TV terminal Web browsing method and system based on TV remote controller interaction

By dynamically controlling the focus in the TV web browsing, extracting and configuring the interactive elements in the next level to focusable state, the problems of focus jumping and dynamic content loading are solved, and the page loading speed and user experience are improved.

CN119996750APending Publication Date: 2025-05-13SHANGHAI SUOGUANG VISUAL PRODUCTS CO LTD

Patent Information

Application Number
CN202411985766.X
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-12-31
Publication Date
2025-05-13

AI Technical Summary

Technical Problem

In the prior art, in the web browsing of TV side, automatic focus acquisition may cause focus jumps and user interaction interruption, and cannot adapt to dynamic content loading, affecting the page loading speed.

Method used

When the user selects to enter the next level of the element to be parsed, dynamic control of the focus point is achieved by extracting and configuring the interactive elements in the next level as a focusable state and other elements are non-focusable states.

Benefits of technology

It effectively avoids the impact of focus failure and page loading speed, and improves user experience and page loading efficiency.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119996750A_ABST
    Figure CN119996750A_ABST
Patent Text Reader

Abstract

The invention relates to the technical field of webpage browsing, in particular to a TV end Web browsing method and system based on TV remote controller interaction, and the method comprises the steps: setting a navigation element to be in a focusable state; for the to-be-analyzed element, extracting an interaction element in the next level of the to-be-analyzed element, and configuring the interaction element to be in a focusable state; and when the hierarchy switching operation is triggered, taking the interactive hierarchy element pointed by the hierarchy switching operation as a new element to be analyzed. In order to solve the problems that in the prior art, one-time configuration of focus content cannot adapt to dynamic content loading and the page loading speed can be affected, the logic of focus configuration is modified, when a user selects to enter the next level of to-be-analyzed elements, interaction elements of the same level in the next level are extracted and configured to be in a focusable state, and therefore the focus configuration efficiency is improved. And meanwhile, other interactive elements which are not on the level are configured to be in a non-focusing state, the focus is controlled through the method, and meanwhile, the complexity of initializing the elements and the focus is reduced.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of web page browsing, and in particular to a TV-side web browsing method and system based on TV remote control interaction. Background Art

[0002] Android TV is an operating system developed based on the AOSP project and is mainly suitable for smart TVs. It has the same system framework design and API interface as the Android system, allowing developers to follow the same development specifications to create applications or port mobile applications to the TV. Due to its many advantages, many manufacturers will further customize the system, such as providing launcher pages with different styles and functions, adding customized applications, etc., to form a unique smart TV product for the manufacturer.

[0003] On the TV side, since users often use remote controls, there are significant differences in input methods such as touch screens on mobile devices or keyboards and mice on computers. Therefore, for this type of operating system, it is often necessary to configure the focus input method so that users can point to the controls they need to access.

[0004] Among them, TV-side web access is performed using WebView, which automatically acquires focus by default so that users can interact directly in WebView. However, when WebView is loaded or the page changes, automatic focus acquisition may cause some behaviors that do not meet user expectations, such as focus jumping and user interaction interruption.

[0005] To address this type of problem, other control methods are often introduced in the prior art to focus on where the user may expect, thereby improving the user experience.

[0006] For example, Chinese patent CN201710305158.3 discloses a method for controlling the focus of an EPG page on an IPTV platform, including: turning off the default focus processing mode of the browser or making all elements in the page unfocusable, distinguishing all elements that are expected to be focused from those that cannot be focused, such as using only a specific tag, adding a specific class, or setting a specific attribute, etc., and then setting a specific attribute for each element expected to be focused to save the address of the jump page; for each EPG page, all focuses are divided into modules; pre-setting the movement rules between focus modules; initializing the up, down, left, and right focuses of each focus according to the focus movement rules in each module, and clarifying the next focus after the focus moves; and performing relevant focus movement according to the key value of the remote control. The default focus processing of the set-top box is replaced by the focus controller, so that the consistent response to the remote control commands between the set-top boxes of multiple different manufacturers can be achieved.

[0007] However, in the actual implementation process, the inventors found that in this type of technical solution, the page to be accessed is usually initialized and parsed at one time, all elements are extracted and hierarchically divided, and the nested relationship and movement rules of the focus set are configured. In some scenarios, especially in the scenario of h5-like pages, some new elements may be dynamically loaded in the page, for example, new access content is loaded by pulling down, and each access content can jump to the secondary content, etc., which may cause the focus to fail; similarly, in the scenario with more interactive elements of this type, the number of focus positions that need to be parsed and configured is large, which affects the page loading speed. Summary of the invention

[0008] In view of the above problems existing in the prior art, a TV-side Web browsing method based on TV remote control interaction is now provided;

[0009] On the other hand, a TV-side Web browsing system for implementing the TV-side Web browsing method is also provided.

[0010] The specific technical solutions are as follows:

[0011] A TV-side Web browsing method based on TV remote control interaction, comprising:

[0012] Step S1: extracting a navigation element at the top level from the interactive elements of the page to be visited, and setting the navigation element to a focusable state;

[0013] Other elements in the interactive element are configured to be in a non-focusable state;

[0014] Step S2: intercepting the user's input behavior, and when determining the navigation element accessed by the user, determining the navigation element as an element to be parsed;

[0015] Step S3: extracting the interactive element in the next level of the element to be parsed as an interactive level element for the element to be parsed, and configuring the focus state of the interactive level element to be the focusable state;

[0016] Step S4: monitoring the level switching operation of the user to switch the interactive level element, and when the level switching operation is triggered, taking the interactive level element pointed to by the level switching operation as the new element to be parsed, and then returning to step S3;

[0017] In the step S3, the next level of the element to be parsed is determined according to the level switching operation.

[0018] On the other hand, the step S1 comprises:

[0019] Step S11: When the page to be accessed is loaded, insert the JS code into the web page view;

[0020] Step S12: extracting the tree structure of the page to be accessed based on the JS code, and configuring all the interactive elements in the tree structure to be in the non-focusable state;

[0021] Step S13: extracting the navigation element at the top level from the tree structure, and configuring the navigation element to be in the focusable state;

[0022] Step S14: Initializing the focus accessed by the user so that the initial position of the focus is located on the navigation element.

[0023] On the other hand, the step S2 comprises:

[0024] Step S21: acquiring the input behavior generated by the user through the remote control;

[0025] Step S22: determining whether the input behavior triggers a key event;

[0026] If yes, go to step S23;

[0027] If not, return to step S21;

[0028] Step S23: determining whether the key event corresponds to a confirmation key;

[0029] If yes, go to step S24;

[0030] If not, return to step S21;

[0031] Step S24: taking the navigation element pointed to by the current focus as the element to be parsed.

[0032] On the other hand, the step S3 comprises:

[0033] Step S31: obtaining hierarchical information of the element to be parsed;

[0034] Step S32: determining the sub-level tree model container of the current level where the element to be parsed is located and the next level according to the level information;

[0035] Step S33: setting the interactive element in the current level to the non-focusable state, and setting the interactive element in the next level contained in the sub-level tree model container as the interactive level element to the focusable state;

[0036] Step S34: Initialize the focus of the user's access so that the focus is located on the interactive level element.

[0037] On the other hand, the step S4 comprises:

[0038] Step S41: acquiring the input behavior generated by the user through the remote control;

[0039] Step S42: when the input behavior triggers a key event, determining whether the trigger key corresponding to the key event is a confirmation key or a return key;

[0040] Step S43: When the trigger button is a confirmation button, the interactive level element pointed to by the current focus is taken as the element to be parsed, and the child level of the element to be parsed is taken as the next level; and, when the trigger button is a return button, the interactive level element pointed to by the current focus is taken as the element to be parsed, and the parent level of the element to be parsed is taken as the next level.

[0041] A TV-side Web browsing system based on TV remote control interaction, used to implement the above-mentioned TV-side Web browsing method;

[0042] The TV-side Web browsing system comprises:

[0043] A navigation element configuration module, which extracts a navigation element located at the top level from the interactive elements of the page to be visited, and sets the navigation element to a focusable state;

[0044] Other elements in the interactive element are configured to be in a non-focusable state;

[0045] a navigation element determination module, the navigation element determination module being connected to the navigation element configuration module, the navigation element determination module intercepting the user's input behavior, and when determining the navigation element accessed by the user, determining the navigation element as an element to be parsed;

[0046] An element configuration module, the element configuration module is connected to the navigation element determination module, the element configuration module extracts the interactive element in the next level of the element to be parsed as an interactive level element for the element to be parsed, and configures the focus state of the interactive level element to the focusable state;

[0047] An operation monitoring module, the operation monitoring module is connected to the element configuration module, the operation monitoring module monitors the level switching operation of the user switching the interactive level element, and when the level switching operation is triggered, the interactive level element pointed to by the level switching operation is used as the new element to be parsed;

[0048] The operation monitoring module determines the next level of the element to be parsed according to the level switching operation.

[0049] On the other hand, the navigation element configuration module includes:

[0050] A page loading module, wherein when the page to be accessed is loaded, the page loading module inserts JS code into the web page view;

[0051] A structure extraction module, the structure extraction module is connected to the page loading module, the structure extraction module extracts the tree structure of the page to be accessed based on the JS code, and configures all the interactive elements in the tree structure to the non-focusable state;

[0052] A top-level element setting module, the top-level element setting module is connected to the structure extraction module, the top-level element setting module extracts the navigation element at the top level from the tree structure, and configures the navigation element to be in the focusable state;

[0053] A first initialization module, wherein the first initialization module is connected to the top-level element setting module, and the first initialization module initializes the focus accessed by the user so that the initial position of the focus is located on the navigation element.

[0054] On the other hand, the navigation element determination module includes:

[0055] a first behavior acquisition module, which acquires the input behavior generated by the user through the remote control;

[0056] A first judgment module, the first judgment module is connected to the first behavior acquisition module, and the first judgment module judges whether the input behavior triggers a key event;

[0057] A second judgment module, the second judgment module is connected to the first judgment module, and the second judgment module judges whether the key event corresponds to a confirmation key;

[0058] An element pointing module, the element pointing module is connected to the second judgment module, and the element pointing module takes the navigation element pointed to by the current focus as the element to be parsed.

[0059] On the other hand, the element configuration module includes:

[0060] A hierarchical parsing module, wherein the hierarchical parsing module obtains hierarchical information of the element to be parsed;

[0061] A hierarchy determination module, the hierarchy determination module is connected to the hierarchy parsing module, and the hierarchy determination module determines the sub-level tree model containers of the current level and the next level where the element to be parsed is located according to the hierarchy information;

[0062] A hierarchical element setting module, the hierarchical element setting module is connected to the hierarchical determination module, the hierarchical element setting module sets the interactive element in the current hierarchical level to the non-focusable state, and sets the interactive element in the next hierarchical level contained in the sub-level tree model container as the interactive hierarchical element to the focusable state;

[0063] A hierarchical element pointing module, wherein the hierarchical element pointing module is connected to the hierarchical element setting module, and the hierarchical element pointing module initializes the focus of user access so that the focus is located on the interactive hierarchical element.

[0064] On the other hand, the operation monitoring module includes:

[0065] a second behavior acquisition module, which acquires the input behavior generated by the user through the remote control;

[0066] a third judgment module, the third judgment module being connected to the second behavior acquisition module, and the third judgment module judging whether the triggering key corresponding to the key event is a confirmation key or a return key when the input behavior triggers a key event;

[0067] a fourth judgment module, the fourth judgment module being connected to the third judgment module;

[0068] When the trigger button is a confirmation button, the fourth judgment module uses the interactive level element pointed to by the current focus as the element to be parsed, and uses the sub-level of the element to be parsed as the next level;

[0069] When the trigger button is a return button, the fourth determination module uses the interactive level element pointed to by the current focus as the element to be parsed, and uses the parent level of the element to be parsed as the next level.

[0070] The above technical solution has the following advantages or beneficial effects:

[0071] In view of the problem in the prior art that the one-time configuration of the focus content cannot adapt to the dynamic content loading and will affect the page loading speed, in this solution, the logic of the focus configuration is modified. When the user chooses to enter the next level of the element to be parsed, the interactive elements of the same level in the next level are extracted and configured as a focusable state, and other interactive elements not on this level are configured as a non-focusable state. This method realizes the control of the focus and reduces the complexity of initializing the elements and focus. The Android end only needs to call the corresponding JS function at a critical time (such as the Enter key) without excessive coupling inside the page. Similarly, during the dynamic content loading process, this logic can also fix the focus on a specific level. Only when the user returns to the changed level will the newly loaded elements be reinitialized, avoiding the problem of mechanism failure. BRIEF DESCRIPTION OF THE DRAWINGS

[0072] The embodiments of the present invention will be described more fully with reference to the attached drawings, which are provided for illustration and description only and are not intended to limit the scope of the present invention.

[0073] Figure 1 It is an overall schematic diagram of an embodiment of the present invention;

[0074] Figure 2 This is a schematic diagram of step S1 in an embodiment of the present invention;

[0075] Figure 3 This is a schematic diagram of step S2 in an embodiment of the present invention;

[0076] Figure 4 This is a schematic diagram of step S3 in an embodiment of the present invention;

[0077] Figure 5 This is a schematic diagram of step S4 in an embodiment of the present invention;

[0078] Figure 6 A schematic diagram of a system in an embodiment of the present invention;

[0079] Figure 7 A schematic diagram of a navigation element configuration module in an embodiment of the present invention;

[0080] Figure 8 A schematic diagram of a navigation element determination module in an embodiment of the present invention;

[0081] Fig. 9 This is a schematic diagram of an element configuration module in an embodiment of the present invention;

[0082] Fig.10 Schematic diagram of an operation monitoring module in an embodiment of the present invention. DETAILED DESCRIPTION

[0083] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0084] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments may be combined with each other.

[0085] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments, but they are not intended to limit the present invention.

[0086] The present invention comprises:

[0087] A TV-side Web browsing method based on TV remote control interaction, such as Figure 1 As shown, including:

[0088] Step S1: extracting a navigation element at the top level from the interactive elements of the page to be visited, and setting the navigation element to a focusable state;

[0089] Other elements in the interactive element are configured to be non-focusable;

[0090] Step S2: intercepting the user's input behavior, and when determining the navigation element accessed by the user, determining the navigation element as the element to be parsed;

[0091] Step S3: extracting the interactive elements in the next level of the element to be parsed as interactive level elements for the element to be parsed, and configuring the focus state of the interactive level elements to be a focusable state;

[0092] Step S4: monitoring the level switching operation of the user to switch the interactive level element, and when the level switching operation is triggered, taking the interactive level element pointed to by the level switching operation as a new element to be parsed, and then returning to step S3;

[0093] In step S3, the next level of the element to be parsed is determined according to the level switching operation.

[0094] Specifically, in response to the problem in the prior art that the one-time configuration of focus content cannot adapt to dynamic content loading and will affect the page loading speed, in this solution, the logic of focus configuration is modified. When the user chooses to enter the next level of the element to be parsed, the interactive elements at the same level in the next level are extracted and configured as focusable, and other interactive elements not on this level are configured as non-focusable.

[0095] Specifically, when a page to be visited is loaded, the interactive elements of the page to be visited are firstly searched for the top-level navigation element, and then the navigation element is set to a focusable state, while all other elements are in a non-focusable state.

[0096] When the user inputs the "confirm key" command through the remote control, that is, the user wants to access the secondary content of the navigation element, the navigation element is determined as an element to be parsed, and the interactive elements in the next level of the element to be parsed are extracted as interactive level elements, and the focus state of the interactive level elements is configured as a focusable state. At the same time, other elements, such as the navigation elements of the previous level, are set to a non-focusable state.

[0097] Then the user performs access actions, such as moving the direction keys, confirming the change of settings, accessing a new page, etc., and monitoring the level switching operation. When the level switching operation is triggered, the interactive level element pointed to by the level switching operation is used as the new element to be parsed, and then the relevant element state initialization process is performed.

[0098] That is to say, unlike the traditional solution that assigns focus capabilities to all elements at the initial stage, this solution adopts an "inert strategy": before the user goes deep into a certain level, its sub-level elements always remain unfocusable. This innovation reduces the complexity of initialization and avoids the confusion of users accidentally introducing focus to deeper levels when navigating at the top level.

[0099] This method realizes the control of focus and reduces the complexity of initializing elements and focus. The Android end only needs to call the corresponding JS function at key moments (such as the Enter key) without excessive coupling within the page.

[0100] Similarly, the logic of this solution can be easily extended to any depth of hierarchy, not limited to two or three levels of nesting. As long as the level identification and rules are kept consistent in the DOM, this solution can recursively control the hierarchical navigation of any depth. In complex scenarios, the focus control link is still clear, which is particularly valuable for TV applications that need to display complex content structures.

[0101] If the sub-elements in Dangdang pages are added dynamically (such as Ajax loading more data), the lazy activation and batch update strategies of the solution are still effective: just set tabindex=0 for these new elements when the user tries to enter the sub-level, without repeating the tedious initialization steps. This significantly improves development and maintenance efficiency in scenarios with rapid iterations and frequent content updates.

[0102] In one embodiment, Figure 2 As shown, step S1 includes:

[0103] Step S11: When the page to be accessed is loaded, insert the JS code into the web page view;

[0104] Step S12: extracting the tree structure of the page to be visited based on the JS code, and configuring all interactive elements in the tree structure to be in a non-focusable state;

[0105] Step S13: extracting the navigation element at the top level from the tree structure, and configuring the navigation element to be focusable;

[0106] Step S14: Initializing the focus accessed by the user so that the initial position of the focus is located on the navigation element.

[0107] Specifically, in order to determine the navigation element, in this embodiment, after the page to be accessed is loaded, the page is first initialized. Specifically, the TV terminal accesses the page through WebView, and after the page is loaded, the JS logic is injected through evaluateJavascript().

[0108] Based on the JS code, the tree structure (DMO tree) of the page to be visited can be obtained, which includes all interactive elements in the page, such as links, buttons, cards, etc. In this step, all interactive elements in the tree structure can be directly set to a non-focusable state without distinguishing the specific names of the elements.

[0109] Then, the topmost navigation element of the tree structure is configured to be focusable. Accordingly, considering that the specific position of the focus cannot be controlled in the initialization state, after the navigation element is configured, the .focus() method is called to set the focus on any appropriate control in the top-level focusable element. At this time, the user can only move between elements of the same level using the remote control arrow keys, and will not mistakenly enter an unopened sub-level.

[0110] In one embodiment, Figure 3 As shown, step S2 includes:

[0111] Step S21: Acquire the input behavior generated by the user through the remote control;

[0112] Step S22: determining whether the input behavior triggers a key event;

[0113] If yes, go to step S23;

[0114] If not, return to step S21;

[0115] Step S23: determining whether the key event corresponds to a confirmation key;

[0116] If yes, go to step S24;

[0117] If not, return to step S21;

[0118] Step S24: taking the navigation element pointed to by the current focus as the element to be parsed.

[0119] Specifically, in order to determine the navigation element accessed by the user, in this embodiment, a method of intercepting and distinguishing key events is selected.

[0120] Specifically, at the Android layer, setOnKeyListener() or dispatchKeyEvent() can be used to intercept key events input by the user through the remote control, and then the obtained parameters can be judged. When the user presses the Enter key on the currently focused element of the WebView, the Android side determines whether the element has a sub-level that can be explored.

[0121] If there is a sub-level, the navigation element pointed to by the current focus is used as the element to be parsed.

[0122] In one embodiment, Figure 4 As shown, step S3 includes:

[0123] Step S31: Obtaining level information for the element to be parsed;

[0124] Step S32: determining the sub-level tree model containers of the current level and the next level where the element to be parsed is located according to the level information;

[0125] Step S33: setting the interactive elements in the current level to a non-focusable state, and setting the interactive elements in the next level contained in the sub-level tree model container as interactive level elements to a focusable state;

[0126] Step S34: Initialize the focus of the user's access so that the focus is located on the interactive level element.

[0127] Specifically, considering the low parsing efficiency of the solutions that rely on the natural DOM order in the prior art, this solution adopts a solution that explicitly identifies each level (parent level, child level, or even multi-layer nesting) logically (such as through data-level, data-has-children attributes) or maintains a set of hierarchical relationship mappings in JS. When the user presses the confirmation key, the JS logic starts from the level where the current focus element is located, intuitively searches for sub-level container elements inside it, and then sets the tabindex of these elements to 0 in batches. This avoids the manual management of complex indexes and orders, and instead uses a hierarchical structure to guide the focus selection path.

[0128] Specifically, after determining the element to be parsed, the Native side calls a JS function (such as openSubLevelFocus()) through evaluateJavascript(). In the JS function, the child DOM container of the currently focused element is located according to the context of the currently focused element.

[0129] Then, the tabindex of all elements in the current level is changed to -1 (making them no longer focusable), and tabindex="0" is assigned to sub-level elements in batches, thereby adjusting the configuration status of each interactive element in the current level and the next level.

[0130] Finally, the focus of the user's visit is initialized so that the focus is placed back on the interactive level element. In this way, once the user's confirmation key is triggered, it can smoothly "deepen" from the current layer to the next level of focus navigation area.

[0131] Based on the above settings, evaluateJavascript() is called on WebView through the Native layer (Android), and all focus change logic is implemented in JS. The Android side only needs to call the corresponding JS function at key moments (such as the Enter key), without too much coupling inside the page. This "front-end and back-end" separation method improves the maintainability and scalability of the solution.

[0132] In one embodiment, Figure 5 As shown, step S4 includes:

[0133] Step S41: obtaining the input behavior generated by the user through the remote control;

[0134] Step S42: when the input behavior triggers a key event, determining whether the trigger key corresponding to the key event is a confirmation key or a return key;

[0135] Step S43: When the trigger button is the confirmation button, the interactive level element pointed to by the current focus is taken as the element to be parsed, and the child level of the element to be parsed is taken as the next level; and, when the trigger button is the return button, the interactive level element pointed to by the current focus is taken as the element to be parsed, and the parent level of the element to be parsed is taken as the next level.

[0136] Specifically, in order to achieve better recursive processing of elements on each level, in this embodiment, after the above configuration operation is completed, the input behavior generated by the user through the remote control on the switched level continues to be obtained.

[0137] When the user triggers the confirmation key, the key is also intercepted by the Android layer, and then the previous process is used to confirm whether the inter-level element corresponding to the focus has a sub-level. If so, the Native side calls the JS function (such as openSubLevelFocus()) through evaluateJavascript(). In the JS function, the child DOM container of the currently focused element is located according to the context, and then the above processing flow is performed.

[0138] When the user presses the Back key or other exit operations, the key is also intercepted by the Android layer, and the JS function (such as returnToParentLevelFocus()) is called through evaluateJavascript(). This function restores the current level tabindex to -1, and resets the visited elements of the previous level to tabindex="0", and finally .focus() back to the previous level element to achieve upward focus recovery.

[0139] A TV-side Web browsing system based on TV remote control interaction, used to implement the above-mentioned TV-side Web browsing method;

[0140] like Figure 6 As shown, the TV-side Web browsing system includes:

[0141] Navigation element configuration module 1, which extracts the navigation element at the top level from the interactive elements of the page to be visited, and sets the navigation element to a focusable state;

[0142] Other elements in the interactive element are configured to be non-focusable;

[0143] Navigation element determination module 2, which is connected to navigation element configuration module 1, intercepts the user's input behavior, and when determining the navigation element accessed by the user, determines the navigation element as an element to be parsed;

[0144] The element configuration module 3 is connected to the navigation element determination module 2. The element configuration module 3 extracts the interactive elements in the next level of the element to be parsed as interactive level elements, and configures the focus state of the interactive level elements to be focusable.

[0145] The operation monitoring module 4 is connected to the element configuration module 3. The operation monitoring module 4 monitors the level switching operation of the user to switch the interactive level elements. When the level switching operation is triggered, the interactive level element pointed to by the level switching operation is used as a new element to be parsed;

[0146] The operation monitoring module 4 determines the next level of the element to be parsed according to the level switching operation.

[0147] Specifically, in order to address the problem in the prior art that one-time configuration of focus content cannot adapt to dynamic content loading and will affect the page loading speed, in this solution, when a page to be visited is loaded, the navigation element configuration module 1 first searches for the top-level navigation element for the interactive elements of the page to be visited, and then sets the navigation element to a focusable state, while all other elements are in a non-focusable state.

[0148] When the user inputs the "confirm key" command through the remote control, that is, the user wants to access the secondary content of the navigation element, the navigation element determination module 2 determines the navigation element as an element to be parsed, and the element configuration module 3 extracts the interactive elements in the next level of the element to be parsed as interactive level elements, and configures the focus state of the interactive level elements to a focusable state. At the same time, other elements, such as the navigation elements of the previous level, are set to a non-focusable state.

[0149] Then the user performs access actions again, such as moving the direction keys, confirming the change of settings, accessing a new page, etc., and at the same time operates the monitoring module 4 to monitor the level switching operation. When the level switching operation is triggered, the interactive level element pointed to by the level switching operation is used as the new element to be parsed, and then the relevant element state initialization process is performed.

[0150] In one embodiment, Figure 7 As shown, the navigation element configuration module 1 includes:

[0151] The page loading module 11 inserts the JS code into the web page view when the page to be accessed is loaded;

[0152] A structure extraction module 12, the structure extraction module 12 is connected to the page loading module 11, the structure extraction module 11 extracts the tree structure of the page to be visited based on the JS code, and configures all interactive elements in the tree structure to be in a non-focusable state;

[0153] A top-level element setting module 13, the top-level element setting module 13 is connected to the structure extraction module 11, and the top-level element setting module extracts the navigation element at the top level from the tree structure, and configures the navigation element to be focusable;

[0154] The first initialization module 14 is connected to the top-level element setting module 13. The first initialization module 14 initializes the focus accessed by the user so that the initial position of the focus is located on the navigation element.

[0155] Specifically, in order to determine the navigation element, in this embodiment, after loading the page to be accessed, the page loading module 11 first initializes the page. Specifically, the TV terminal accesses the page through WebView, and after the page is loaded, the JS logic is injected through evaluateJavascript().

[0156] Based on the JS code, the structure extraction module 12 can obtain the tree structure (DMO tree) of the page to be accessed, which includes all interactive elements in the page, such as links, buttons, cards, etc. In this step, all interactive elements in the tree structure can be directly set to a non-focusable state without distinguishing the specific names of the elements.

[0157] Then, the top-level element setting module 13 configures the top-level navigation element of the tree structure to be focusable. Accordingly, considering that the specific position of the focus cannot be controlled in the initialization state, after configuring the navigation element, the first initialization module 14 calls the .focus() method to set the focus on any appropriate control in the top-level focusable element. At this time, the user can only move between elements of the same level through the direction keys of the remote control, and will not mistakenly enter an unopened sub-level.

[0158] In one embodiment, Figure 8 As shown, the navigation element determination module 2 includes:

[0159] A first behavior acquisition module 21, the first behavior acquisition module 21 acquires an input behavior generated by the user through the remote control;

[0160] A first judgment module 22, the first judgment module 22 is connected to the first behavior acquisition module 21, and the first judgment module 22 judges whether the input behavior triggers a key event;

[0161] A second judgment module 23, the second judgment module 23 is connected to the first judgment module 22, and the second judgment module 23 judges whether the key event corresponds to the confirmation key;

[0162] The element pointing module 24 is connected to the second judgment module 23, and the element pointing module 24 takes the navigation element pointed to by the current focus as the element to be parsed.

[0163] Specifically, in order to determine the navigation element accessed by the user, in this embodiment, a method of intercepting and distinguishing key events is selected.

[0164] Specifically, the first behavior acquisition module 21 can intercept the key events input by the user through the remote control through setOnKeyListener() or dispatchKeyEvent() at the Android layer, and then the first judgment module 22 and the second judgment module 23 judge the obtained parameters. When the user presses the Enter key on the current focus element of the WebView, the Android side determines whether the element has a sub-level that can be explored.

[0165] If there is a sub-level, the element pointing module 24 takes the navigation element pointed to by the current focus as the element to be parsed.

[0166] In one embodiment, Fig. 9 As shown, the element configuration module 3 includes:

[0167] A hierarchical parsing module 31, the hierarchical parsing module 31 obtains hierarchical information from the element to be parsed;

[0168] A level determination module 32, the level determination module 32 is connected to the level parsing module 31, and the level determination module 32 determines the sub-level tree model containers of the current level and the next level where the element to be parsed is located according to the level information;

[0169] A hierarchical element setting module 33, the hierarchical element setting module 33 is connected to the hierarchical determination module 32, and the hierarchical element setting module 33 sets the interactive elements in the current hierarchical level to a non-focusable state, and sets the interactive elements in the next hierarchical level contained in the sub-level tree model container as interactive hierarchical elements to a focusable state;

[0170] The hierarchical element pointing module 34 is connected to the hierarchical element setting module 33 . The hierarchical element pointing module 34 initializes the focus of the user's access so that the focus is located on the interactive hierarchical element.

[0171] Specifically, considering the low parsing efficiency of the solutions that rely on the natural DOM order in the prior art, this solution adopts a solution that explicitly identifies each level (parent level, child level, or even multi-layer nesting) logically (such as through data-level, data-has-children attributes) or maintains a set of hierarchical relationship mappings in JS. When the user presses the confirmation key, the hierarchical parsing module 31 will start from the level where the current focus element is located, intuitively search for sub-level container elements inside it, and then batch set the tabindex of these elements to 0. This avoids the manual management of complex indexes and sequences, and instead uses a hierarchical structure to guide the focus selection path.

[0172] Specifically, after determining the element to be parsed, the Native end calls a JS function (eg, openSubLevelFocus()) through evaluateJavascript(). The level determination module 32 locates the child DOM container of the currently focused element according to the context of the currently focused element in the JS function.

[0173] Then, the hierarchical element setting module 33 changes the tabindex of all elements in the current hierarchical level to -1 (making them no longer focusable), and assigns tabindex="0" to sub-hierarchical elements in batches, thereby adjusting the configuration status of each interactive element in the current hierarchical level and the next hierarchical level.

[0174] Finally, the hierarchical element pointing module 34 initializes the focus of the user's access so that the focus is relocated on the interactive hierarchical element. In this way, once the user confirms that the key is triggered, the user can smoothly "go deep" from the current layer to the focus navigation area of ​​the next level.

[0175] Based on the above settings, evaluateJavascript() is called on WebView through the Native layer (Android), and all focus change logic is implemented in JS. The Android side only needs to call the corresponding JS function at key moments (such as the Enter key), without too much coupling inside the page. This "front-end and back-end" separation method improves the maintainability and scalability of the solution.

[0176] In one embodiment, Fig.10 As shown, the operation monitoring module 4 includes:

[0177] A second behavior acquisition module 41, the second behavior acquisition module 41 acquires the input behavior generated by the user through the remote control;

[0178] A third judgment module 42, the third judgment module 42 is connected to the second behavior acquisition module 41, and when the input behavior triggers a key event, the third judgment module 42 determines whether the trigger key corresponding to the key event is a confirmation key or a return key;

[0179] A fourth judgment module 43, the fourth judgment module 43 is connected to the third judgment module 42;

[0180] When the trigger button is the confirmation button, the fourth judgment module 43 takes the interactive level element pointed to by the current focus as the element to be parsed, and takes the sub-level of the element to be parsed as the next level;

[0181] When the trigger button is the return button, the fourth determination module 43 takes the interactive level element pointed to by the current focus as the element to be parsed, and takes the parent level of the element to be parsed as the next level.

[0182] Specifically, in order to achieve better recursive processing of elements on each level, in this embodiment, after the above configuration operation is completed, the input behavior generated by the user through the remote control on the switched level continues to be obtained.

[0183] When the user triggers the confirmation key, the key is also intercepted by the Android layer, and then the previous process is used to confirm whether the inter-level element corresponding to the focus has a sub-level. If so, the Native side calls the JS function (such as openSubLevelFocus()) through evaluateJavascript(). In the JS function, the child DOM container of the currently focused element is located according to the context, and then the above processing flow is performed.

[0184] When the user presses the Back key or other exit operations, the key is also intercepted by the Android layer, and the JS function (such as returnToParentLevelFocus()) is called through evaluateJavascript(). This function restores the current level tabindex to -1, and resets the visited elements of the previous level to tabindex="0", and finally .focus() back to the previous level element to achieve upward focus recovery.

[0185] The above are only preferred embodiments of the present invention, and are not intended to limit the implementation methods and protection scope of the present invention. Those skilled in the art should be aware that all solutions obtained by equivalent substitutions and obvious changes made using the description and illustrations of the present invention should be included in the protection scope of the present invention.

Claims

1. A TV-side Web browsing method based on TV remote control interaction, characterized in that: include: Step S1: extracting a navigation element at the top level from the interactive elements of the page to be visited, and setting the navigation element to a focusable state; Other elements in the interactive element are configured to be in a non-focusable state; Step S2: intercepting the user's input behavior, and when determining the navigation element accessed by the user, determining the navigation element as an element to be parsed; Step S3: extracting the interactive element in the next level of the element to be parsed as an interactive level element for the element to be parsed, and configuring the focus state of the interactive level element to be the focusable state; In the step S3, the interactive elements other than the interactive level elements are also set to the non-focusable state; Step S4: monitoring the level switching operation of the user to switch the interactive level element, and when the level switching operation is triggered, taking the interactive level element pointed to by the level switching operation as the new element to be parsed, and then returning to step S3; In the step S3, the next level of the element to be parsed is determined according to the level switching operation.

2. The TV-side Web browsing method according to claim 1, characterized in that: The step S1 comprises: Step S11: When the page to be accessed is loaded, insert the JS code into the web page view; Step S12: extracting the tree structure of the page to be accessed based on the JS code, and configuring all the interactive elements in the tree structure to be in the non-focusable state; Step S13: extracting the navigation element at the top level from the tree structure, and configuring the navigation element to be in the focusable state; Step S14: Initializing the focus accessed by the user so that the initial position of the focus is located on the navigation element.

3. The TV-side Web browsing method according to claim 1, characterized in that: The step S2 comprises: Step S21: acquiring the input behavior generated by the user through the remote control; Step S22: determining whether the input behavior triggers a key event; If yes, go to step S23; If not, return to step S21; Step S23: determining whether the key event corresponds to a confirmation key; If yes, go to step S24; If not, return to step S21; Step S24: taking the navigation element pointed to by the current focus as the element to be parsed.

4. The TV-side Web browsing method according to claim 1, characterized in that: The step S3 comprises: Step S31: obtaining hierarchical information of the element to be parsed; Step S32: determining the sub-level tree model container of the current level where the element to be parsed is located and the next level according to the level information; Step S33: setting the interactive element in the current level to the non-focusable state, and setting the interactive element in the next level contained in the sub-level tree model container as the interactive level element to the focusable state; Step S34: Initialize the focus of the user's access so that the focus is located on the interactive level element.

5. The TV-side Web browsing method according to claim 1, characterized in that: The step S4 comprises: Step S41: acquiring the input behavior generated by the user through the remote control; Step S42: when the input behavior triggers a key event, determining whether the trigger key corresponding to the key event is a confirmation key or a return key; Step S43: When the trigger button is a confirmation button, the interactive level element pointed to by the current focus is taken as the element to be parsed, and the child level of the element to be parsed is taken as the next level; and, when the trigger button is a return button, the interactive level element pointed to by the current focus is taken as the element to be parsed, and the parent level of the element to be parsed is taken as the next level.

6. A TV-side Web browsing system based on TV remote control interaction, characterized in that: Used to implement the TV-side Web browsing method as described in any one of claims 1 to 5; The TV-side Web browsing system comprises: A navigation element configuration module, which extracts a navigation element located at the top level from the interactive elements of the page to be visited, and sets the navigation element to a focusable state; Other elements in the interactive element are configured to be in a non-focusable state; a navigation element determination module, the navigation element determination module being connected to the navigation element configuration module, the navigation element determination module intercepting the user's input behavior, and when determining the navigation element accessed by the user, determining the navigation element as an element to be parsed; An element configuration module, the element configuration module is connected to the navigation element determination module, the element configuration module extracts the interactive element in the next level of the element to be parsed as an interactive level element for the element to be parsed, and configures the focus state of the interactive level element to the focusable state; An operation monitoring module, the operation monitoring module is connected to the element configuration module, the operation monitoring module monitors the level switching operation of the user switching the interactive level element, and when the level switching operation is triggered, the interactive level element pointed to by the level switching operation is used as the new element to be parsed; The operation monitoring module determines the next level of the element to be parsed according to the level switching operation.

7. The TV-side Web browsing system according to claim 6, characterized in that: The navigation element configuration module includes: A page loading module, wherein when the page to be accessed is loaded, the page loading module inserts JS code into the web page view; A structure extraction module, the structure extraction module is connected to the page loading module, the structure extraction module extracts the tree structure of the page to be accessed based on the JS code, and configures all the interactive elements in the tree structure to the non-focusable state; A top-level element setting module, the top-level element setting module is connected to the structure extraction module, the top-level element setting module extracts the navigation element at the top level from the tree structure, and configures the navigation element to be in the focusable state; A first initialization module, wherein the first initialization module is connected to the top-level element setting module, and the first initialization module initializes the focus accessed by the user so that the initial position of the focus is located on the navigation element.

8. The TV-side Web browsing system according to claim 6, characterized in that: The navigation element determination module includes: a first behavior acquisition module, which acquires the input behavior generated by the user through the remote control; A first judgment module, the first judgment module is connected to the first behavior acquisition module, and the first judgment module judges whether the input behavior triggers a key event; A second judgment module, the second judgment module is connected to the first judgment module, and the second judgment module judges whether the key event corresponds to a confirmation key; An element pointing module, the element pointing module is connected to the second judgment module, and the element pointing module takes the navigation element pointed to by the current focus as the element to be parsed.

9. The TV-side Web browsing system according to claim 6, characterized in that: The element configuration module includes: A hierarchical parsing module, wherein the hierarchical parsing module obtains hierarchical information of the element to be parsed; A hierarchy determination module, the hierarchy determination module is connected to the hierarchy parsing module, and the hierarchy determination module determines the sub-level tree model containers of the current level and the next level where the element to be parsed is located according to the hierarchy information; A hierarchical element setting module, the hierarchical element setting module is connected to the hierarchical determination module, the hierarchical element setting module sets the interactive element in the current hierarchical level to the non-focusable state, and sets the interactive element in the next hierarchical level contained in the sub-level tree model container as the interactive hierarchical element to the focusable state; A hierarchical element pointing module, wherein the hierarchical element pointing module is connected to the hierarchical element setting module, and the hierarchical element pointing module initializes the focus of user access so that the focus is located on the interactive hierarchical element.

10. The TV-side Web browsing system according to claim 6, characterized in that: The operation monitoring module includes: a second behavior acquisition module, which acquires the input behavior generated by the user through the remote control; a third judgment module, the third judgment module being connected to the second behavior acquisition module, and the third judgment module judging whether the triggering key corresponding to the key event is a confirmation key or a return key when the input behavior triggers a key event; a fourth judgment module, the fourth judgment module being connected to the third judgment module; When the trigger button is a confirmation button, the fourth judgment module uses the interactive level element pointed to by the current focus as the element to be parsed, and uses the sub-level of the element to be parsed as the next level; When the trigger button is a return button, the fourth determination module uses the interactive level element pointed to by the current focus as the element to be parsed, and uses the parent level of the element to be parsed as the next level.

Citation Information

Patent Citations

  • EPG page focus control method applied to IPTV platform

    CN107071583A

Cited By

  • Television applet focusing control method

    CN120434446A