Webpage processing method and device, electronic equipment and computer readable storage medium

Abstract

The embodiment of the invention discloses a webpage processing method and device, electronic equipment and a computer readable storage medium, and belongs to the technical field of computers. The method comprises the following steps: acquiring a first webpage file of an original webpage; analyzing the first webpage file to obtain attribute information of a plurality of webpage elements in the original webpage; based on the attribute information, performing layout optimization on the plurality of webpage elements to obtain a second webpage file; and displaying the target webpage based on the second webpage file. Thus, the attribute information of the multiple webpage elements in the original webpage is obtained through analysis, targeted layout optimization can be conducted on all the webpage elements according to the attribute information, then readability and operability of the target webpage are remarkably improved, focus movement of the remote controller is smoother and more convenient, and the barrier-free use experience of a user is effectively improved.

Description

Web page processing methods, apparatus, electronic devices, and computer-readable storage media Technical Field

[0001] This application relates to the field of computer technology, specifically to a web page processing method, apparatus, electronic device, and computer-readable storage medium. Background Technology

[0002] With the increasing popularity of smart TVs, web browsing is becoming more and more common on TVs. To ensure that visually impaired and people with mobility impairments can smoothly browse and use the web on their TVs, some smart TVs are equipped with an accessibility mode.

[0003] However, the current accessibility mode only supports simple functions such as font magnification or voice reading. When faced with complex web pages, the complex web page structure makes it difficult for users to quickly and effectively locate the web page elements they need using the arrow keys, resulting in a poor user accessibility experience. Summary of the Invention

[0004] This application provides a web page processing method, apparatus, electronic device, and computer-readable storage medium. By optimizing the layout of the original web page, the readability and operability of the web page can be significantly improved, thereby making the focus movement of the remote control smoother and effectively improving the user experience for people with disabilities.

[0005] In a first aspect, embodiments of this application provide a webpage processing method, comprising: obtaining a first webpage file of an original webpage; parsing the first webpage file to obtain attribute information of multiple webpage elements in the original webpage; optimizing the layout of the multiple webpage elements based on the attribute information to obtain a second webpage file; and displaying a target webpage based on the second webpage file.

[0006] In one embodiment, the step of optimizing the layout of multiple web page elements based on the attribute information to obtain a second web page file includes: determining the element type of the multiple web page elements based on the attribute information; and optimizing the layout of the multiple web page elements based on the element type to obtain a second web page file.

[0007] In one embodiment, the element type includes a non-critical element type, a critical element type, and / or a simplifiable element type; the step of optimizing the layout of multiple web page elements based on the element type to obtain a second web page file includes: determining any one of the multiple web page elements as a target web page element; deleting the target web page element when its element type is the non-critical element type; performing layout processing on the target web page element according to a preset layout rule when its element type is the critical element type to obtain a first optimized element; simplifying the target web page element when its element type is the simplifiable element type to obtain a second optimized element; and obtaining the second web page file based on the first optimized element and / or the second optimized element.

[0008] In one embodiment, the key element type includes a non-structured element subtype, a structured element subtype, and / or a navigation element subtype; the step of processing the target webpage elements according to a preset layout rule to obtain a first optimized element includes: when the element type of the target webpage element is the non-structured element subtype, arranging the target webpage element according to a first arrangement to obtain a third optimized element; when the element type of the target webpage element is the structured element subtype, arranging the target webpage element according to a second arrangement while preserving the structural relationship of the target webpage element to obtain a fourth optimized element; when the element type of the target webpage element is the navigation element subtype, arranging the target webpage element to the target display position to obtain a fifth optimized element; and determining the third optimized element, the fourth optimized element, or the fifth optimized element as the first optimized element.

[0009] In one embodiment, the simplifiable element type includes a playback window element subtype, a chart element subtype, and / or an advertisement element subtype; the simplification process of the target webpage element to obtain the second optimized element includes: when the element type of the target webpage element is the playback window element subtype, extracting the playback icon information and first introductory text information corresponding to the target webpage element, and converting the target webpage element into a graphic-text combination element based on the playback icon information and the first introductory text information; when the element type of the target webpage element is the chart element subtype, extracting the second introductory text information corresponding to the target webpage element, and converting the target webpage element into a first text element based on the second introductory text information; when the element type of the target webpage element is the advertisement element subtype, extracting the third introductory text information corresponding to the target webpage element, and converting the target webpage element into a second text element based on the third introductory text information; and determining the graphic-text combination element, the first text element, or the second text element as the second optimized element.

[0010] In one embodiment, displaying the target webpage based on the second webpage file includes: adding preset accessibility assistance code to the second webpage file to obtain a third webpage file; and displaying the target webpage based on the third webpage file.

[0011] In one embodiment, obtaining the first webpage file of the original webpage includes: listening to the document object model of the original webpage while loading the original webpage, and obtaining a listening result; the listening result is used to characterize whether the original webpage has been loaded; and when the listening result indicates that the original webpage has been loaded, obtaining the first webpage file of the original webpage.

[0012] Secondly, embodiments of this application provide a webpage processing apparatus, the apparatus comprising: a file acquisition module for acquiring a first webpage file of an original webpage; a file parsing module for parsing the first webpage file to obtain attribute information of multiple webpage elements in the original webpage; a layout optimization module for optimizing the layout of the multiple webpage elements based on the attribute information to obtain a second webpage file; and a webpage display module for displaying a target webpage based on the second webpage file.

[0013] In one embodiment, the layout optimization module includes: an element type determination submodule, used to determine the element type of a plurality of web page elements based on the attribute information; and a layout optimization submodule, used to optimize the layout of the plurality of web page elements based on the element type to obtain a second web page file.

[0014] In one embodiment, the element type includes a non-critical element type, a critical element type, and / or a simplifiable element type; the layout optimization submodule includes: a target webpage element determination unit, configured to determine any one of the plurality of webpage elements as a target webpage element; an element deletion unit, configured to delete the target webpage element when the element type of the target webpage element is the non-critical element type; an element layout unit, configured to perform layout processing on the target webpage element according to a preset layout rule when the element type of the target webpage element is the critical element type, to obtain a first optimized element; an element simplification unit, configured to simplify the target webpage element when the element type of the target webpage element is the simplifiable element type, to obtain a second optimized element; and a webpage file determination unit, configured to obtain the second webpage file based on the first optimized element and / or the second optimized element.

[0015] In one embodiment, the key element type includes a non-structured element subtype, a structured element subtype, and / or a navigation element subtype; the element layout unit includes: a first layout subunit, configured to lay out the target webpage element according to a first arrangement when the element type of the target webpage element is the non-structured element subtype, to obtain a third optimized element; a second layout subunit, configured to lay out the target webpage element according to a second arrangement when the element type of the target webpage element is the structured element subtype, while retaining the structural relationship of the target webpage element, to obtain a fourth optimized element; a third layout subunit, configured to lay out the target webpage element to a target display position when the element type of the target webpage element is the navigation element subtype, to obtain a fifth optimized element; and a first element determination subunit, configured to determine the third optimized element, the fourth optimized element, or the fifth optimized element as the first optimized element.

[0016] In one embodiment, the simplifiable element type includes a playback window element subtype, a chart element subtype, and / or an advertisement element subtype; the element simplification unit includes: a first element simplification subunit, configured to extract playback icon information and first introductory text information corresponding to the target webpage element when the element type of the target webpage element is the playback window element subtype, and convert the target webpage element into a graphic-text combination element based on the playback icon information and the first introductory text information; a second element simplification subunit, configured to extract second introductory text information corresponding to the target webpage element when the element type of the target webpage element is the chart element subtype, and convert the target webpage element into a first text element based on the second introductory text information; a third element simplification subunit, configured to extract third introductory text information corresponding to the target webpage element when the element type of the target webpage element is the advertisement element subtype, and convert the target webpage element into a second text element based on the third introductory text information; and a second element determination subunit, configured to determine the graphic-text combination element, the first text element, or the second text element as the second optimized element.

[0017] In one embodiment, the webpage display module includes: a code adding submodule, used to add preset accessibility assistance code to the second webpage file to obtain a third webpage file; and a webpage display submodule, used to display a target webpage based on the third webpage file.

[0018] In one embodiment, the file acquisition module includes: a webpage monitoring submodule, used to monitor the document object model of the original webpage when the original webpage is loaded, and obtain a monitoring result; the monitoring result is used to indicate whether the original webpage has been loaded; and a file acquisition submodule, used to acquire the first webpage file of the original webpage when the monitoring result indicates that the original webpage has been loaded.

[0019] Thirdly, embodiments of this application also provide an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, it implements the steps in the web page processing method described above.

[0020] Fourthly, embodiments of this application also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps in the above-described web page processing method.

[0021] Fifthly, embodiments of this application also provide a computer program product or computer program, which includes 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 methods provided in the various optional implementations described in the embodiments of this application.

[0022] In summary, in this embodiment, a first webpage file of the original webpage is first obtained and parsed to obtain attribute information of multiple webpage elements in the original webpage. Then, based on the attribute information, the layout of the multiple webpage elements is optimized to obtain a second webpage file. Finally, the target webpage is displayed based on the second webpage file. Thus, by parsing the attribute information of multiple webpage elements in the original webpage, targeted layout optimization can be performed on each webpage element according to the attribute information, thereby significantly improving the readability and operability of the target webpage, making remote control focus movement smoother and more convenient, and effectively improving the user's accessibility experience. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0024] Figure 1 is a flowchart illustrating a webpage processing method according to an embodiment of this application; Figure 2 is a schematic diagram illustrating a specific embodiment of a webpage processing method according to an embodiment of this application; Figure 3 is a schematic diagram illustrating another specific embodiment of a webpage processing method according to an embodiment of this application; Figure 4 is a structural schematic diagram illustrating a webpage processing device according to an embodiment of this application; Figure 5 is a structural schematic diagram illustrating an electronic device according to an embodiment of this application. Detailed Implementation

[0025] The technical solutions of this application will now be clearly and completely described with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of the present invention, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0026] It should be noted that the rapid development of smart TVs and various OTT (Over-The-Top) devices has greatly expanded the application of web browsers in the home large-screen scenario. At the same time, the popularization of the concept of information accessibility has made the need to ensure equal access to web content for visually impaired, hearing impaired, and mobility-impaired people particularly urgent.

[0027] Currently, most web page front-end design and development standards are optimized for PC mouse operations and mobile device touchscreen interaction modes. When these web pages run on a TV, their interaction logic is significantly mismatched with remote control button operations (such as up, down, left, right, and confirm). Specifically, existing technologies have the following main shortcomings: First, at the layout level, complex web page structures lead to chaotic focus traversal paths, with some key elements even failing to gain focus, making it difficult for users to navigate effectively using the arrow keys. Second, at the content presentation level, web pages are not optimized for long-distance viewing on TVs, with issues such as excessively small text and insufficient contrast reducing readability. Third, although some web pages or browser plugins offer font scaling, color inversion, or text-to-speech functions, these improvements are generally ineffective, failing to deeply analyze and reconstruct the web page at the structural level, resulting in a poor user experience.

[0028] Therefore, there is an urgent need for a method that can automatically perform systematic parsing, content extraction, and layout reconstruction of web pages to achieve seamless adaptation of web pages on TV.

[0029] To address the current issue of poor accessibility adaptation of web pages on TV devices, this application aims to provide a web page processing method. First, a first web page file of the original web page is obtained and parsed to extract attribute information of multiple web page elements. Then, based on this attribute information, the layout of these elements is optimized to obtain a second web page file. Finally, the target web page is displayed based on this second web page file. In this way, by parsing the attribute information of multiple web page elements in the original web page, targeted layout optimization can be performed on each element, significantly improving the readability and operability of the target web page. This makes remote control focus movement smoother and more convenient, effectively improving the user's accessibility experience.

[0030] The following sections provide detailed descriptions of each example. It should be noted that the order in which the embodiments are described is not intended to limit the priority of the embodiments.

[0031] Figure 1 schematically illustrates a flowchart of a webpage processing method according to an embodiment of this application. The entity executing this webpage processing method can be a webpage processing device, which can be integrated into any electronic device with data processing, network communication, and program execution functions. This electronic device can be a server or a terminal, etc.

[0032] The server can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, network acceleration services (Content Delivery Network, CDN), as well as big data and artificial intelligence platforms.

[0033] The terminal can be a display terminal with web page display capabilities, such as a smart TV, smartphone, tablet computer, laptop computer, desktop computer, etc., but is not limited to these. The terminal and the server can be connected directly or indirectly through wired or wireless communication, which is not limited herein.

[0034] Furthermore, in the embodiments of this application, "multiple" refers to two or more. The terms "first" and "second," etc., in the embodiments of this application are used for distinguishing descriptions and should not be construed as implying relative importance.

[0035] The following sections provide detailed descriptions of each example. It should be noted that the order in which the embodiments are described is not intended to limit the preferred order of the embodiments.

[0036] In this embodiment, the description will be from the perspective of a web page processing device, which can be integrated into a server or terminal. To facilitate the explanation of the web page processing method of this application, the following will describe the web page processing device integrated into a smart TV in detail, that is, the smart TV will be used as the execution subject for detailed explanation.

[0037] Referring to FIG1, a webpage processing method of the present application is shown. The method may include steps S101 to S104, specifically as follows: S101: Obtain the first webpage file of the original webpage.

[0038] In this embodiment, the original webpage refers to a webpage that has not undergone accessibility optimization, and the first webpage file refers to the original webpage file corresponding to the original webpage. This first webpage file can be an HTML (HyperText Markup Language) resource file. HTML is a standard markup language used to create webpages, which uses tags (such as ``, `<body>`, `<script ... 、 (etc.) describes the structure and content of a webpage, including webpage elements such as text, images, links, tables, and forms.

[0039] In this embodiment, the smart TV can extract the first webpage file of the original webpage from the webpage resources it loads after the browser or WebView component initiates a webpage request for the original webpage.

[0040] In this embodiment, pre-defined JavaScript code can be injected into the browser's script file. After the original webpage is loaded, the first webpage file of the original webpage can be obtained through the JavaScript code. It should be noted that JavaScript is a lightweight, interpreted, or just-in-time (JIT) compiled programming language, primarily used to add interactivity and dynamic functionality to webpages. It can be directly embedded into HTML documents or included as a standalone file. JavaScript can manipulate webpage elements, handle user events (such as clicks and mouse movements), communicate asynchronously with servers, and implement various complex logics and algorithms.

[0041] In this embodiment, after loading the original webpage, the first webpage file of the original webpage can also be obtained through the API (Application Programming Interface) provided by the browser.

[0042] S102: Parse the first webpage file to obtain the attribute information of multiple webpage elements in the original webpage.

[0043] In this embodiment, the step of parsing the first webpage file to obtain the attribute information of multiple webpage elements in the original webpage may specifically include: determining a target parsing tool in a preset parsing library, and parsing the first webpage file based on the parsing tool to obtain the attribute information of multiple webpage elements in the original webpage.

[0044] In this embodiment, the parsing library includes multiple parsing tools for different environments. For example, the parsing library may include Jsoup for Java and BeautifulSoup for Python. This allows the appropriate parsing tool to be automatically matched to parse the first webpage file based on the original webpage's compilation language.

[0045] In this embodiment, the parsing tool can parse the first webpage file into a DOM (Document Object Model) tree. The DOM tree represents the HTML document as a hierarchical structure tree composed of nodes, with each node corresponding to a webpage element. Therefore, by traversing the DOM, the parsing tool can accurately and comprehensively extract the attribute information of each webpage element. The DOM is a tree structure model used to represent HTML or XML documents. It treats each element, attribute, and text in the document as an object, and these objects are organized according to the document's hierarchical structure to form a tree structure. Developers can access and manipulate this tree structure programmatically, thereby dynamically modifying the document's content, structure, and style.

[0046] It should be noted that the attribute information of a webpage element is metadata used to describe the characteristics and behavior of the webpage element. This attribute information includes, but is not limited to, element category, style information, content information, and structural relationships. Element categories include text, images, links, tables, forms, buttons, and containers, etc.; style information includes display status, position, size, color, font, etc.; content information represents the text content contained in the webpage element; and structural relationships represent the hierarchical position of the webpage element in the DOM tree, its parent element, child elements, etc.

[0047] In this embodiment, by performing deep analysis on the first webpage text, unstructured HTML text can be transformed into structured data, thereby providing comprehensive and accurate data support for subsequent layout optimization. This enables the smart TV to understand the functional role and visual effect of each webpage element in the webpage, and thus perform targeted layout optimization.

[0048] S103: Based on attribute information, optimize the layout of multiple web page elements to obtain a second web page file.

[0049] In this embodiment, based on the parsed attribute information of each web page element, the layout of each web page element can be optimized in a targeted manner, thereby realizing the reconstruction of the layout and content of the entire web page.

[0050] In this embodiment, the smart TV can analyze the importance, interactivity, and layout characteristics of each web page element based on attribute information. Then, based on the characteristic information of any web page element, it determines the optimization strategy for that web page element, optimizes the web page element based on the optimization strategy, and finally integrates the optimized web page elements to obtain the second web page file.

[0051] In this embodiment, the optimization strategy may specifically include a deletion strategy, a layout adjustment strategy, and a content simplification strategy. The deletion strategy is used to delete web page elements, the layout adjustment strategy is used to adjust the layout of web page elements, and the content simplification strategy is used to simplify the content or form of web page elements.

[0052] In this embodiment, by optimizing the layout of web page elements, redundant elements can be effectively removed and complex elements can be simplified. At the same time, important web page elements are more focused and reasonable in layout. This not only makes the web page load faster and reduces visual interference, but also greatly improves the logic and efficiency of focus movement. For example, a cluttered layout can be optimized into a linear or grid layout to greatly reduce the user's focus operation and thus improve the ease of operation.

[0053] S104: Display the target webpage based on the second webpage file.

[0054] In this embodiment, after obtaining the second webpage file, a browser component can be used to load and render the second webpage file to generate the target webpage, which is then displayed on the smart TV's display interface. This target webpage is the webpage optimized for accessibility from the original webpage.

[0055] In this embodiment, by parsing the attribute information of multiple web page elements in the original web page, the layout of each web page element can be optimized in a targeted manner based on the attribute information, thereby significantly improving the readability and operability of the target web page, making the remote control focus movement smoother and more convenient, and effectively improving the user's accessibility experience.

[0056] In a feasible implementation, referring to Figure 2, the step of optimizing the layout of multiple web page elements based on attribute information to obtain a second web page file may specifically include steps S201~S202, as follows: S201: Determine the element type of multiple web page elements based on attribute information.

[0057] In this embodiment, after parsing and obtaining the attribute information of multiple web page elements, the multiple web page elements can be classified according to the attribute information to obtain the element type of the multiple web page elements.

[0058] It should be noted that element type does not refer to the original HTML tag type (such as...). 、 Instead, it is a functional category inferred from its attribute information within the context of layout optimization.

[0059] In this embodiment, any attribute information can be mapped to a corresponding element type based on a preset rule. This preset rule represents the mapping relationship between attribute information and element type.

[0060] In this embodiment, any attribute information can be input into the processing model to obtain the element type output by the processing model. The processing model can be trained using sample attribute information, which carries element type label information.

[0061] S202: Based on element type, optimize the layout of multiple web page elements to obtain a second web page file.

[0062] In this embodiment, the smart TV stores an optimization strategy library, which includes optimization strategies corresponding to multiple element types. After determining the element type of any webpage element, the optimization strategy corresponding to that element type can be matched in the optimization strategy library. Then, the layout of the webpage element is optimized according to the optimization strategy to obtain the optimized webpage element. Finally, the various optimized webpage elements are integrated to obtain the second webpage file.

[0063] In this embodiment, by identifying the element type of each webpage element based on attribute information, the most suitable optimization strategy can be matched for each webpage element, thereby achieving targeted optimization of each webpage element and improving the overall effect of layout optimization.

[0064] In a feasible implementation, the element type may specifically include non-critical element type, critical element type, and / or simplified element type. Referring to Figure 3, the step of optimizing the layout of multiple web page elements based on element type to obtain a second web page file may specifically include steps S301 to S305, as follows: S301: Determine any one of the multiple web page elements as the target web page element.

[0065] In this embodiment, after determining the element type of each webpage element, the smart TV can perform targeted layout optimization on each webpage element in turn based on the element type.

[0066] S302: When the element type of the target webpage element is a non-critical element type, delete the target webpage element.

[0067] In this implementation, the non-critical element type is used to characterize web page elements that do not substantially contribute to the core content and main functions of the web page. Specifically, web page elements belonging to the non-critical element type are typically those that are not essential for understanding, navigating, or operating the web page content. These elements may hinder user experience, increase cognitive load, or reduce performance. For example, useless web page elements include, but are not limited to: decorative elements, i.e., purely visual decorative images, icons, or background images that cannot gain focus or clicks and do not carry substantial information; redundant style elements, i.e., unnecessary complex CSS (Cascading Style Sheets) that are used only for visual enhancement rather than functional implementation; and background elements, i.e., images or graphics that exist as a background and cannot be focused on or interacted with by the user.

[0068] In this implementation, for non-critical element types of web page elements, a deletion strategy will be executed, that is, the target web page element node and all its child nodes will be physically removed from the Document Object Model (DOM), so that the browser no longer needs to lay out and draw these useless web page elements.

[0069] S303: When the element type of the target webpage element is a critical element type, the target webpage element is laid out according to the preset layout rules to obtain the first optimized element.

[0070] In this embodiment, the key element type is used to characterize key web page elements that contain key information and / or main interactive functions. Specifically, the key web page element refers to a web page element that needs to be optimized for focus movement, visible area arrangement, or interactive operation through layout restructuring.

[0071] In this embodiment, by performing layout processing on target web page elements of key element types, the layout attributes of the target web page elements can be reconstructed while preserving their original content and interactive functions, so as to adapt them to TV display and remote control interaction.

[0072] In this embodiment, the key element type may specifically include unstructured element subtypes, structured element subtypes, and / or navigation element subtypes. The step of processing the target webpage elements according to preset layout rules to obtain the first optimized element may specifically include: when the target webpage element's element type is an unstructured element subtype, laying out the target webpage element according to a first arrangement to obtain a third optimized element; when the target webpage element's element type is a structured element subtype, laying out the target webpage element according to a second arrangement while preserving the structural relationships of the target webpage element to obtain a fourth optimized element; when the target webpage element's element type is a navigation element subtype, laying out the target webpage element at the target display position to obtain a fifth optimized element; and determining the third, fourth, or fifth optimized element as the first optimized element.

[0073] It should be noted that unstructured element subtypes refer to web page elements that are relatively independent in layout and have no strong relationship with each other. Web page elements belonging to the unstructured element subtype include, but are not limited to, scattered navigation links, independent action buttons, and single input boxes in forms. The attribute information of unstructured element subtype web page elements is usually represented by them being at the same level in the DOM tree but being separate from each other, without a common parent container used to define the layout.

[0074] In this embodiment, web page elements of unstructured element subtypes can be rearranged according to a first arrangement method. This first arrangement method can be a vertical arrangement, a horizontal arrangement, or a grid arrangement. For example, all web page elements of unstructured element subtypes can be rearranged into a vertically arranged linear list.

[0075] It's important to note that structural element subtypes refer to web page elements that contain multiple child elements, and these child elements have a clear and maintainable visual or logical structural relationship. Web page elements belonging to the structural element subtype include, but are not limited to, product card grids (each card contains an image, title, and price), image galleries, data tables, and comment lists (each comment contains an avatar, username, and content). Their attribute information typically indicates that they are themselves a container element containing multiple structurally similar child elements, and they often use CSS layout properties such as `display: grid` and `display: flex`.

[0076] In this embodiment, web page elements of structural element subtypes can be rearranged according to a second arrangement method while preserving the structural relationship of the target web page elements. The second arrangement method can be a vertical arrangement, a horizontal arrangement, or a grid arrangement. For example, all web page elements of structural element subtypes can be rearranged as a whole into a vertically arranged linear list, but the layout of the sub-elements within each web page element remains unchanged; that is, they can be displayed according to their original structural relationship through clicks or other operations. Alternatively, for web page elements with a linear or grid list structure, alignment and proportion can be maintained after adjustment.

[0077] It should be noted that the navigation element subtype refers to web page elements that serve a global or regional navigation function or have a high interaction priority in the web page information architecture. Web page elements belonging to the navigation element subtype include, but are not limited to, the website's main navigation menu bar (usually located in the page header, containing entries such as "Home", "Videos", "Categories", etc.), page titles, search boxes, back-to-top buttons, etc.

[0078] In this implementation, web page elements of the navigation element subtype can be positioned in a target display location that is easy to view and operate. This target display location can be the center of the visible area of ​​the display screen or the starting position of the focus movement sequence. Smart TVs can ensure that the element is presented first and receives focus by modifying the CSS positioning properties of the web page element (such as setting it to absolute positioning and calculating the top and left values ​​to center it), or by adjusting the DOM order to place it at the front of the page.

[0079] In this embodiment, the third, fourth, or fifth optimized element after the above layout adjustment will be integrated into the second web page file as the first optimized element.

[0080] In this embodiment, on the one hand, by applying a first arrangement method to the target webpage elements of the structural element subtype, the originally chaotic and unclear independent elements can be rearranged into a clear and concise focus movement list. For example, users can simply press the "up / down" or "left / right" buttons on the remote control to sequentially traverse all webpage elements, greatly simplifying the focus operation. On the other hand, by applying a second arrangement method to the target webpage elements of the structural element subtype and preserving the structural relationship of the target webpage elements, the logic and visual orderliness of the original content can be maintained while optimizing the overall layout, avoiding the loss of information density caused by oversimplification. Furthermore, by placing the target webpage elements of the navigation element subtype in the target display position, the main navigation and core function entrances can be placed in a prominent position, allowing users to immediately discover and begin interaction after the page loads, significantly reducing the operation steps and time required to find core functions, especially providing great convenience for visually impaired users to obtain key information through screen readers.

[0081] S304: When the element type of the target webpage element is a simplifiable element type, the target webpage element is simplified to obtain the second optimized element.

[0082] In this embodiment, the simplified element type is used to characterize complex web page elements that have complex interactive logic or multimedia presentation methods. Specifically, such complex web page elements typically refer to elements with complex functions, that depend on a specific operating environment or script, and that may cause operational difficulties.

[0083] In this embodiment, by simplifying the target webpage elements of the simplified element type, the original core functions of the target webpage elements can be retained while reducing the difficulty of operation or recognition of the target webpage elements.

[0084] In this embodiment, the simplified element types include playback window element subtype, chart element subtype, and / or advertisement element subtype. The step of simplifying the target webpage element to obtain the second optimized element specifically includes: when the element type of the target webpage element is a playback window element subtype, extracting the playback icon information and first introductory text information corresponding to the target webpage element, and converting the target webpage element into a combined image and text element based on the playback icon information and the first introductory text information; when the element type of the target webpage element is a chart element subtype, extracting the second introductory text information corresponding to the target webpage element, and converting the target webpage element into a first text element based on the second introductory text information; when the element type of the target webpage element is an advertisement element subtype, extracting the third introductory text information corresponding to the target webpage element, and converting the target webpage element into a second text element based on the third introductory text information; and determining the combined image and text element, the first text element, or the second text element as the second optimized element.

[0085] It should be noted that the "playback window element" subtype refers to video or audio components embedded in a webpage used for playback control. Target webpage elements belonging to the "playback window element" subtype typically rely on complex scripts and plugins to achieve their functionality.

[0086] In this implementation, for the target webpage element of the playback window element subtype, a container can be used to replace the original complex player. The replaced container is a text-image combination element, which contains image tags corresponding to the extracted playback icon information and text tags corresponding to the first introductory text information. A simple click event can also be bound to this new container. When the user clicks, the event handler extracts the media resource link from the original player and calls a smart TV's built-in player to play the media.

[0087] It should be noted that the chart element subtype refers to web page elements that display data in chart form. Target web page elements belonging to the chart element subtype are difficult to examine in detail on TV devices through focus, such as dynamic data charts (e.g., line charts, bar charts) and complex HTML tables.

[0088] In this implementation, for the target webpage element of the chart element subtype, one or more standard text tags can be used to replace the entire chart to obtain the first text element. The tag content of the first text element is the extracted second introductory text information. For example, a complex monthly sales bar chart can be replaced with a text paragraph: the highest sales this month is X yuan, the lowest is Y yuan, and the average is Z yuan; or a data table can be converted into a bulleted list listing its key data rows.

[0089] It should be noted that the "Ad Element" subtype refers to web page elements that contain advertising content. Target web page elements belonging to the "Ad Element" subtype typically contain dynamic content, multiple tracking scripts, and promotional components with complex interactions.

[0090] In this embodiment, for the target webpage element of the advertising element subtype, a simple text tag can also be used to replace the entire advertising container to obtain the second text element. The tag content of the second text element is the extracted third introductory text information. For example, the third introductory text information can be: [Advertisement] A certain brand promotes a certain type of product.

[0091] In this embodiment, the graphic and text combination elements, the first text element, and the second text element, after the above layout adjustment, will be integrated into the second web page file as the second optimized element.

[0092] In this embodiment, by simplifying the three types of typical complex web page elements, the original functions of the web page elements can be retained while converting them into simpler and more intuitive web page elements, thereby greatly reducing the cognitive and operational burden on users.

[0093] S305: Based on the first optimized element and / or the second optimized element, obtain the second webpage file.

[0094] In this embodiment, after optimizing the layout of web page elements of non-critical, critical, and simplifiable element types, the smart TV integrates the results from the three processing paths described above. Deleted web page elements no longer appear in the new DOM tree, while the first and second optimized elements are organized into the new page structure. Finally, the second web page file is obtained by serializing the optimized DOM tree into an HTML file.

[0095] In this embodiment, by performing deletion processing on non-critical element types of web page elements, layout processing on critical element types of web page elements, and simplification processing on simplified element types of web page elements, precise optimization of each web page element can be achieved, thereby significantly improving the user's accessibility experience.

[0096] In one feasible implementation, the step of displaying the target webpage based on the second webpage file may specifically include: adding preset accessibility assistance codes to the second webpage file to obtain a third webpage file; and displaying the target webpage based on the third webpage file.

[0097] In this embodiment, accessibility assistance code refers to code used to implement accessibility assistance. Specifically, this accessibility assistance code may include font assistance code, color assistance code, and / or focus magnification code. The font assistance code adjusts the font size to the target range while optimizing line spacing and character spacing to ensure the text is large enough and the line spacing is wide enough for easy reading. The color assistance code optimizes the contrast between the text color and the background color, for example, ensuring a contrast ratio of at least 4.5:1. The focus magnification code adds a focus magnification effect to clickable or zoomable web page elements, eliminating the problem of lost focus or difficulty in noticing the element.

[0098] In this embodiment, a third webpage file can be obtained by inserting corresponding accessibility assistance code into the DOM tree or HTML string corresponding to the second webpage file through a programmatic script.

[0099] In this embodiment, after obtaining the third webpage file, it can be loaded and rendered by a rendering engine such as a browser or WebView. At this time, when the rendering engine parses HTML, applies CSS, and executes JavaScript, it will simultaneously process the additionally injected accessibility assistance code, thereby ultimately presenting the target webpage with both excellent layout and powerful accessibility features to the user.

[0100] In this embodiment, by injecting accessibility assistance code into the second webpage file, the accessibility adaptation effect of the target webpage can be further improved, providing a clearer visual interface for visually impaired users.

[0101] In one feasible implementation, the step of obtaining the first webpage file of the original webpage may specifically include: when loading the original webpage, listening to the document object model of the original webpage and obtaining the listening result, the listening result being used to characterize whether the original webpage has been loaded; when the listening result indicates that the original webpage has been loaded, obtaining the first webpage file of the original webpage.

[0102] In this implementation, the listening process starts immediately after the original webpage begins loading. Specifically, the listener can be established by executing a pre-injected listening script (such as JavaScript) when the browser or WebView component parses the initial HTML document and begins to build the document object model, i.e., the DOM tree.

[0103] In this implementation, the listener only listens to whether the DOM tree has been built, without performing in-depth parsing of the specific content in the DOM tree. When the DOM tree is built, it means that the main content of the original webpage has been presented and the structure is relatively stable. Thus, the listening result indicates that the original webpage has been loaded and the first webpage file of the original webpage is obtained.

[0104] In this embodiment, before listening to the document object model of the original webpage when loading the original webpage and obtaining the listening result, the webpage processing method further includes: determining whether the accessibility mode is enabled in response to a click operation on the browser; when the accessibility mode is enabled, performing the step of listening to the document object model of the original webpage when loading the original webpage and obtaining the listening result; when the accessibility mode is disabled, loading and displaying the original webpage.

[0105] In this implementation, before loading the original webpage, the accessibility mode can be determined by checking whether the accessibility service is running or whether the system's accessibility function switch is turned on. If it is not turned on, the webpage loading and rendering logic is executed normally; otherwise, the subsequent webpage parsing and reconstruction process is automatically executed to make the webpage interaction more suitable for remote control button operation, thereby improving the accessibility user experience.

[0106] In this embodiment, by obtaining the HTML resource file of the original webpage only when loading is complete, it is possible to effectively avoid obtaining an incomplete page due to premature crawling, ensuring that all subsequent optimization processes are based on a complete webpage version, thereby fundamentally guaranteeing the accuracy and completeness of the webpage accessibility adaptation effect.

[0107] To facilitate better implementation of the webpage processing method of this application, this application also provides a webpage processing apparatus based on the above-described webpage processing method. The meanings of the terms used are the same as in the webpage processing method described above, and specific implementation details can be found in the descriptions of the method embodiments.

[0108] Based on the same inventive concept, and referring to FIG4, this application provides a web page processing device 400, which includes: a file acquisition module 401 for acquiring a first web page file of an original web page; a file parsing module 402 for parsing the first web page file to obtain attribute information of multiple web page elements in the original web page; a layout optimization module 403 for optimizing the layout of the multiple web page elements based on the attribute information to obtain a second web page file; and a web page display module 404 for displaying a target web page based on the second web page file.

[0109] In one embodiment, the layout optimization module 403 includes: an element type determination submodule, used to determine the element type of multiple web page elements based on attribute information; and a layout optimization submodule, used to optimize the layout of the multiple web page elements based on the element type to obtain a second web page file.

[0110] In one embodiment, the element type includes a non-critical element type, a critical element type, and / or a simplifiable element type; the layout optimization submodule includes: a target webpage element determination unit, used to determine any one of a plurality of webpage elements as a target webpage element; an element deletion unit, used to delete the target webpage element when the element type of the target webpage element is a non-critical element type; an element layout unit, used to perform layout processing on the target webpage element according to a preset layout rule when the element type of the target webpage element is a critical element type, to obtain a first optimized element; an element simplification unit, used to simplify the target webpage element when the element type of the target webpage element is a simplifiable element type, to obtain a second optimized element; and a webpage file determination unit, used to obtain a second webpage file based on the first optimized element and / or the second optimized element.

[0111] In one embodiment, the key element type includes a non-structured element subtype, a structured element subtype, and / or a navigation element subtype; the element layout unit includes: a first layout subunit, used to lay out the target webpage element according to a first arrangement when the element type of the target webpage element is a non-structured element subtype, to obtain a third optimized element; a second layout subunit, used to lay out the target webpage element according to a second arrangement when the element type of the target webpage element is a structured element subtype, and to retain the structural relationship of the target webpage element, to obtain a fourth optimized element; a third layout subunit, used to lay out the target webpage element to the target display position when the element type of the target webpage element is a navigation element subtype, to obtain a fifth optimized element; and a first element determination subunit, used to determine the third optimized element, the fourth optimized element, or the fifth optimized element as the first optimized element.

[0112] In one embodiment, the simplified element types include a playback window element subtype, a chart element subtype, and / or an advertisement element subtype; the element simplification unit includes: a first element simplification subunit, configured to extract the playback icon information and first introductory text information corresponding to the target webpage element when the element type of the target webpage element is a playback window element subtype, and convert the target webpage element into a graphic-text combination element based on the playback icon information and the first introductory text information; a second element simplification subunit, configured to extract the second introductory text information corresponding to the target webpage element when the element type of the target webpage element is a chart element subtype, and convert the target webpage element into a first text element based on the second introductory text information; a third element simplification subunit, configured to extract the third introductory text information corresponding to the target webpage element when the element type of the target webpage element is an advertisement element subtype, and convert the target webpage element into a second text element based on the third introductory text information; and a second element determination subunit, configured to determine the graphic-text combination element, the first text element, or the second text element as a second optimized element.

[0113] In one embodiment, the webpage display module 404 includes: a code adding submodule, used to add preset accessibility assistance code to a second webpage file to obtain a third webpage file; and a webpage display submodule, used to display a target webpage based on the third webpage file.

[0114] In one embodiment, the file acquisition module 401 includes: a webpage listening submodule, used to listen to the document object model of the original webpage when loading the original webpage and obtain the listening result; the listening result is used to indicate whether the original webpage has been loaded; and a file acquisition submodule, used to acquire the first webpage file of the original webpage when the listening result indicates that the original webpage has been loaded.

[0115] By adopting the technical solution of this application embodiment, the attribute information of multiple web page elements in the original web page is obtained by parsing. Based on the attribute information, the layout of each web page element can be optimized in a targeted manner, thereby significantly improving the readability and operability of the target web page, making the remote control focus movement smoother and more convenient, and effectively improving the user's accessibility experience.

[0116] For specific limitations regarding the web page processing device 400, please refer to the limitations of the web page processing method above, which will not be repeated here. Each module in the aforementioned web page processing device 400 can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0117] Furthermore, this application also provides an electronic device, as shown in FIG5, which illustrates the structural schematic diagram of the electronic device involved in this application. Specifically, the electronic device may include components such as a processor 501 with one or more processing cores and a memory 502 with one or more computer-readable storage media. Those skilled in the art will understand that the electronic device structure shown in FIG5 does not constitute a limitation on the electronic device, and may include more or fewer components than shown, or combine certain components, or have different component arrangements. The processor 501 is the control center of the electronic device, connecting various parts of the entire electronic device through various interfaces and lines. By running or executing software programs and / or modules stored in the memory 502, and calling data stored in the memory 502, it performs various functions of the electronic device and processes data, thereby performing overall monitoring of the electronic device. Optionally, the processor 501 may include one or more processing cores; preferably, the processor 501 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the aforementioned modem processor may also not be integrated into the processor 501.

[0118] The memory 502 can be used to store software programs and modules. The processor 501 executes various functional applications and data processing by running the software programs and modules stored in the memory 502. The memory 502 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, application programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 502 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the memory 502 may also include a memory controller to provide the processor 501 with access to the memory 502.

[0119] In one feasible implementation, the electronic device further includes a power supply 503 that supplies power to the various components. Preferably, the power supply 503 can be logically connected to the processor 501 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. The power supply 503 may also include one or more DC or AC power supplies, recharging systems, power equipment debugging circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0120] In one feasible implementation, the electronic device may further include an input unit 504, which can be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

[0121] Although not shown, the electronic device may also include a display unit, etc., which will not be described in detail here. Specifically, in this embodiment, the processor 501 in the electronic device loads the executable files corresponding to the processes of one or more applications into the memory 502 according to the following instructions, and the processor 501 runs the applications stored in the memory 502, thereby implementing the steps in any of the web page processing methods provided in the embodiments of this application.

[0122] Those skilled in the art will understand that the structure shown in Figure 5 is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the electronic device to which the present application is applied. The specific electronic device may include more or fewer components than shown in the figure, or combine certain components, or have different component arrangements.

[0123] In one feasible implementation, an electronic device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the methods described in any embodiment of this application.

[0124] In one feasible implementation, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the methods described in any embodiment of this application.

[0125] In one feasible implementation, a computer program product is also proposed, comprising a computer program or instructions that, when executed by a processor, implement the methods described in any embodiment of this application.

[0126] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0127] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0128] Therefore, this application provides a computer-readable storage medium storing a computer program that can be loaded by a processor to execute the steps in any of the web page processing methods provided in this application.

[0129] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0130] The computer-readable storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0131] Since the instructions stored in the computer-readable storage medium can execute the steps of any of the web page processing methods provided in this application, the beneficial effects that any of the web page processing methods provided in this application can achieve can be realized, as detailed in the preceding embodiments, and will not be repeated here.

[0132] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal device that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or terminal device. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or terminal device that includes the element.

[0133] The foregoing has provided a detailed description of a webpage processing method, apparatus, electronic device, and computer-readable storage medium provided in this application. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, those skilled in the art will recognize that, based on the ideas of the present invention, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. A webpage processing method, characterized in that, The method includes: obtaining a first webpage file of an original webpage; parsing the first webpage file to obtain attribute information of multiple webpage elements in the original webpage; optimizing the layout of the multiple webpage elements based on the attribute information to obtain a second webpage file; and displaying a target webpage based on the second webpage file.

2. The webpage processing method according to claim 1, characterized in that, The step of optimizing the layout of multiple web page elements based on the attribute information to obtain a second web page file includes: determining the element type of the multiple web page elements based on the attribute information; and optimizing the layout of the multiple web page elements based on the element type to obtain a second web page file.

3. The webpage processing method according to claim 2, characterized in that, The element types include non-critical element types, critical element types, and / or simplifiable element types; the step of optimizing the layout of multiple web page elements based on the element types to obtain a second web page file includes: determining any one of the multiple web page elements as a target web page element; deleting the target web page element when its element type is the non-critical element type; performing layout processing on the target web page element according to preset layout rules when its element type is the critical element type to obtain a first optimized element; simplifying the target web page element when its element type is the simplifiable element type to obtain a second optimized element; and obtaining the second web page file based on the first optimized element and / or the second optimized element.

4. The webpage processing method according to claim 3, characterized in that, The key element types include unstructured element subtypes, structured element subtypes, and / or navigation element subtypes; the step of processing the target webpage elements according to preset layout rules to obtain a first optimized element includes: when the element type of the target webpage element is the unstructured element subtype, arranging the target webpage element according to a first arrangement to obtain a third optimized element; when the element type of the target webpage element is the structured element subtype, arranging the target webpage element according to a second arrangement while preserving the structural relationship of the target webpage element to obtain a fourth optimized element; when the element type of the target webpage element is the navigation element subtype, placing the target webpage element in the target display position to obtain a fifth optimized element; and determining the third optimized element, the fourth optimized element, or the fifth optimized element as the first optimized element.

5. The webpage processing method according to claim 3, characterized in that, The simplifiable element types include playback window element subtypes, chart element subtypes, and / or advertisement element subtypes; the simplification process of the target webpage element to obtain the second optimized element includes: when the element type of the target webpage element is the playback window element subtype, extracting the playback icon information and first introductory text information corresponding to the target webpage element, and converting the target webpage element into a graphic-text combination element based on the playback icon information and the first introductory text information; when the element type of the target webpage element is the chart element subtype, extracting the second introductory text information corresponding to the target webpage element, and converting the target webpage element into a first text element based on the second introductory text information; when the element type of the target webpage element is the advertisement element subtype, extracting the third introductory text information corresponding to the target webpage element, and converting the target webpage element into a second text element based on the third introductory text information; and determining the graphic-text combination element, the first text element, or the second text element as the second optimized element.

6. The webpage processing method according to claim 1, characterized in that, The step of displaying the target webpage based on the second webpage file includes: adding preset accessibility assistance code to the second webpage file to obtain a third webpage file; and displaying the target webpage based on the third webpage file.

7. The webpage processing method according to claim 1, characterized in that, The step of obtaining the first webpage file of the original webpage includes: listening to the document object model of the original webpage while loading the original webpage, and obtaining a listening result; the listening result is used to indicate whether the original webpage has been loaded; when the listening result indicates that the original webpage has been loaded, the first webpage file of the original webpage is obtained.

8. A webpage processing device, characterized in that, The device includes: a file acquisition module for acquiring a first webpage file of an original webpage; a file parsing module for parsing the first webpage file to obtain attribute information of multiple webpage elements in the original webpage; a layout optimization module for optimizing the layout of the multiple webpage elements based on the attribute information to obtain a second webpage file; and a webpage display module for displaying a target webpage based on the second webpage file.

9. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the web page processing method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the web page processing method as described in any one of claims 1 to 7.

Images