CN110020337B

CN110020337B - Webpage processing method and related product

Info

Publication number: CN110020337B
Application number: CN201710664347.XA
Authority: CN
Inventors: 应玉龙
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2017-08-03
Filing date: 2017-08-03
Publication date: 2022-10-28
Anticipated expiration: 2037-08-03
Also published as: CN110020337A

Abstract

The embodiment of the invention provides a webpage processing method and a related product, wherein the method comprises the following steps: if a trigger event is detected in a currently displayed target webpage, acquiring a position coordinate related to the trigger event; traversing and searching at least one webpage element corresponding to the position coordinate in the target webpage according to a display hierarchical relationship, wherein the position coordinate corresponding to the at least one webpage element means that the position coordinate is located in a display area range of the at least one webpage element; and if the webpage elements including the pictures exist in the at least one webpage element, outputting an operation menu containing the associated operation options of the pictures. The invention can improve the intelligence of webpage processing, enrich the interaction function and improve the interaction experience.

Description

Webpage processing method and related product

Technical Field

The present invention relates to the field of internet technologies, and in particular, to the field of web page processing technologies, and in particular, to a web page processing method, a web page processing apparatus, a computer storage medium, and a terminal.

Background

With the development of the internet and the improvement of the terminal performance, more and more users choose to browse web pages anytime and anywhere by using fragmented time on terminals such as mobile phones and PADs (PADs). During browsing a web page, if a picture of interest (a still picture or a moving picture) is encountered, a user usually wants to perform further operations on the picture, such as: view pictures full screen, save pictures, etc.; taking the most commonly used touch screen mobile phone as an example at present, in the process of browsing a webpage by using a mobile phone browser, if a user wants to store a certain picture in the currently displayed webpage into a mobile phone, the user can press and click the display area corresponding to the picture on a mobile phone screen with a finger, at this moment, the browser can acquire the coordinate of the long-press click position on the mobile phone screen, and then acquire the webpage elements of which the display area in the webpage comprises the coordinate and the display layer belongs to the uppermost layer; if the webpage element is the picture seen by the user, an operation menu containing some operation options related to the picture (such as viewing the picture and saving the picture) is popped up for the user to select. However, it has been found in practice that the above-mentioned prior art solutions have the following disadvantages: the method can only operate on the picture with the display layer positioned at the uppermost layer, if other transparent elements are covered on the picture seen by the user, namely if the picture seen by the user is positioned at the bottom layer, the situation that the user cannot perform further associated operation on the seen picture occurs, so that the intelligence of webpage processing is reduced, and the interactive experience is reduced.

Disclosure of Invention

The embodiment of the invention provides a webpage processing method and a related product, which can improve the intelligence of webpage processing, enrich the interactive function and improve the interactive experience.

In one aspect, an embodiment of the present invention provides a method for processing a web page, where the method includes:

if a trigger event is detected in a currently displayed target webpage, acquiring a position coordinate related to the trigger event;

traversing and searching at least one webpage element corresponding to the position coordinate in the target webpage according to a display hierarchical relationship, wherein the position coordinate corresponding to the at least one webpage element means that the position coordinate is located in a display area range of the at least one webpage element;

and if the webpage elements including the pictures exist in the at least one webpage element, outputting an operation menu containing the associated operation options of the pictures.

In the technical scheme, the pictures can be searched in each display layer in a traversing manner according to the display hierarchical relationship, and the searching is not limited to be performed only on the uppermost display layer, so that the associated operation options can be correspondingly output no matter whether the pictures are on the upper display layer or the bottom display layer, the further operation can be performed on the pictures, and the intelligence of picture processing is improved.

As a possible implementation manner, if there is a web page element including a picture in the at least one web page element, outputting an operation menu including associated operation options of the picture, including:

if the webpage elements including the pictures exist in the at least one webpage element, acquiring the associated operation options of the pictures, wherein the associated operation options of the pictures include at least one of the following items: saving pictures, viewing pictures and sharing pictures;

and generating and outputting an operation menu containing the associated operation options of the picture.

In the embodiment, not only can traditional associated operation options such as picture saving and picture viewing be provided for the user, but also associated operation options for picture sharing are further provided, so that richer interaction functions are provided, the user can use the picture more conveniently and quickly, and the interaction experience is improved.

As another possible embodiment, the method further includes:

identifying whether the picture contains a graphic code;

if yes, obtaining the associated operation options of the graphic code, wherein the associated operation options of the graphic code at least comprise: identifying a graphic code in a picture;

and adding the associated operation options of the graphic code into the operation menu.

In the above embodiment, if the picture includes the graphic code, then the associated operation option such as identifying the graphic code in the picture is added to the operation menu, so that the interactive function is further enriched, the user can operate the content in the picture more conveniently, and the interactive experience is further improved.

As another possible implementation, the method further includes:

acquiring an HTML (Hyper Text Markup Language) document of the currently displayed target webpage, wherein the HTML document comprises a plurality of webpage elements;

analyzing the acquired HTML Document to generate a DOM (Document Object Model), wherein the DOM tree comprises a plurality of DOM nodes which correspond to the webpage elements one by one;

and constructing a Render tree according to the DOM tree, wherein the Render tree comprises a plurality of Render nodes, and one Render node corresponds to at least one DOM node.

In the embodiment, through webpage analysis, the construction of the DOM tree and the Render tree, and the establishment of the corresponding relationship among the DOM tree and the Render tree, the traversal search is facilitated, and the efficiency of webpage processing is improved.

As another possible implementation manner, the traversing for finding at least one web page element corresponding to the location coordinate in the target web page according to the display hierarchy includes:

traversing and searching a display area range from the Render tree according to a display level relation, wherein the display area range comprises the position coordinates, and a first Render node with the maximum display level parameter is displayed, wherein the larger the display level parameter is, the higher the position of a display layer is; the smaller the display level parameter is, the lower the position of the display layer is;

determining the first Render node as a target Render node;

searching a target DOM node corresponding to the target Render node from the DOM tree;

and judging whether the webpage element corresponding to the target DOM node comprises the picture or not, and finishing traversal if the judgment result is yes.

In a specific implementation, the traversing and searching at least one web page element corresponding to the position coordinate in the target web page according to the display hierarchical relationship further includes:

if the judgment result is negative, continuously traversing and searching a display area range from the Render tree according to the display hierarchy relation, wherein the display area range comprises the position coordinates and belongs to a second Render node of a father of the first Render node;

confirming whether the second Render node is a root node or not, and if so, ending traversal;

and if the result of the confirmation is negative, traversing third Render nodes which belong to the children of the second Render node and have positive level parameters and are not traversed according to the descending order of the display level parameters, and determining the third Render nodes as target Render nodes again.

In the above embodiment, the pictures are searched in each display layer according to the display hierarchical relationship, rather than being searched only in the uppermost display layer, which is convenient for further operation on the pictures and improves the intelligence of picture processing.

As another possible implementation, the method further includes:

and if the selected event aiming at each option in the operation menu is detected, executing corresponding service processing according to the selected option.

In a specific implementation, if a selected event for each option in the operation menu is detected, executing corresponding service processing according to the selected option, includes:

if the selected option is to store the picture, storing the picture in a storage space of the terminal;

if the selected option is to view the picture, calling a picture viewer of the terminal to display the picture;

and if the selected option is picture sharing, sharing the picture to the social application of the terminal.

In a specific implementation, if a selected event for each option in the operation menu is detected, executing corresponding service processing according to the selected option, further includes:

if the selected option is to identify the graphic code in the picture, analyzing the graphic code to obtain an analysis result;

if the analysis result is a character string, outputting the character string;

and if the analysis result is a Uniform Resource Locator (URL), accessing the webpage corresponding to the URL.

In the embodiment, the picture or the graphic code in the picture is further processed in response to the selection operation of each option in the operation menu, so that the utilization rate of the picture is improved, and the interactive intelligence is improved.

In another aspect, an embodiment of the present invention provides a web page processing apparatus, where the apparatus includes:

the system comprises a coordinate acquisition unit, a display unit and a display unit, wherein the coordinate acquisition unit is used for acquiring a position coordinate related to a trigger event if the trigger event is detected in a currently displayed target webpage;

a traversing unit, configured to search for at least one web page element corresponding to the position coordinate in the target web page according to a display hierarchical relationship, where the position coordinate and the at least one web page element correspond to each other: the position coordinates are located within a display area range of the at least one web page element;

and the output unit is used for outputting an operation menu containing the associated operation options of the picture if the webpage element comprising the picture exists in the at least one webpage element.

In the technical scheme, the pictures can be searched in each display layer in a traversing manner according to the display hierarchical relationship without being limited to be searched in the uppermost display layer, so that the associated operation options can be correspondingly output no matter whether the pictures are in the upper display layer or the bottom display layer, further operation can be conveniently performed on the pictures, and the intelligence of picture processing is improved.

As a possible implementation, the output unit is specifically configured to: if the webpage element comprising the picture exists in the at least one webpage element, acquiring the associated operation option of the picture, wherein the associated operation option of the picture comprises at least one of the following items: saving pictures, viewing pictures and sharing pictures; and generating and outputting an operation menu containing the associated operation options of the picture.

In the embodiment, not only can traditional associated operation options such as saving pictures and viewing pictures be provided for users, but also associated operation options for sharing pictures are further provided, so that richer interactive functions are provided, users can use the pictures more conveniently, and the interactive experience is improved.

As another possible embodiment, the apparatus further includes:

the picture processing unit is used for identifying whether the picture contains a graphic code;

if yes, obtaining the associated operation options of the graphic code, wherein the associated operation options of the graphic code at least comprise: identifying a graphic code in a picture; and (c) a second step of,

In the embodiment, if the picture contains the graphic code, the associated operation options such as identifying the graphic code in the picture are added in the operation menu, so that the interaction function is further enriched, the user can operate the content in the picture more conveniently, and the interaction experience is further improved.

As another possible implementation, the apparatus further includes:

the preprocessing unit is used for acquiring an HTML document of the currently displayed target webpage, and the HTML document comprises a plurality of webpage elements;

analyzing the acquired HTML document to generate a DOM tree, wherein the DOM tree comprises a plurality of DOM nodes, and the DOM nodes correspond to the webpage elements one by one; and the number of the first and second groups,

As another possible implementation, the traversal unit is specifically configured to:

traversing and searching a display area range from the Render tree according to a display level relation, wherein the display area range comprises the position coordinates, and the first Render node with the largest display level parameter is displayed, wherein the larger the display level parameter is, the higher the position of the display layer is; the smaller the display level parameter is, the lower the position of the display layer is;

determining the first Render node as a target Render node;

In a specific implementation, the traversal unit is further configured to:

As another possible implementation, the apparatus further comprises:

and the service processing unit is used for executing corresponding service processing according to the selected option if the selected event aiming at each option in the operation menu is detected.

In a specific implementation, the service processing unit is specifically configured to:

In a specific implementation, the service processing unit is further configured to:

if the analysis result is a character string, outputting the character string;

and if the analysis result is the URL, accessing the webpage corresponding to the URL.

In yet another aspect, an embodiment of the present invention further provides a computer storage medium, where one or more instructions are stored, and the one or more instructions are adapted to be loaded by a processor and execute the following steps:

traversing and searching at least one webpage element corresponding to the position coordinate in the target webpage according to a display hierarchical relationship, wherein the position coordinate corresponding to the at least one webpage element means that the position coordinate is located in the display area range of the at least one webpage element;

As a possible implementation manner, when the one or more instructions are loaded by the processor and execute the step of outputting the operation menu containing the associated operation options of the picture if the web page element including the picture exists in the at least one web page element, the following steps are specifically executed:

if the webpage element comprising the picture exists in the at least one webpage element, acquiring the associated operation option of the picture, wherein the associated operation option of the picture comprises at least one of the following items: saving pictures, viewing pictures and sharing pictures;

As another possible implementation, the one or more instructions are loaded by the processor and perform the steps of:

identifying whether the picture contains a graphic code;

As yet another possible implementation, the one or more instructions are loaded by a processor and perform the steps of:

acquiring an HTML document of the currently displayed target webpage, wherein the HTML document comprises a plurality of webpage elements;

analyzing the acquired HTML document to generate a DOM tree, wherein the DOM tree comprises a plurality of DOM nodes, and the DOM nodes correspond to the webpage elements one by one;

As another possible implementation manner, when the one or more instructions are loaded by the processor and the step of traversing and searching for at least one web page element corresponding to the position coordinate in the target web page according to the display hierarchical relationship is executed, the following steps are specifically executed:

determining the first Render node as a target Render node;

In a specific implementation, when the one or more instructions are loaded by the processor and the step of traversing and searching at least one webpage element corresponding to the position coordinate in the target webpage according to the display hierarchical relationship is executed, the following steps are also executed:

In the above embodiment, the pictures are searched in each display layer according to the display hierarchical relationship, and the searching is not limited to be performed only on the uppermost display layer, which is convenient for performing further operations on the pictures and improves the intelligence of picture processing.

In a specific implementation, when the one or more instructions are loaded by the processor and execute the step of executing the corresponding service processing according to the selected option if the selected event for each option in the operation menu is detected, the following steps are specifically executed:

In a specific implementation, when the one or more instructions are loaded by the processor and execute the step of executing the corresponding service processing according to the selected option if the selected event for each option in the operation menu is detected, the following steps are also executed:

if the analysis result is a character string, outputting the character string;

In another aspect, an embodiment of the present invention provides a terminal, where the terminal includes:

a processor adapted to implement one or more instructions; and the number of the first and second groups,

a computer storage medium storing one or more instructions adapted to be loaded by the processor and to perform the steps of:

identifying whether the picture contains a graphic code;

As another possible implementation manner, when the one or more instructions are loaded by the processor and the step of traversing and finding at least one web page element corresponding to the position coordinate in the target web page according to the display hierarchical relationship is executed, the following steps are specifically executed:

determining the first Render node as a target Render node;

In a specific implementation, when the one or more instructions are loaded by the processor and the step of traversing and searching for at least one webpage element corresponding to the position coordinate in the target webpage according to the display hierarchical relationship is executed, the following steps are also executed:

if the judgment result is negative, continuously traversing and searching a display area range from the Render tree according to the display hierarchical relationship to find a second Render node which comprises the position coordinate and belongs to the father of the first Render node;

if the analysis result is a character string, outputting the character string;

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

FIG. 1 is a flow chart of a conventional web page processing method;

FIG. 2 is a diagram illustrating a conventional web page processing method;

fig. 3 is a flowchart of a web page processing method according to an embodiment of the present invention;

fig. 4 is a schematic diagram of a web page processing method according to an embodiment of the present invention;

FIG. 5 is a flowchart of another method for processing a web page according to an embodiment of the present invention;

FIG. 6 is a flowchart of another method for processing a web page according to an embodiment of the present invention;

fig. 7 is a schematic structural diagram of a web page processing apparatus according to an embodiment of the present invention;

fig. 8 is a schematic structural diagram of a terminal according to an embodiment of the present invention.

Detailed Description

The technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention.

With the development of the internet and the improvement of the terminal performance, more and more users choose to browse web pages anytime and anywhere by using fragmented time on terminals such as mobile phones and PADs. During browsing a web page, if a picture of interest (still picture or moving picture) is encountered, a user usually wants to perform further operations on the picture, such as: view pictures full screen, save pictures, etc.; taking the most commonly used touch screen mobile phone as an example at present, please refer to fig. 1 together, the existing web page processing flow includes: in the process that a user browses a webpage by using a mobile phone browser, if further operation needs to be performed on a certain picture in the currently displayed webpage, a finger can be used for long-time pressing and clicking a display area corresponding to the picture on a mobile phone screen, at the moment, the browser can obtain a coordinate of a long-time pressing and clicking position on the mobile phone screen, and then a webpage element with the coordinate included in the display area in the webpage and a display layer belonging to the uppermost layer is obtained; if the webpage element comprises a picture, an operation menu pops up, the operation menu comprises some associated operation options of the picture, such as a picture viewing option, a picture saving option and the like, and a user can execute corresponding operation on the picture by selecting the corresponding option. It has been found in practice that the above-mentioned prior art solutions have the following disadvantages: (1) The operation can be performed only on the picture with the display layer located at the uppermost layer, and if the display layer of the picture is located at the bottom layer, the further associated operation cannot be performed on the picture. Referring to fig. 2 together with a specific example, in the display area at the long-press click position, the web page element at the uppermost layer of the display area is a table (non-picture), and the display layer below the display layer of the table is used for displaying pictures; that is, the transparent element of the table is overlaid on the picture of the web page shown in fig. 2; after the user presses and clicks for a long time, the operation menu popped up after the browser traverses to the top-layer table (non-picture) has no associated operation options of the picture, so that the user cannot operate the picture in the webpage seen by the user. (2) In the prior art, the associated operation options of the pictures are only 'view pictures and save pictures', and the interactive functions provided by the associated operation options are too simple, so that the actual requirements of users cannot be fully met.

In view of the disadvantages of the foregoing prior art solutions, an embodiment of the present invention provides a solution, please refer to fig. 3, and a main flow of the web page processing scheme provided in the embodiment of the present invention includes: in the process that a user browses a webpage by using a mobile phone browser, if further operation needs to be performed on a certain picture in the currently displayed webpage, a user can press and click a display area corresponding to the picture on a mobile phone screen by a finger for a long time, at the moment, the browser can acquire the coordinate of the long-press click position on the mobile phone screen, and then acquire a webpage element with the display layer of the display area where the long-press click position is located as the uppermost layer according to the coordinate; if the webpage element comprises the picture, adding the associated operation option of the picture in a pop-up operation menu; otherwise, the browser continues to traverse the webpage elements of each display layer below the display layer according to the coordinates, and judges whether the traversed webpage elements comprise pictures again, and the traversing process continues until the webpage elements comprising the pictures are found or all the webpage elements at the long-press click positions are traversed; after traversing to the webpage elements including the pictures, adding the associated operation options of the pictures in the pop-up operation menu, and executing corresponding operation on the pictures by selecting the corresponding options by a user. In connection with the example shown in fig. 2, the embodiment of the present invention can traverse the picture whose display layer is located at the bottom layer, and provide the associated operation option of the picture for the user to select to perform further operation on the picture. Therefore, compared with the prior art, the webpage processing scheme of the embodiment of the invention has at least the following advantages: (1) No matter the display layer of the picture is on the upper layer or the bottom layer, the picture can be further operated, and the intelligence of picture processing is improved. (2) As shown in fig. 4, the associated operation options of the picture in the embodiment of the present invention may include, but are not limited to: saving pictures, viewing pictures and sharing pictures; this provides richer interactive functionality. (3) Furthermore, if the picture is traversed, whether the picture contains graphic codes such as two-dimensional codes, bar codes and the like is identified; if the graphic code is contained in the operation menu, the associated operation options of the graphic code, such as 'identifying two-dimensional code' and the like, are added in the pop-up operation menu, so that the interaction function is further enriched.

Based on the above description, the embodiment of the present invention discloses a web page processing method, please refer to fig. 5, which may include the following steps S101 to S103.

S101, if a trigger event is detected in a currently displayed target webpage, acquiring a position coordinate related to the trigger event.

The trigger event refers to an event generated by a user who is browsing a target webpage performing a trigger operation on page content (such as pictures) in the target webpage, and aims to cause the terminal to pop up an operation menu so as to perform further operation on the corresponding page content. It is understood that, if the terminal is a terminal with a touch screen, such as a touch screen mobile phone, a PDA (tablet personal computer), and the like, the trigger event may be an event generated by a long-press clicking operation of a finger of a user on a screen of the terminal, and the position coordinate related to the trigger event may be a position coordinate of a corresponding long-press clicking operation of the long-press clicking operation on the screen. If the terminal does not have a touch screen, such as a keyboard mobile phone, the trigger event may be an event generated by a user performing a selection operation on page content in the target webpage through a cursor, and the position coordinate related to the trigger event may be a position coordinate within a selected range.

S102, traversing and searching at least one webpage element corresponding to the position coordinate in the target webpage according to a display hierarchical relationship, wherein the position coordinate corresponding to the at least one webpage element means that the position coordinate is located in a display area range of the at least one webpage element.

When a plurality of web page elements need to be displayed in the same display area, the display layers of the web page elements have a top-bottom hierarchical relationship, specifically referring to fig. 2 or fig. 4, the table and the picture in the target web page are located in the same display area, and the table is transparently covered on the picture for displaying, that is, the display hierarchical relationship between the table elements and the picture is as follows: the table belongs to the upper display layer, and the picture belongs to the lower display layer. If no other web page elements are displayed under the picture, the display layer to which the picture belongs may also be referred to as the bottom display layer. The traversal process in this step may be: traversing to the webpage element with the uppermost display layer in the corresponding display area according to the position coordinate; stopping the traversal if the web page element includes a picture; otherwise, the web page elements of each display layer below the display layer are continuously traversed according to the coordinates, and whether the traversed web page elements include the pictures is judged again, and the traversing process is continued until the web page elements including the pictures are found or all the web page elements in the display area are traversed.

S103, if the webpage elements including the pictures exist in the at least one webpage element, outputting an operation menu containing the associated operation options of the pictures.

If at least one webpage element including the picture exists in the at least one webpage element found by the traversal, adding an associated operation option of the picture in the operation menu, wherein the associated operation option may include but is not limited to: saving pictures, viewing pictures, sharing pictures, and the like; after the operation menu is output, the user can select an option in the operation menu so as to perform further operation on the picture. It is understood that if at least one web page element found by the traversal does not have a web page element including a picture, then an associated operation option other than the picture may be added in the operation menu, for example: if the webpage element is a text element, options such as 'copy text', 'font size' and the like can be added in the operation menu; and the following steps: if the web page element is a form element, options such as "select copy", "form tool box", etc. may be added to the operation menu.

According to the webpage processing method, the pictures can be searched in each display layer in a traversing mode according to the display hierarchical relation, and the searching is not limited to be performed only on the uppermost display layer, so that the associated operation options can be correspondingly output no matter whether the pictures are on the upper display layer or the bottom display layer, further operation can be conveniently performed on the pictures, and the intelligence of picture processing is improved.

Referring to fig. 6, the method may include the following steps S201 to S218.

S201, obtaining an HTML document of a currently displayed target webpage, wherein the HTML document comprises a plurality of webpage elements.

S202, analyzing the acquired HTML document to generate a DOM tree, wherein the DOM tree comprises a plurality of DOM nodes, and the DOM nodes correspond to the webpage elements one by one.

S203, constructing a Render tree according to the DOM tree, wherein the Render tree comprises a plurality of Render nodes, and one Render node corresponds to at least one DOM node.

In steps S201-S203, when a user opens a target webpage by using an application program such as a browser in the terminal, an HTML document of the target webpage is pulled from a network and stored in a local storage space of the terminal; HTML is a standard language for making web pages, and an HTML document is a descriptive text composed of HTML commands, which can describe characters, pictures, sounds, tables, links, etc., and the contents described by these HTML commands are called web page elements. The DOM tree defines the standard method of accessing and manipulating HTML documents, which is expressed as a tree structure. The DOM tree includes a plurality of DOM nodes, the DOM nodes correspond to the web page elements one to one, each DOM node possesses the attribute of corresponding web page element, and the attribute here can include but is not limited to: the method comprises the steps of obtaining a text, a picture and the like, and if a DOM node contains a text attribute, knowing that a webpage element corresponding to the DOM node is a text element; similarly, if a DOM node contains a picture attribute, it can be known that the webpage element corresponding to the DOM node contains a picture.

The Render tree is a new tree structure constructed based on the DOM tree and is the basis of a webpage layout and rendering mechanism. The Render tree nodes and the DOM tree nodes are not in a one-to-one correspondence, but the Render nodes are established based on the DOM nodes, so that a certain correspondence exists between the Render tree nodes and the DOM tree nodes. In a specific implementation, a Render node is established under the following conditions: (1) document (document) nodes for the DOM tree; (2) Nodes of a Render tree, such as HEAD, META, SCRIPT and the like, are not established for visualized nodes, such as HTML nodes, BODY nodes, DIV nodes and the like, in the DOM tree, but are not established for non-visualized nodes. The Render node established in the above two cases corresponds to the DOM node. (3) In some cases it is desirable to establish anonymous Render nodes that do not correspond to any node in the DOM tree. A Render node has display properties required for layout and rendering, where the display properties may include, but are not limited to: size, color, display area, etc.

S204, if a trigger event is detected in the currently displayed target webpage, acquiring the position coordinate related to the trigger event.

S205, traversing and searching a display area range including the position coordinates from the Render tree according to a display level relation, and displaying a first Render node with the maximum level parameter, wherein the larger the display level parameter is, the higher the position of a display layer is; the smaller the display level parameter is, the lower the display level is.

S206, determining the first Render node as a target Render node.

S207, searching a target DOM node corresponding to the target Render node from the DOM tree.

S208, judging whether the webpage element corresponding to the target DOM node comprises the picture, if so, turning to the step S212, and ending traversal.

And S209, if the judgment result is negative, continuously traversing and searching a second Render node which comprises the position coordinate and belongs to the father of the first Render node in the display area range from the Render tree according to the display hierarchical relation.

And S210, confirming whether the second Render node is a root node, if so, turning to the step S212, and ending traversal.

S211, if the result is negative, traversing the third Render node which belongs to the children of the second Render node and has positive level parameters and is not traversed according to the sequence of the display level parameters from large to small, and determining the third Render node as the target Render node again; and returns to step S207.

In steps S205-S212, the first Render node is a Render node of which the display layer is located at the uppermost layer in the display area where the position coordinate related to the trigger event is located, the second Render node is a parent node of the first Render node, and the third Render node is a child node of the second Render node. The traversal process described in the above steps is specifically as follows:

(1) according to the position coordinates, firstly traversing to a first renderer node of a display layer positioned at the uppermost layer in a corresponding display area, searching a DOM node corresponding to the first renderer node, analyzing attribute information contained in the DOM node to judge whether a webpage element corresponding to the DOM node comprises a picture, wherein if a certain webpage element comprises a picture, the webpage element is indicated to be a picture element, or the webpage element is a non-picture element but contains a foreground picture or a background picture.

(2) If the webpage element corresponding to the DOM node is judged to comprise the picture, stopping traversing, and adding an associated operation option of the picture in the operation menu, wherein the associated operation option can comprise but is not limited to at least one of the following options: viewing pictures, saving pictures, sharing pictures. And if the webpage element corresponding to the DOM node is judged to be a non-picture, adding non-picture associated operation options such as options of 'copy text', 'form tool box' and the like in a pop-up operation menu, continuously traversing the parent node (second Render node) of the first Render node according to the position coordinate, and entering (3).

(3) According to the position coordinates, firstly traversing the Render child tree nodes with the positive hierarchical parameter of the second Render node which is not traversed, searching the corresponding DOM node by traversing each Render child node, and judging whether the webpage element corresponding to each DOM node comprises a picture or not; once the webpage elements including the pictures are traversed, finishing the traversal, and outputting an operation menu containing the associated operation options of the pictures; otherwise, continuing the traversal and entering (4).

(4) Continuously traversing the Render child tree nodes without the hierarchical parameters of the second Render node which is not traversed according to the position coordinates, searching corresponding DOM nodes when traversing to each Render child node, and judging whether the webpage elements corresponding to the DOM nodes comprise pictures or not; once the webpage elements including the pictures are traversed, finishing the traversal, and outputting an operation menu containing the associated operation options of the pictures; otherwise, the traversal is continued, and the step (5) is entered.

(5) Continuously traversing the Render child tree nodes with the level parameters of the second Render nodes which are not traversed being negative according to the position coordinates, searching corresponding DOM nodes when traversing to each Render child node, and judging whether the webpage elements corresponding to the DOM nodes comprise pictures or not; once the webpage elements including the pictures are traversed, finishing the traversal, and outputting an operation menu containing the associated operation options of the pictures; otherwise, the traversal is continued, and the step (6) is entered.

(6) Searching a DOM node corresponding to the second Render, and judging whether a webpage element corresponding to the DOM node comprises a picture or not; if yes, ending the traversal, and outputting an operation menu containing the associated operation options of the picture; otherwise, the traversal is continued, and (7) is entered.

(7) Judging whether the second Render is a root Render node or not, if so, finishing traversal; otherwise, the parent node of the second Render node is continuously traversed, and the steps (3) to (7) are executed again.

The main idea of the above traversal process is to traverse from the top-most Render node to the picture or to the bottom-most Render node (root node) according to the display hierarchy. Therefore, no matter the display layer of the picture requested to be operated by the user is positioned at the upper layer or the bottom layer, the operation menu can be called out so that the user can conveniently perform further operation on the picture, and the intelligence of picture processing is improved.

S213, if the webpage element including the picture exists in the at least one webpage element, acquiring the associated operation options of the picture, wherein the associated operation options of the picture include at least one of the following items: saving pictures, viewing pictures, sharing pictures.

S214, generating and outputting an operation menu containing the associated operation options of the picture.

In steps S213-S214, if the picture is traversed, the operation menu containing the associated operation options of the picture is output, and the user may select the option of the operation menu, so as to further process the picture, thereby improving the interaction intelligence.

S215, identifying whether the picture contains the graphic code.

S216, if the graphic code contains the operation option, acquiring the associated operation option of the graphic code, wherein the associated operation option of the graphic code at least comprises: and identifying the graphic code in the picture.

S217, adding the associated operation options of the graphic code into the operation menu.

In steps S215-S217, for the traversed picture, an image recognition technique or a graphic code recognition technique may be used to recognize the picture, and determine whether the picture includes a graphic code, where the graphic code may include, but is not limited to: bar codes, two-dimensional codes, and the like; if the graphic code is recognized, the associated operation options of the graphic code, such as the option of 'recognizing two-dimension code in the graph', can be further added in the operation menu to provide richer interactive functions for the user.

And S218, if the selected event aiming at each option in the operation menu is detected, executing corresponding service processing according to the selected option.

In a specific implementation, step S218 may include the following several embodiments:

(1) And if the user selects the option of saving the picture in the operation menu, acquiring the traversed picture and storing the traversed picture into the storage space of the terminal.

(2) If the user selects the option of 'view pictures' in the operation menu, a picture viewer of the terminal can be called, and the traversed pictures are displayed in a full screen mode through the picture viewer so as to facilitate the viewing of the user.

(3) And if the user selects the option of sharing the pictures in the operation menu, obtaining entries of all social application in the terminal, and sharing the traversed pictures to the social application of the terminal according to the obtained entries. Social applications herein may include, but are not limited to: weChat, microblog, QQ, etc.

(4) If the user selects the option of identifying the graphic code in the picture in the operation menu, the graphic code analysis tool can be called to analyze the graphic code to obtain an analysis result, whether the analysis result contains a URL (uniform resource locator) or not is judged, if the analysis result contains the URL, the webpage corresponding to the URL is accessed, and at the moment, the browser skips and displays the accessed webpage; and if the URL is not contained, directly outputting the character string obtained by the analysis for the user to view.

According to the webpage processing method, no matter the display layer of the picture is positioned at the upper layer or the bottom layer, the richer interactive function related to the picture can be provided so as to carry out further operation on the picture, the intelligence of picture processing is improved, and if the picture contains graphic codes such as two-dimensional codes and bar codes, the associated operation options of the graphic codes, such as 'identifying the two-dimensional codes', can be added into a popped operation menu, so that the interactive function is further enriched; furthermore, corresponding service processing is executed according to the option selected by the user in the operation menu, so that the picture can be more conveniently utilized, the utilization rate of the picture is improved, and the interactive experience is improved.

Based on the foregoing embodiment of the web page processing method, the embodiment of the present invention further discloses a web page processing apparatus, which may be a computer program (including program codes), and the computer program may be run in a terminal such as a notebook computer, a PDA, a mobile phone, etc. to execute the web page processing method shown in any one of fig. 5-6; in practical applications, the web page processing device may be an application program capable of displaying a web page, such as a browser, in the terminal. Referring to fig. 7, the web page processing apparatus operates the following units:

a coordinate obtaining unit 101, configured to, if a trigger event is detected in a currently displayed target web page, obtain a position coordinate related to the trigger event;

a traversing unit 102, configured to search for at least one web page element corresponding to the position coordinate in the target web page according to a display hierarchical relationship, where the position coordinate and the at least one web page element correspond to each other: the position coordinates are located within a display area range of the at least one web page element;

an output unit 103, configured to output an operation menu including associated operation options of the picture if a web page element including the picture exists in the at least one web page element.

As a possible implementation, the output unit 103 is specifically configured to: if the webpage element comprising the picture exists in the at least one webpage element, acquiring the associated operation option of the picture, wherein the associated operation option of the picture comprises at least one of the following items: saving pictures, viewing pictures and sharing pictures; and generating and outputting an operation menu containing the associated operation options of the picture.

As another possible embodiment, the device further operates the following units:

the picture processing unit 104 is configured to identify whether the picture contains a graphic code;

As a further possible embodiment, the device also operates the following units:

a preprocessing unit 105, configured to obtain an HTML document of the currently displayed target webpage, where the HTML document includes a plurality of webpage elements;

In the embodiment, through webpage analysis, the construction of the DOM tree and the Render tree and the establishment of the corresponding relationship between the DOM tree and the Render tree, the traversal search is facilitated, and the efficiency of webpage processing is improved.

As another possible implementation manner, the traversal unit 102 is specifically configured to:

determining the first Render node as a target Render node;

and judging whether the webpage elements corresponding to the target DOM node comprise pictures or not, and if so, ending the traversal.

In a specific implementation, the traversal unit 102 is further configured to:

As a further possible embodiment, the device also operates the following units:

and the service processing unit 106 is configured to, if a selected event for each option in the operation menu is detected, execute corresponding service processing according to the selected option.

if the analysis result is a character string, outputting the character string;

According to an embodiment of the present invention, steps S101 to S103 involved in the web page processing method shown in fig. 5 may be performed by respective units in the web page processing apparatus shown in fig. 7. For example, steps S101 to S103 shown in fig. 1 may be performed by the coordinate acquisition unit 101, the traversal unit 102, and the output unit 103 shown in fig. 7, respectively.

According to another embodiment of the present invention, steps S201-S217 involved in the web page processing method shown in fig. 6 may be performed by respective units in the web page processing apparatus shown in fig. 7. For example, steps S201 to S203, S204, S205 to S212, S213 to S214, S215 to S217, S218 shown in fig. 6 may be performed by the preprocessing unit 105, the coordinate acquisition unit 101, the traversal unit 102, the output unit 103, the picture processing unit 104, and the business processing unit 106 shown in fig. 7, respectively.

According to another embodiment of the present invention, the units in the web page processing apparatus shown in fig. 7 may be respectively or entirely combined into one or several other units to form the web page processing apparatus, or some unit(s) therein may be further split into multiple functionally smaller units to form the web page processing apparatus, which may implement the same operation without affecting the implementation of the technical effect of the embodiment of the present invention. The units are divided based on logic functions, and in practical application, the functions of one unit can be realized by a plurality of units, or the functions of a plurality of units can be realized by one unit. In other embodiments of the present invention, the web page processing apparatus may also include other units, and in practical applications, these functions may also be implemented by assistance of other units, and may be implemented by cooperation of multiple units.

According to another embodiment of the present invention, the web page processing apparatus device shown in fig. 7 may be constructed by running a computer program (including program codes) capable of executing the steps involved in the web page processing method shown in fig. 5 to 6 on a general-purpose computing device such as a computer including a Central Processing Unit (CPU), a random access storage medium (RAM), a read-only storage medium (ROM), and the like, and a storage element, and implementing the web page processing method of the embodiment of the present invention. The computer program may be recorded on a computer-readable recording medium, for example, and loaded and executed in the above-described computing apparatus via the computer-readable recording medium.

The webpage processing device provided by the embodiment of the invention can provide richer interactive functions related to the picture no matter the display layer of the picture is positioned at the upper layer or the bottom layer so as to carry out further operation on the picture, thus improving the intelligence of picture processing, and if the picture contains graphic codes such as two-dimension codes and bar codes, the associated operation options of the graphic codes, such as 'identifying the two-dimension codes', can be added in a popped operation menu, thus further enriching the interactive functions; furthermore, corresponding business processing is executed according to the option selected in the operation menu by the user, so that the picture can be more conveniently utilized, the utilization rate of the picture is improved, and the interactive experience is improved.

Based on the web page processing method and the web page processing apparatus shown in the foregoing embodiments, an embodiment of the present invention further provides a terminal, where the terminal is configured to execute corresponding steps of the method flows shown in fig. 5 to 6. In particular implementations, the terminals described in embodiments of the invention include, but are not limited to, other portable devices such as mobile phones, laptop computers, or tablet computers having touch sensitive surfaces (e.g., touch screen displays and/or touch pads). Referring to fig. 8, the internal structure of the terminal includes at least a processor, a user interface, and a computer storage medium. The processor, the user interface and the computer storage medium in the terminal may be connected by a bus or other means, and fig. 8 shows an example of the connection by a bus according to the embodiment of the present invention.

The user interface is a medium for implementing interaction and information exchange between a user and a terminal, and may be embodied by a Display screen (Display) for output, a Keyboard (Keyboard) for input, and the like, where it is to be noted that the Keyboard may be an entity Keyboard, a touch screen virtual Keyboard, or a Keyboard that is a combination of an entity and a touch screen in a virtual manner. However, it should be understood that the user interface may also include one or more other physical user interface devices such as a mouse and/or joystick. The processor (or CPU) is a computing core and a control core of the terminal, and is adapted to implement one or more instructions, and specifically, is adapted to load and execute one or more instructions to implement corresponding method flows or corresponding functions; for example: the CPU can be used for analyzing a power-on and power-off instruction sent to the terminal by a user and controlling the terminal to carry out power-on and power-off operation; the following steps are repeated: the CPU may transmit various types of interactive data between internal structures of the terminal, and the like. A computer storage medium (Memory) is a Memory device in a terminal for storing programs and data. It is understood that the computer storage medium herein may include both a built-in storage medium of the terminal and, of course, an extended storage medium supported by the terminal. The computer storage medium provides a storage space that stores an operating system of the terminal. Also, the memory space stores one or more instructions, which may be one or more computer programs (including program code), adapted to be loaded and executed by the processor. The computer storage medium may be a high-speed RAM memory, or may be a non-volatile memory (non-volatile memory), such as at least one disk memory; and optionally at least one computer storage medium located remotely from the processor.

It is also specifically noted that the terminal supports various applications, such as one or more of the following: a drawing application, a presentation application, a word processing application, a website creation application, a disc burning application, a spreadsheet application, a gaming application, a telephone application, a video conferencing application, an email application, an instant messaging application, an exercise support application, a photo management application, a digital camera application, a web browsing application, a digital music player application, and/or a digital video player application. Various applications that may be executed on the terminal may use at least one common physical user interface device, such as a touch-sensitive surface. One or more functions of the touch-sensitive surface and corresponding information displayed on the terminal can be adjusted and/or changed between applications and/or within respective applications. In this way, a common physical architecture (e.g., touch-sensitive surface) of the terminal can support various applications with user interfaces that are intuitive and transparent to the user.

In the embodiment of the present invention, the processor loads and executes one or more instructions stored in the computer storage medium to implement the corresponding steps of the method flows shown in fig. 5 to 6; in a specific implementation, one or more instructions in a computer storage medium are loaded by a processor and perform the following steps:

As a possible implementation manner, when the one or more instructions are loaded by the processor and execute the step of outputting the operation menu including the associated operation option of the picture if the web page element including the picture exists in the at least one web page element, the following steps are specifically executed:

recognizing the picture whether the graphic code is contained;

determining the first Render node as a target Render node;

and if the result of the confirmation is negative, traversing third Render nodes which belong to children of the second Render node and have positive hierarchical parameters and are not traversed according to the descending order of the display hierarchical parameters, and re-determining the third Render nodes as target Render nodes.

if the analysis result is a character string, outputting the character string;

a processor adapted to implement one or more instructions; and (c) a second step of,

a computer storage medium storing one or more instructions adapted to be loaded by the processor and perform the steps of:

identifying whether the picture contains a graphic code;

determining the first Render node as a target Render node;

if the analysis result is a character string, outputting the character string;

The terminal and the computer storage medium of the embodiment of the invention can provide richer interactive functions related to the picture no matter the display layer of the picture is positioned at the upper layer or the bottom layer so as to carry out further operation on the picture, thereby improving the intelligence of picture processing, and if the picture contains graphic codes such as two-dimension codes, bar codes and the like, the associated operation options of the graphic codes, such as 'identifying the two-dimension codes' and the like, can be added into a popped operation menu, thereby further enriching the interactive functions; furthermore, corresponding service processing is executed according to the option selected by the user in the operation menu, so that the picture can be more conveniently utilized, the utilization rate of the picture is improved, and the interactive experience is improved.

It will be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.

It is also to be understood that the terminology used in the description of the invention herein is for the purpose of describing particular embodiments only and is not intended to be limiting. As used in the specification of the present invention and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.

It should be further understood that the term "and/or" as used in this specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items and includes such combinations.

As used in this specification and the appended claims, the term "if" may be interpreted contextually as "when", "upon" or "in response to a determination" or "in response to a detection". Similarly, the phrase "if it is determined" or "if a described condition or event is detected" may be interpreted, depending on the context, to mean "upon determining" or "in response to determining" or "upon detecting a described condition or event" or "in response to detecting a described condition or event".

In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Moreover, various embodiments or examples and features of various embodiments or examples described in this specification can be combined and combined by one skilled in the art without being mutually inconsistent.

Furthermore, the terms "first", "second" and "first" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or to implicitly indicate the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of the present invention, "a plurality" means at least two, e.g., two, three, etc., unless explicitly specified otherwise.

Any process or method descriptions in flow charts or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and alternate implementations are included within the scope of the embodiments of the present invention in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the embodiments of the present invention.

It should be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, various steps or methods may be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like. In addition, functional units in the embodiments of the present invention may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a separate product, may also be stored in a computer-readable storage medium.

While the invention has been described in connection with what is presently considered to be the most practical and preferred embodiment, it is to be understood that the invention is not to be limited to the disclosed embodiment, but on the contrary, is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims

1. A method for processing a web page, comprising:

traversing and searching a display area range from a Render tree according to a display level relation, wherein the display area range comprises the position coordinates, and the display level parameter is the largest first Render node, and the Render tree comprises a plurality of Render nodes;

determining the first Render node as a target Render node;

searching a target DOM node corresponding to the target Render node from the DOM tree; the DOM tree comprises a plurality of DOM nodes, and the DOM nodes correspond to the webpage elements in the target webpage one by one; a Render node corresponds to at least one DOM node;

and if the webpage element corresponding to the target DOM node comprises the picture, outputting an operation menu containing the associated operation options of the picture.

2. The method of claim 1, wherein if the webpage element corresponding to the target DOM node comprises a picture, outputting an operation menu containing associated operation options of the picture, comprising:

if the webpage element corresponding to the target DOM node comprises a picture, obtaining the associated operation options of the picture, wherein the associated operation options of the picture comprise at least one of the following items: saving pictures, viewing pictures and sharing pictures;

3. The method of claim 2, further comprising:

identifying whether the picture contains a graphic code;

4. The method of any one of claims 1-3, further comprising:

analyzing the acquired HTML document to generate the DOM tree;

and constructing the Render tree according to the DOM tree.

5. The method of claim 4, wherein the larger the display level parameter is, the higher the display level is; the smaller the display level parameter is, the lower the position of the display layer is; the method further comprises the following steps:

and judging whether the webpage element corresponding to the target DOM node comprises the picture or not, and if so, ending the traversal.

6. The method of claim 5, wherein the method further comprises:

7. The method of claim 3, further comprising:

8. The method of claim 7, wherein if the selected event for each option in the operation menu is detected, performing the corresponding service process according to the selected option comprises:

9. The method of claim 8, wherein if the selected event for each option in the operation menu is detected, performing the corresponding service process according to the selected option, further comprising:

if the analysis result is a character string, outputting the character string;

10. A web page processing apparatus, comprising:

the traversal unit is used for traversing and searching a display area range from a Render tree according to the display hierarchical relationship, wherein the display area range comprises the position coordinates, and a first Render node with the largest display hierarchical parameter is displayed, the first Render node is determined as a target Render node, and a target DOM node corresponding to the target Render node is searched from the DOM tree; the DOM tree comprises a plurality of DOM nodes, and the DOM nodes correspond to the webpage elements in the target webpage one by one; the Render tree comprises a plurality of Render nodes; a Render node corresponds to at least one DOM node;

and the output unit is used for outputting an operation menu containing the associated operation options of the picture if the webpage element corresponding to the target DOM node comprises the picture.

11. A computer storage medium having one or more instructions stored thereon, the one or more instructions adapted to be loaded by a processor and to perform the method of web page processing according to any of claims 1-9.

12. A terminal, comprising:

a computer storage medium storing one or more instructions adapted to be loaded by the processor and to perform the web page processing method of any of claims 1-9.