CN110020337A

CN110020337A - Web page processing method and Related product

Info

Publication number: CN110020337A
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: 2019-07-16
Anticipated expiration: 2037-08-03
Also published as: CN110020337B

Abstract

The embodiment of the present invention provides a kind of web page processing method and Related product and obtains the position coordinates that the trigger event is related to if method therein includes: to detect trigger event in the target webpage currently shown；At least one web page element corresponding with the position coordinates in the target webpage is searched according to display level relationship traversal, wherein, the position coordinates are corresponding at least one described web page element refers to that the position coordinates are located within the scope of the display area of at least one web page element；If there is the web page element including picture at least one described web page element, the actions menu of operation associated option of the output comprising picture.The present invention is able to ascend the intelligence of Web Page Processing, and rich interactive function promotes interactive experience.

Description

Web page processing method and Related product

Technical field

The present invention relates to Internet technical fields, and in particular at technical field of webpage processing more particularly to a kind of webpage Reason method, a kind of page processor, a kind of computer storage medium and a kind of terminal.

Background technique

With the development of internet and the promotion of terminal capabilities, more and more users select in such as mobile phone, PAD Chip time is utilized in terminals such as (tablet computers), browses webpage anywhere or anytime.User during browsing webpage, if Encountering interested picture (static images or dynamic picture) would generally want to execute picture further operating, such as: it is full frame Check picture, save picture etc.；By taking most common touch-screen mobile phone as an example, user uses mobile phone browser browsing webpage In the process, if it is desired to certain picture in the webpage currently shown is saved into mobile phone, it can be with finger on mobile phone screen The corresponding display area of the picture is clicked in long-pressing, and browser can obtain coordinate of the long-pressing click location on mobile phone screen at this time, Then obtaining display area in webpage includes the web page element that the coordinate and display layer belong to top layer；If the web page element It is the picture that user is seen, then pop-up is comprising the relevant some option of operation (as checked picture, saving picture) of picture Actions menu is selected for user.But practice discovery, above-mentioned prior art haves the shortcomings that as follows: being only capable of for display layer Picture positioned at top layer is operated, if other transparent elements are also covered on the picture that user is seen, that is, If the picture that user is seen is located at bottom, then just will appear user can not further be associated with the picture seen The case where operation, it reduce the intelligences of Web Page Processing, reduce interactive experience.

Summary of the invention

The embodiment of the present invention provides a kind of web page processing method and Related product, is able to ascend the intelligence of Web Page Processing, Rich interactive function promotes interactive experience.

On the one hand, the embodiment of the present invention provides a kind of web page processing method, which comprises

If detecting trigger event in the target webpage currently shown, obtains the position that the trigger event is related to and sit Mark；

According to display level relationship traversal search in the target webpage it is corresponding with the position coordinates at least one Web page element, wherein the position coordinates are corresponding at least one described web page element to refer to that the position coordinates are located at institute It states within the scope of the display area of at least one web page element；

If there is the web page element including picture at least one described web page element, output is operation associated comprising picture The actions menu of option.

In the above-mentioned technical solutions, it can be traversed according to display hierarchical relationship in each display layer and search picture, without limiting to In only being searched in top layer's display layer, this makes no matter picture is in upper layer display layer or bottom display layer, equal energy Enough corresponding its operation associated options of output improve the intelligence of picture processing in order to execute further operating to picture.

As a kind of possible embodiment, if there is the webpage including picture at least one described web page element Element, the actions menu of operation associated option of the output comprising picture, comprising:

If there is the web page element including picture at least one described web page element, the operation associated of the picture is obtained Option, the operation associated option of the picture, which includes at least one of the following:, to be saved picture, checks picture, shares picture；

Generate and export the actions menu of the operation associated option comprising the picture.

In the above-described embodiment, it can not only be provided for user and save picture, that check picture etc. traditional is operation associated Option still further provides the operation associated option for sharing picture, this provides richer interactive function, enables a user to It is enough more convenient and fast using picture, improve interactive experience.

As alternatively possible embodiment, the method also includes:

It whether identifies in the picture comprising graphic code；

Operation associated option if the operation associated option for obtaining graphic code comprising if, the graphic code includes at least: knowing Graphic code in other picture；

The operation associated option of the graphic code is added in the actions menu.

In the above-described embodiment, it if including graphic code in picture, just adds in actions menu and such as identifies Operation associated option, further enriches interactive function as graphic code in picture, allows users to more convenient and fast The content in picture is operated, interactive experience is further improved.

As another possible embodiment, the method also includes:

Obtain HTML (Hyper Text Markup Language, the hypertext mark of the target webpage currently shown Remember language) document, the html document includes multiple web page elements；

Parsing is carried out to acquired html document and generates DOM (Document Object Model, DOM Document Object Model) Tree, the dom tree include multiple DOM nodes, and the DOM node and the web page element correspond；

According to the dom tree construct Render (rendering) tree, the Render tree include multiple Render nodes, one Render node corresponds at least one DOM node.

In the above-described embodiment, by web analysis, the building of dom tree, Render tree, and pair between three is established It should be related to, be advantageously implemented traversal and search, promote the efficiency of Web Page Processing.

As another possible embodiment, it is described according to display level relationship traversal search in the target webpage with At least one corresponding web page element of the position coordinates, comprising:

Traversing from the Render tree according to display hierarchical relationship and searching display area range includes the position coordinates, And display the maximum first Render node of level parameter, wherein display level parameter it is bigger, display layer present position more on Layer；Show that level parameter is smaller, bottom is got in display layer present position；

The first Render node is determined as target Render node；

Target DOM node corresponding with target Render node is searched from dom tree；

Judge that the target DOM node corresponds to whether web page element includes picture, terminates to traverse if judging result is.

In the specific implementation, it is described according to display level relationship traversal search in the target webpage with the position coordinates phase At least one corresponding web page element, further includes:

If judging result be it is no, according to display hierarchical relationship continue from the Render tree traversal lookup display area model It encloses including the position coordinates, and belongs to the 2nd Render node of the father of the first Render node；

Confirm whether the 2nd Render node is root node, terminates to traverse if being to be if confirmation result；

If confirmation result be it is no, according to display level parameter order traversal from big to small be not traversed belong to described in The 3rd Render node that the child of 2nd Render node and level parameter are positive, and again by the 3rd Render node It is determined as target Render node.

In the above-described embodiment, it is traversed according to display hierarchical relationship in each display layer and searches picture, and be not limited to Only in top layer, display layer is searched, this is convenient for executing further operating to picture, improves the intelligence of picture processing.

As another possible embodiment, the method also includes:

If detecting the selected event for option each in actions menu, corresponding business is executed according to selected option Processing.

If in the specific implementation, the selected event detected for option each in actions menu, according to selected choosing Item executes corresponding business processing, comprising:

If selected option is to save picture, the picture is stored into the memory space of terminal；

If selected option is to check picture, the Photo Viewer of terminal is called to show the picture；

If selected option is to share picture, the picture is shared into the social application of terminal.

If in the specific implementation, the selected event detected for option each in actions menu, according to selected choosing Item executes corresponding business processing, further includes:

If selected option is the graphic code identified in picture, parses the graphic code and obtain parsing result；

The output string if the parsing result is character string；

If the parsing result is URL (Uniform Resource Locator, uniform resource locator), then institute is accessed State the corresponding webpage of URL.

In the above-described embodiment, in response to the selected operation to each option in actions menu, in picture or picture Graphic code be further processed, improve the utilization rate of picture, improve interactive intelligence.

On the other hand, the embodiment of the invention provides a kind of page processor, described device includes:

Coordinate acquiring unit, if obtaining the triggering for detecting trigger event in the target webpage currently shown The position coordinates that event is related to；

Traversal Unit is opposite with the position coordinates in the target webpage for searching according to display level relationship traversal At least one web page element answered, wherein the position coordinates are corresponding at least one described web page element are as follows: the position Coordinate is located within the scope of the display area of at least one web page element；

Output unit, if for there is the web page element including picture at least one described web page element, output includes The actions menu of the operation associated option of picture.

As a kind of possible embodiment, the output unit is specifically used for: if at least one described web page element In the presence of the web page element including picture, the operation associated option of the picture is obtained, the operation associated option of the picture includes At least one of below: picture is saved, picture is checked, shares picture；And it generates and exports comprising the operation associated of the picture The actions menu of option.

As alternatively possible embodiment, described device further include:

Whether picture processing unit includes for identification graphic code in the picture；

Operation associated option if the operation associated option for obtaining graphic code comprising if, the graphic code includes at least: knowing Graphic code in other picture；And

As another possible embodiment, described device further include:

Pretreatment unit, for obtaining the html document of the target webpage currently shown, the html document includes Multiple web page elements；

Parsing is carried out to acquired html document and generates dom tree, the dom tree includes multiple DOM nodes, the DOM Node and the web page element correspond；And

Render tree is constructed according to the dom tree, the Render tree includes multiple Render nodes, a Render section At least one corresponding DOM node of point.

As another possible embodiment, the Traversal Unit is specifically used for:

The first Render node is determined as target Render node；

In the specific implementation, the Traversal Unit is also used to:

As another possible embodiment, described device further include:

Service Processing Unit, if for detecting the selected event for option each in actions menu, according to selected Option executes corresponding business processing.

In the specific implementation, the Service Processing Unit is specifically used for:

In the specific implementation, the Service Processing Unit is also used to:

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

In another aspect, the computer storage medium is deposited the embodiment of the invention also provides a kind of computer storage medium One or one or more instruction are contained, described one or one or more instruction are suitable for being loaded by processor and executing following steps:

As a kind of possible embodiment, if described one or one or more instruction are loaded by processor and executed described There is the web page element including picture, the actions menu of operation associated option of the output comprising picture at least one web page element Step when, specifically execute following steps:

As alternatively possible embodiment, described one or one or more instruction are loaded by processor and are executed as follows Step:

It whether identifies in the picture comprising graphic code；

As another possible embodiment, described one or one or more instruction are loaded by processor and are executed as follows Step:

The html document of the target webpage currently shown is obtained, the html document includes multiple web page elements；

Parsing is carried out to acquired html document and generates dom tree, the dom tree includes multiple DOM nodes, the DOM Node and the web page element correspond；

As another possible embodiment, described one or one or more instruction loads by processor and described in executing At least one web page element corresponding with the position coordinates in the target webpage is searched according to display level relationship traversal Step when, specifically execute following steps:

The first Render node is determined as target Render node；

In the specific implementation, described one or one or more instruction loads by processor and are executed described according to display level pass When system's traversal searches the step of at least one web page element corresponding with the position coordinates in the target webpage, also execute Following steps:

In the specific implementation, if described one or one or more instruction loads by processor and execute described detect for grasping The selected event for making each option in menu is specific to execute when executing the step of corresponding business processing according to selected option Following steps:

In the specific implementation, if described one or one or more instruction loads by processor and execute described detect for grasping The selected event for making each option in menu when executing the step of corresponding business processing according to selected option, also executes such as Lower step:

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

In another aspect, the embodiment of the invention provides a kind of terminal, the terminal includes:

Processor is adapted for carrying out one or one or more instruction；And

Computer storage medium, the computer storage medium be stored with one or one or more instruction, described one or One or more instruction is suitable for being loaded by the processor and executing following steps:

It whether identifies in the picture comprising graphic code；

The first Render node is determined as target Render node；

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

Detailed description of the invention

In order to more clearly explain the embodiment of the invention or the technical proposal in the existing technology, to embodiment or will show below There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this Some embodiments of invention for those of ordinary skill in the art without creative efforts, can be with It obtains other drawings based on these drawings.

Fig. 1 is the flow chart of existing web page processing method；

Fig. 2 is the schematic diagram of existing web page processing method；

Fig. 3 is a kind of flow chart of web page processing method provided in an embodiment of the present invention；

Fig. 4 is the schematic diagram of web page processing method provided in an embodiment of the present invention；

Fig. 5 is the flow chart of another web page processing method provided in an embodiment of the present invention；

Fig. 6 is the flow chart of another web page processing method provided in an embodiment of the present invention；

Fig. 7 is a kind of structural schematic diagram of page processor provided in an embodiment of the present invention；

Fig. 8 is a kind of structural schematic diagram of terminal provided in an embodiment of the present invention.

Specific embodiment

Following will be combined with the drawings in the embodiments of the present invention, and technical solution in the embodiment of the present invention carries out clear, complete Site preparation description.

With the development of internet and the promotion of terminal capabilities, more and more users select in mobile phone, PAD etc. Chip time is utilized in terminal, browses webpage anywhere or anytime.User is during browsing webpage, if encountered interested Picture (static images or dynamic picture) would generally be wanted to execute picture further operating, such as: it is full frame to check picture, save Picture etc.；By taking most common touch-screen mobile phone as an example, please also refer to Fig. 1, existing Web Page Processing process includes: user During browsing webpage using mobile phone browser, if necessary to execute further behaviour to certain picture in the webpage currently shown Make, can with finger, the corresponding display area of the picture is clicked in long-pressing on mobile phone screen, browser can obtain long-pressing point at this time Coordinate of the position on mobile phone screen is hit, then display area includes the coordinate in acquisition webpage and display layer belongs to top layer Web page element；If the web page element includes picture, will ejection operation menu, include some passes of picture in the actions menu Join option of operation, such as check picture option, save picture option, user selects corresponding option that can execute to the picture Corresponding operating.Practice discovery, above-mentioned prior art haves the shortcomings that as follows: (1) being only capable of being located at for display layer most upper The picture of layer is operated, if the display layer of picture is located at bottom, can not be executed to the picture further operation associated. Illustrate below in conjunction with specific example, please also refer to Fig. 2, in the display area at long-pressing click location, display layer position It is a table (non-picture) in the web page element of top layer, the display layer under the display layer of the table is for showing picture； That is, being covered with this transparent elements of table above the picture of webpage shown in Fig. 2；After user's long-pressing is clicked, browser time Going through in the actions menu popped up afterwards to the table (non-picture) of top layer does not have the operation associated option of picture, cause user without Method operates the picture in the webpage oneself seen.(2) the operation associated option of picture is only " to check figure in prior art Piece saves picture ", the interactive function that can be provided is too simple, is unable to fully meet the actual demand of user.

The shortcomings that for above-mentioned prior art, the embodiment of the present invention proposes a solution, please also refer to figure 3, the main flow of Web Page Processing scheme provided in an embodiment of the present invention includes: mistake of the user using mobile phone browser browsing webpage Cheng Zhong can be with finger on mobile phone screen if necessary to execute further operating to certain picture in the webpage currently shown The corresponding display area of the picture is clicked in long-pressing, and browser can obtain coordinate of the long-pressing click location on mobile phone screen at this time, Then the display layer of display area where obtaining long-pressing click location according to coordinate is the web page element of top layer；If the webpage Element includes picture, and the operation associated option of picture will be added in the actions menu of pop-up；Otherwise, browser can be according to seat Mark continues the web page element for each display layer that traversal is located under the display layer, and whether judges the web page element traversed again Including picture, this ergodic process can continue until finding including the web page element of picture, or continue to having traversed long-pressing Until all web page elements at click location；After traversing including the web page element of picture, in the actions menu of pop-up The operation associated option of picture is added, user selects corresponding option that can execute corresponding operating to the picture.As shown in connection with fig. 2 Example, the embodiment of the present invention can traverse the picture that display layer is located at bottom, and the operation associated option for providing the picture supplies User's selection is to execute further operating to picture.As it can be seen that compared with the existing technology for scheme, the webpage of the embodiment of the present invention Processing scheme at least has following advantage: (1) no matter the display layer of picture is to be in upper layer or bottom, can be to the picture Further operating is executed, the intelligence of picture processing is improved.(2) as shown in figure 4, in the embodiment of the present invention picture association behaviour It may include but be not limited to as option: saving picture, check picture, share picture；This provides richer interactive function.(3) Further, it if traversing picture, whether can identify in picture comprising graphic codes such as two dimensional code, bar codes；If packet Contain, the operation associated option of graphic code, such as " identification two dimensional code " will be added in the actions menu of pop-up, it is further rich Rich interactive function.

Based on foregoing description, the embodiment of the invention discloses a kind of web page processing methods, refer to Fig. 5, and this method can wrap Include following steps S101- step S103.

S101 obtains the position that the trigger event is related to if detecting trigger event in the target webpage currently shown Set coordinate.

Trigger event, which refers to, just to be held in the user of browsing objective webpage for the content of pages (such as picture) in target webpage Row trigger action and the event generated, its object is to promote terminal ejection operation menu, to be held to corresponding content of pages The further operation of row.It is understood that if terminal is to have the terminal of touch screen, such as touch-screen mobile phone, PDA (plate electricity Brain) etc., then trigger event can be the user's finger event that long-pressing clicking operation generates on a terminal screen, trigger event The position coordinates being related to can be the position coordinates of long-pressing clicking operation corresponding long-pressing clicking operation on the screen.If terminal Do not have touch screen, such as keyboard-type mobile phone, then trigger event can be user by cursor to the page in target webpage Content carries out the event that selected operation generates, and the position coordinates that trigger event is related to can be the position coordinates in selected range.

S102, according to display level relationship traversal search in the target webpage it is corresponding with the position coordinates at least One web page element, wherein the position coordinates are corresponding at least one described web page element to refer to the position coordinates position In within the scope of the display area of at least one web page element.

When needs are when same display area shows multiple web page elements, the display layer of these web page elements has upper and lower level Grade relationship, referring specifically to Fig. 2 or Fig. 4, table and picture in target webpage are located in same display area, the transparent covering of table It is shown on picture, that is to say, that the display hierarchical relationship between table element and picture are as follows: it is aobvious that table belongs to upper layer Show layer, and picture belongs to lower layer's display layer.If being shown under picture without other web page elements, then the affiliated display layer of picture It can be described as bottom display layer again.The ergodic process of this step can be with are as follows: is first traversed according to position coordinates to corresponding display area Display layer is the web page element of top layer；Stop traversing if the web page element includes picture；Otherwise, can be continued according to coordinate Traversal is located at the web page element of each display layer under the display layer, and judges whether the web page element traversed includes figure again Piece, this ergodic process can continue until finding including the web page element of picture, or continue to having traversed the display area Until interior all web page elements.

S103, if there is the web page element including picture at least one described web page element, output includes the pass of picture Join the actions menu of option of operation.

It, can be if there is the web page element including picture at least one web page element for finding of traversal The operation associated option of picture is added in actions menu, operation associated option herein can include but is not limited to: preservation picture, Check picture, share picture etc.；After actions menu is exported, user can choose the option in actions menu to Further operating is executed to picture.It is understood that if there is no packets at least one web page element that traversal is found The web page element of picture is included, then the operation associated option of non-picture can be added in actions menu, such as: if webpage is first Element is text element, then the options such as " duplication text ", " font size " can be added in actions menu；For another example: if net Page element is table element, then the options such as " selection duplication ", " table tool box " can be added in actions menu.

The web page processing method of the embodiment of the present invention can traverse in each display layer according to display hierarchical relationship and search figure Piece, and be not limited to only be searched in top layer's display layer, this makes no matter picture is in upper layer display layer or bottom Display layer can correspond to and export its operation associated option, in order to execute further operating to picture, improve picture processing Intelligence.

The embodiment of the invention discloses a kind of web page processing methods, refer to Fig. 6, and this method may include following steps S201- step S218.

S201, obtains the html document of the target webpage currently shown, and the html document includes multiple web page elements.

S202 carries out parsing to acquired html document and generates dom tree, and the dom tree includes multiple DOM nodes, institute It states DOM node and the web page element corresponds.

S203, according to the dom tree construct Render tree, the Render tree include multiple Render nodes, one Render node corresponds at least one DOM node.

In step S201-S203, when user uses the application programs such as the browser in terminal to open target webpage, The html document of target webpage just is pulled and be stored to terminal local memory space from network；HTML is a kind of system Make the standard language of webpage, the descriptive text that a html document is made of HTML command, HTML command can be with expository writing Word, picture, sound, table, link etc., content illustrated by these HTML commands are to be known as web page element.Dom tree defines Html document is expressed as tree construction by the standard method of access and operation html document, dom tree.Dom tree includes multiple DOM sections Point, DOM node and web page element correspond, and each DOM node possesses the attribute of corresponding web page element, and attribute herein can wrap It includes but is not limited to: text, picture etc., if certain DOM node includes text attribute, then, it is known that the corresponding webpage of the DOM node Element is text element；Similarly, if certain DOM node includes picture attribute, then, it is known that the corresponding web page element packet of the DOM node Include picture.

Render tree is a new tree construction based on dom tree building, is the basis of page layout and rendering mechanism. It is not one-to-one relationship between Render tree node and DOM tree node, but Render node is based on DOM node and builds It is vertical, therefore there are certain corresponding relationships for the two.In the specific implementation, Render node: (1) needle can be established in situation below To document (document) node of dom tree；(2) the visualization node being directed in dom tree, such as HTML node, BODY node, DIV node etc., and Render tree node, such as HEAD will not be established for non-visualization node, META, SCRIPT etc..It is above-mentioned The Render node that two kinds of situations are established is corresponding with DOM node.(3) need to establish anonymous Render section in some cases Point, the Render node do not correspond to any node in dom tree.One Render node possesses aobvious needed for layout and rendering Show attribute, display properties herein may include but be not limited to: size, color, display area etc..

S204 obtains the position that the trigger event is related to if detecting trigger event in the target webpage currently shown Set coordinate.

S205, traversing from the Render tree according to display hierarchical relationship and searching display area range includes the position Coordinate, and show the maximum first Render node of level parameter, wherein display level parameter is bigger, display layer present position More upper layer；Show that level parameter is smaller, bottom is got in display layer present position.

The first Render node is determined as target Render node by S206.

S207 searches target DOM node corresponding with target Render node from dom tree.

S208 judges that the target DOM node corresponds to whether web page element includes picture, is transferred to step if judging result is Rapid S212 terminates traversal.

S209, if judging result be it is no, according to display hierarchical relationship continue from the Render tree traversal search show Regional scope includes the position coordinates, and belongs to the 2nd Render node of the father of the first Render node.

S210 confirms whether the 2nd Render node is root node, is transferred to step S212 if being to be if confirmation result, Terminate traversal.

S211, if confirmation result is category that is no, not being traversed according to the order traversal of display level parameter from big to small Child and the 3rd Render node that is positive of level parameter in the 2nd Render node, and the 3rd Render is saved Point is redefined as target Render node；And return step S207.

In step S205-S212, the first Render node refers to display area where the position coordinates that trigger event is related to Interior display layer is located at the Render node of top layer, and the 2nd Render node is the father node of the first Render node, third Render node is the child nodes of the 2nd Render node.Ergodic process described in above-mentioned steps is specific as follows:

1. traversing the display layer in corresponding display area first according to position coordinates is located at the first Render of top layer section Point searches DOM node corresponding with the first Render node, parses the attribute information that the DOM node includes to judge the DOM Whether the corresponding web page element of node includes picture, herein it should be noted that showing this if certain web page element includes picture Web page element itself is a picture element or although the web page element is a non-picture element, but it includes foreground pictures Piece or background picture.

2. if it is determined that the corresponding web page element of the DOM node includes picture, then just stopping traversal, and in operation dish The operation associated option of picture is added in list, it may include but be not limited to following at least one option: check picture, save picture, Share picture.If it is determined that the corresponding web page element of the DOM node is non-picture, non-figure can be added in the actions menu of pop-up The operation associated option of piece, such as the options such as " duplication text ", " table tool box ", and continue to traverse further according to position coordinates The father node (the 2nd Render node) of first Render node, into 3..

3. the Render that the level parameter for traversing the 2nd Render node not being traversed first according to position coordinates is positive Child's tree node, corresponding DOM node can be searched by traversing each Render child nodes, and judge that each DOM node is corresponding Web page element whether include picture；Once traversing the web page element including picture, just terminate to traverse, and exporting includes picture Operation associated option actions menu；Otherwise, continue to traverse, into 4..

4. continuing the Render without level parameter for the 2nd Render node that traversal is not traversed according to position coordinates Child's tree node, corresponding DOM node can be searched by traversing each Render child nodes, and judge that each DOM node is corresponding Web page element whether include picture；Once traversing the web page element including picture, just terminate to traverse, and exporting includes picture Operation associated option actions menu；Otherwise, continue to traverse, into 5..

5. the Render being negative according to the level parameter that position coordinates continue the 2nd Render node that traversal is not traversed Child's tree node, corresponding DOM node can be searched by traversing each Render child nodes, and judge that each DOM node is corresponding Web page element whether include picture；Once traversing the web page element including picture, just terminate to traverse, and exporting includes picture Operation associated option actions menu；Otherwise, continue to traverse, into 6..

6. searching the corresponding DOM node of the 2nd Render, judge whether the corresponding web page element of the DOM node includes figure Piece；If it is just terminating to traverse, and export the actions menu of the operation associated option comprising picture；Otherwise, continue to traverse, enter ⑦。

7. judging whether the 2nd Render has been root Render node, if it is just terminating to traverse；Otherwise, continuation time The father node for going through the 2nd Render node, re-execute it is above-mentioned 3. -7..

The main thought of above-mentioned ergodic process is according to display hierarchical relationship, since the Render node of top layer time It goes through, until traversing picture or traversing bottom Render node (root node).In this way, no matter user requests to grasp The display layer of the picture of work be in upper layer or bottom, can recall actions menu in order to user to the picture execute into Single stepping improves the intelligence of picture processing.

S213 obtains the pass of the picture if there is the web page element including picture at least one described web page element Join option of operation, the operation associated option of the picture, which includes at least one of the following:, to be saved picture, checks picture, share picture.

S214 generates and exports the actions menu of the operation associated option comprising the picture.

In step S213-S214, if traversing picture, the just operation of operation associated option of the output comprising picture Menu, so that picture be further processed, promotes interactive intelligence then user can choose the option of the actions menu Property.

Whether S215 identifies in the picture comprising graphic code.

S216, the operation associated option if the operation associated option for obtaining graphic code comprising if, the graphic code at least wrap It includes: the graphic code in identification picture.

The operation associated option of the graphic code is added in the actions menu by S217.

In step S215-S217, for the picture traversed, skill can be identified using image recognition technology or graphic code Art identifies the picture, judges that graphic code herein can include but is not limited to: item whether comprising graphic code in the picture Shape code, two dimensional code etc.；If recognizing graphic code, the operation associated of graphic code may further be added in actions menu Option, including such as " two dimensional code in identification figure " option, to provide more abundant interactive function for user.

S218 is executed corresponding if detecting the selected event for option each in actions menu according to selected option Business processing.

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

(1) if user has selected the option of " saving picture " in actions menu, the aforementioned figure traversed is obtained Piece, and the picture is stored into the memory space of terminal.

(2) if user has selected the option of " checking picture " in actions menu, the picture of terminal can be called Reader is displayed in full screen the aforementioned picture traversed by Photo Viewer, to facilitate checking for user.

(3) if user has selected the option of " sharing picture " in actions menu, each society in terminal is obtained The entrance of application is handed over, and is shared the aforementioned picture traversed into the social application of terminal according to entrance obtained.Herein Social application may include but be not limited to: wechat, microblogging, QQ etc. application program.

It (4), can calling figure if user has selected the option of " graphic code in identification picture " in actions menu Shape code analytical tool parses the graphic code and obtains parsing result, judges whether the parsing result includes URL, if including URL The corresponding webpage of the URL is then accessed, browser jumps and shows accessed webpage at this time；If do not include URL so if it is straight The character string that output parsing obtains is connect to check for user.

The web page processing method of the embodiment of the present invention, no matter the display layer of picture can in upper layer or bottom The interactive function richer about picture is provided in order to execute further operating to the picture, improves the intelligence of picture processing Property, also, if figure can be added in the actions menu of pop-up comprising graphic codes such as two dimensional code, bar codes in picture The operation associated option of code, such as " identification two dimensional code ", further enrich interactive function；Further, according to user to behaviour Make selected option in menu and execute corresponding business processing, can more easily be used to picture, promote picture Utilization rate, promoted interactive experience.

Based on the embodiment of above-mentioned web page processing method, the embodiment of the invention also discloses a kind of page processor, The page processor can be a computer program (including program code), and the computer program can be run on such as To be used to execute web page processing method shown in Fig. 5-6 any embodiment in the terminals such as laptop, PDA, mobile phone；Actually answer In, which can be the application program that browser in terminal etc. is capable of displayed web page.Refer to figure 7, the page processor operation such as lower unit:

Coordinate acquiring unit 101, if obtaining the touching for detecting trigger event in the target webpage currently shown The position coordinates that hair event is related to；

Traversal Unit 102 is used to search according to display level relationship traversal in the target webpage and the position coordinates At least one corresponding web page element, wherein the position coordinates are corresponding at least one described web page element are as follows: described Position coordinates are located within the scope of the display area of at least one web page element；

Output unit 103, if for there is the web page element including picture, output packet at least one described web page element The actions menu of operation associated option containing picture.

As a kind of possible embodiment, the output unit 103 is specifically used for: if at least one described web page element It is middle to there is the web page element including picture, obtain the operation associated option of the picture, the operation associated option packet of the picture It includes at least one of following: saving picture, check picture, share picture；And it generates and exports the association behaviour comprising the picture Make the actions menu of option.

As alternatively possible embodiment, described device also runs such as lower unit:

Whether picture processing unit 104 includes for identification graphic code in the picture；

As another possible embodiment, described device also runs such as lower unit:

Pretreatment unit 105, for obtaining the html document of the target webpage currently shown, the html document packet Containing multiple web page elements；

As another possible embodiment, the Traversal Unit 102 is specifically used for:

The first Render node is determined as target Render node；

In the specific implementation, the Traversal Unit 102 is also used to:

As another possible embodiment, described device also runs such as lower unit:

Service Processing Unit 106, if for detecting the selected event for option each in actions menu, according to selecting Option execute corresponding business processing.

In the specific implementation, the Service Processing Unit is also used to:

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

According to one embodiment of present invention, the step S101-S103 that web page processing method shown in fig. 5 is related to can be Each unit in page processor as shown in Figure 7 is performed.For example, step S101-S103 shown in Fig. 1 can be with It is executed respectively by coordinate acquiring unit 101 shown in fig. 7, Traversal Unit 102 and output unit 103.

According to another embodiment of the invention, the step S201-S217 that web page processing method shown in fig. 6 is related to can be with It is that each unit in page processor as shown in Figure 7 is performed.For example, step S201-S203 shown in Fig. 6, S204, S205-S212, S213-S214, S215-S217, S218 can be respectively by pretreatment units 105 shown in fig. 7, seat Acquiring unit 101, Traversal Unit 102, output unit 103, picture processing unit 104 and Service Processing Unit 106 are marked to execute.

According to another embodiment of the invention, each unit in page processor shown in Fig. 7 can respectively or All one or several other units are merged into constitute or some (a little) unit therein can also be split as function again Smaller multiple units are constituted on energy, this may be implemented similarly to operate, and the technology without influencing the embodiment of the present invention is imitated The realization of fruit.Said units are logic-based function divisions, and in practical applications, the function of a unit can also be by multiple Unit is realized or the function of multiple units is realized by a unit.In other embodiments of the invention, Web Page Processing fills Setting also may include other units, and in practical applications, these functions can also be assisted to realize by other units, and can be by Multiple unit cooperations are realized.

It according to another embodiment of the invention, can be by including central processing unit (CPU), random access memory It is transported on the universal computing device of such as computer of the processing elements such as medium (RAM), read-only storage medium (ROM) and memory element Row is able to carry out computer program (including the program generation for each step that the web page processing method as shown in Fig. 5-Fig. 6 is related to Code), to construct page processor equipment as shown in Figure 7, and come the web page processing method of realizing the embodiment of the present invention. The computer program can be recorded in such as computer readable recording medium, and be loaded by computer readable recording medium In above-mentioned calculating equipment, and run wherein.

The page processor of the embodiment of the present invention, no matter the display layer of picture can in upper layer or bottom The interactive function richer about picture is provided in order to execute further operating to the picture, improves the intelligence of picture processing Property, also, if figure can be added in the actions menu of pop-up comprising graphic codes such as two dimensional code, bar codes in picture The operation associated option of code, such as " identification two dimensional code ", further enrich interactive function；Further, according to user to behaviour Make selected option in menu and execute corresponding business processing, can more easily be used to picture, promote picture Utilization rate, promoted interactive experience.

Web page processing method and page processor shown in based on the above embodiment, the embodiment of the invention also provides one Kind terminal, the terminal can be used for executing the corresponding steps of method flow shown in above-mentioned Fig. 5-Fig. 6.In the specific implementation, the present invention is real Terminal described in example is applied including but not limited to such as with touch sensitive surface (for example, touch-screen display and/or touch Plate) mobile phone, laptop computer or tablet computer etc other portable devices.Fig. 8 is referred to, the terminal Internal structure includes at least processor, user interface and computer storage medium.Wherein, the processor in terminal, user interface And computer storage medium can be connected by bus or other modes, to be connected by bus in Fig. 8 shown in the embodiment of the present invention It is connected in example.

User interface is the medium realizing user and terminal and interacting with information exchange, and concrete embodiment may include using Display screen (Display) in output and the keyboard (Keyboard) for input etc., it should be noted that key herein Disk both can be physical keyboard, or touch screen dummy keyboard can also be keyboard of the entity in conjunction with touch screen virtualphase.So And, it should be appreciated that user interface can also include one or more of the other physical User of such as mouse and/or control-rod Interface equipment.Processor (or CPU (Central Processing Unit, central processing unit)) is the calculating core of terminal And control core, it is adapted for carrying out one or one or more instruction, is particularly adapted to load and execute one or one or more refers to It enables realizing correlation method process or corresponding function；Such as: CPU can be used for parsing user to switching on and shutting down transmitted by terminal Instruction, and controlling terminal carries out switching on and shutting down operation；For another example: CPU can transmit all kinds of interaction datas between terminal inner structure, Etc..Computer storage medium (Memory) is the memory device in terminal, for storing program and data.It is understood that It is that computer storage medium herein both may include the built-in storage medium of terminal, naturally it is also possible to be supported including terminal Expansion storage medium.Computer storage medium provides memory space, which stores the operating system of terminal.And And also house and be suitable for by one or more than one instructions that processor loads and executes in the memory space, these refer to Order can be one or more computer program (including program code).It should be noted that computer herein is deposited Storage media can be high speed RAM memory, be also possible to non-labile memory (non-volatile memory), such as At least one magnetic disk storage；It optionally can also be that at least one is located remotely from the computer storage medium of aforementioned processor.

Also it should be strongly noted that terminal supports various application programs, such as one of the following or multiple: drawing is answered Application program, disk imprinting application program, electrical form are created with program, demonstration applications, word-processing application, website Application program, game application, telephony application, videoconference application, email application, instant message Transmitting-receiving application program takes exercise and application program, photo management application program, digital camera application program, digital camera is supported to answer With program, web-browsing application program, digital music player application and/or video frequency player application program.It can be with At least one public physical user interface of such as touch sensitive surface can be used in the various application programs executed at the terminal Equipment.Adjustment and/or one or more of touch sensitive surface can be changed among applications and/or in corresponding application programs The corresponding information shown in a function and terminal.In this way, the public physical structure (for example, touch sensitive surface) of terminal can be with Support the various application programs for the user interface for having intuitive and transparent for a user.

In embodiments of the present invention, processor load and execute one stored in computer storage medium or one or more Instruction, to realize the corresponding steps of method flow shown in above-mentioned Fig. 5-Fig. 6；In the specific implementation, one in computer storage medium Item or one or more instruction are loaded by processor and execute following steps:

It whether identifies in the picture comprising graphic code；

The first Render node is determined as target Render node；

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

Processor is adapted for carrying out one or one or more instruction；And

It whether identifies in the picture comprising graphic code；

The first Render node is determined as target Render node；

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

The terminal and computer storage medium of the embodiment of the present invention, no matter the display layer of picture is in upper layer or bottom Layer is capable of providing the interactive function richer about picture in order to execute further operating to the picture, improves picture The intelligence of processing, also, if include the graphic codes such as two dimensional code, bar code, actions menu of the meeting in pop-up in picture The operation associated option of middle addition graphic code, such as " identification two dimensional code ", further enrich interactive function；Further, root Corresponding business processing is executed to option selected in actions menu according to user, benefit easily more can be subject to picture With promoting the utilization rate of picture, promote interactive experience.

It should be appreciated that ought use in this specification and in the appended claims, term " includes " and "comprising" instruction Described feature, entirety, step, operation, the presence of element and/or component, but one or more of the other feature, whole is not precluded Body, step, operation, the presence or addition of element, component and/or its set.

It is also understood that mesh of the term used in this description of the invention merely for the sake of description specific embodiment And be not intended to limit the present invention.As description of the invention and it is used in the attached claims, unless on Other situations are hereafter clearly indicated, otherwise " one " of singular, "one" and "the" are intended to include plural form.

It will be further appreciated that the term "and/or" used in description of the invention and the appended claims is Refer to any combination and all possible combinations of one or more of associated item listed, and including these combinations.

As used in this specification and in the appended claims, term " if " can be according to context quilt Be construed to " when ... " or " once " or " in response to determination " or " in response to detecting ".Similarly, phrase " if it is determined that " or " if detecting [described condition or event] " can be interpreted to mean according to context " once it is determined that " or " in response to true It is fixed " or " once detecting [described condition or event] " or " in response to detecting [described condition or event] ".

In the description of this specification, reference term " one embodiment ", " some embodiments ", " example ", " specifically show The description of example " or " some examples " etc. means specific features, structure, material or spy described in conjunction with this embodiment or example Point is included at least one embodiment or example of the invention.In the present specification, schematic expression of the above terms are not It must be directed to identical embodiment or example.Moreover, particular features, structures, materials, or characteristics described can be in office It can be combined in any suitable manner in one or more embodiment or examples.In addition, without conflicting with each other, the skill of this field Art personnel can tie the feature of different embodiments or examples described in this specification and different embodiments or examples It closes and combines.

In addition, term " first ", " second " are used for descriptive purposes only and cannot be understood as indicating or suggesting relative importance Or implicitly indicate the quantity of indicated technical characteristic.Define " first " as a result, the feature of " second " can be expressed or Implicitly include at least one this feature.In the description of the present invention, the meaning of " plurality " is at least two, such as two, three It is a etc., unless otherwise specifically defined.

Any process described otherwise above or method description are construed as in flow chart or herein, and expression includes It is one or more for realizing specific logical function or process the step of executable instruction code module, segment or portion Point, and the range of embodiments of the present invention includes other realization, wherein sequence shown or discussed, packet can not be pressed Include according to related function by it is basic simultaneously in the way of or in the opposite order, Lai Zhihang function, this should be by reality of the invention A person of ordinary skill in the field is applied to be understood.

It should be appreciated that each section of the invention can be realized with hardware, software, firmware or their combination.Above-mentioned In embodiment, software that multiple steps or method can be executed in memory and by suitable instruction execution system with storage Or firmware is realized.It, and in another embodiment, can be under well known in the art for example, if realized with hardware Any one of column technology or their combination are realized: having a logic gates for realizing logic function to data-signal Discrete logic, with suitable combinational logic gate circuit specific integrated circuit, programmable gate array (PGA), scene Programmable gate array (FPGA) etc..It is handled in addition, each functional unit in each embodiment of the present invention can integrate at one In module, it is also possible to each unit and physically exists alone, can also be integrated in two or more units in a module. Above-mentioned integrated module both can take the form of hardware realization, can also be realized in the form of software function module.It is described If integrated module is realized and when sold or used as an independent product in the form of software function module, also can store In a computer readable storage medium.

The above disclosure is only the preferred embodiments of the present invention, cannot limit the right model of the present invention with this certainly It encloses, therefore equivalent changes made in accordance with the claims of the present invention, is still within the scope of the present invention.

Claims

1. a kind of web page processing method characterized by comprising

If detecting trigger event in the target webpage currently shown, the position coordinates that the trigger event is related to are obtained；

At least one webpage corresponding with the position coordinates in the target webpage is searched according to display level relationship traversal Element, wherein the position coordinates are corresponding at least one described web page element to refer to the position coordinates described in extremely Within the scope of the display area of a few web page element；

If there is the web page element including picture at least one described web page element, output includes the operation associated option of picture Actions menu.

2. the method as described in claim 1, which is characterized in that if existing at least one described web page element includes figure The web page element of piece, the actions menu of operation associated option of the output comprising picture, comprising:

If at least one described web page element has the web page element including picture, the operation associated option of the picture is obtained, The operation associated option of the picture, which includes at least one of the following:, to be saved picture, checks picture, shares picture；

3. method according to claim 2, which is characterized in that further include:

It whether identifies in the picture comprising graphic code；

Operation associated option if the operation associated option for obtaining graphic code comprising if, the graphic code includes at least: identification figure Graphic code in piece；

4. the method according to claim 1, which is characterized in that further include:

Parsing is carried out to acquired html document and generates dom tree, the dom tree includes multiple DOM nodes, the DOM node It is corresponded with the web page element；

Render tree is constructed according to the dom tree, the Render tree includes multiple Render nodes, a Render node pair Answer at least one DOM node.

5. method as claimed in claim 4, which is characterized in that described to search the target network according to display level relationship traversal At least one web page element corresponding with the position coordinates in page, comprising:

Traversing from the Render tree according to display hierarchical relationship and searching display area range includes the position coordinates, and aobvious Show the maximum first Render node of level parameter, wherein display level parameter is bigger, and upper layer is got in display layer present position；It is aobvious Show that level parameter is smaller, bottom is got in display layer present position；

The first Render node is determined as target Render node；

6. method as claimed in claim 5, which is characterized in that described to search the target network according to display level relationship traversal At least one web page element corresponding with the position coordinates in page, further includes:

If judging result be it is no, according to display hierarchical relationship continue from the Render tree traversal lookup display area range packet The position coordinates are included, and belong to the 2nd Render node of the father of the first Render node；

If confirmation result be it is no, according to showing that level parameter order traversal from big to small was not traversed belong to described second The 3rd Render node that the child of Render node and level parameter are positive, and the 3rd Render node is redefined For target Render node.

7. method as claimed in claim 3, which is characterized in that further include:

If detecting the selected event for option each in actions menu, executed at corresponding business according to selected option Reason.

8. the method for claim 7, which is characterized in that if described detect for the selected of option each in actions menu Event executes corresponding business processing according to selected option, comprising:

9. method according to claim 8, which is characterized in that if described detect for the selected of option each in actions menu Event executes corresponding business processing according to selected option, further includes:

The output string if the parsing result is character string；

If the parsing result is URL, the corresponding webpage of the URL is accessed.

10. a kind of page processor characterized by comprising

Coordinate acquiring unit, if obtaining the trigger event for detecting trigger event in the target webpage currently shown The position coordinates being related to；

Traversal Unit, it is corresponding with the position coordinates in the target webpage for being searched according to display level relationship traversal At least one web page element, wherein the position coordinates are corresponding at least one described web page element are as follows: the position coordinates Within the scope of the display area of at least one web page element；

Output unit, if for there is the web page element including picture at least one described web page element, output includes picture Operation associated option actions menu.

11. a kind of computer storage medium, which is characterized in that the computer storage medium is stored with one or one or more refers to Enable, described one or one or more instruction be suitable for loaded by processor and executed such as the described in any item webpages of claim 1-9 Processing method.

12. a kind of terminal characterized by comprising

Processor is adapted for carrying out one or one or more instruction；And

Computer storage medium, the computer storage medium is stored with one or one or more is instructed, and described one or one Above instructions are suitable for being loaded by the processor and being executed such as the described in any item web page processing methods of claim 1-9.