Webpage display method and device

• US 10,339,209 B2
• Filed: 05/27/2016
• Issued: 07/02/2019
• Est. Priority Date: 11/29/2013
• Status: Active Grant

• Current Assignee: Alibaba Group Holding Ltd.
• Original Assignee: Uc Mobile Co., Ltd. (Alibaba Group Holding Ltd.)
• Inventors: Liang, Jie, Zeng, Jinhe
• Primary Examiner(s): Cortes, Howard
• Application Number:
  US15/167,819
• Publication Number:
  US 20160275054A1
• Time in Patent Office: 1,131 Days
• Field of Search: None
• CPC Class Codes: G06F 16/986 Document structures and storage, e.g. HTML extensions
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
• CPC Class Codes: G06F 40/221 Parsing markup language streams streaming G06F40/149

Abstract

A webpage display method includes: acquiring source code of a webpage; parsing the source code to form tree-shaped nodes; composing the tree-shaped nodes; determining a primary container according to the composed tree-shaped nodes; determining at least one secondary container in the primary container; adjusting the area of the secondary container; and drawing the adjusted secondary container and displaying the elements of the adjusted secondary containers on the screen.

Claims

1. A webpage display method, the method comprising:

acquiring source code of a webpage to be displayed;

parsing the source code to form tree-shaped nodes;

composing the tree-shaped nodes according to style specifications of the source code;

determining at least a primary container according to the composed tree-shaped nodes, wherein the determining a primary container according to the composed tree-shaped nodes comprises;

judging whether a parent node of the current node is the primary container;

upon judging that the parent node of the current node is the primary container, judging whether the width of the current node is greater than or equal to a first percentage of the width of a root node and greater than or equal to a second percentage of the width of the parent node of the current node;

upon judging that the width of the current node is greater than or equal to the first percentage of the width of the root node and greater than or equal to the second percentage of the width of the parent node of the current node, judging whether the height of the current node is a fixed value; and

upon judging that the height of the current node is not the fixed value, determining the current node as the primary container;

determining a plurality of secondary containers in the primary container, wherein each of the secondary containers contains some of elements of the webpage to be displayed;

determining an area of each of the secondary containers in the primary container and a threshold value associated with areas of the secondary containers;

adjusting the area of one or more of the secondary containers that is greater than the threshold value to be scaled up and the area of other one or more of the secondary containers to be scaled down; and

displaying the elements of the webpage to be displayed which are contained in the adjusted secondary containers on a screen of a terminal.

2. The method according to claim 1, wherein the threshold value is an average value of the areas of the plurality of secondary containers, and the adjusting the areas of the secondary containers comprises:

comparing the area of each of the plurality of secondary containers with the average value; and

with respect to the area of at least one of the plurality of secondary containers that is greater than the average value, scaling up the area of the at least one of the plurality of secondary containers according to a preset scale factor k, wherein, the k is greater than 1, and correspondingly scaling down the area of other one or more of the plurality of secondary containers to keep the total width of the plurality of secondary containers unchanged.

3. The method according to claim 1, wherein the method further comprises:

receiving a switchover command to scale up and display content of a target secondary container of the plurality of secondary containers;

generating a scaling factor u of the target secondary container;

adjusting the area of the target secondary container u times, and correspondingly adjusting the area of one or more other secondary containers of the plurality of secondary containers to keep the total width of the plurality of secondary containers unchanged; and

displaying the elements of the adjusted secondary containers on the screen of the terminal.

4. The method according to claim 3, wherein the generating a scaling factor of the target secondary container comprises:

comparing the width of the screen of the terminal with the width of the primary container, and choosing the minimum value of the two;

multiplying the minimum value with the preset scale factor k, and then dividing the result of the multiplication calculation by the width of the target secondary container, to obtain a first scaling factor u1; and

dividing a height value of the primary container by a height value of the target secondary container, to obtain a second scaling factor u2; and

determining the minimum value in the u1 and the u2 as the scaling factor u.

5. A webpage display device, the device comprising:

one or more processors; and

memory storing instructions, when executed by the one or more processors, configured to cause the one or more processors to;

acquire source code of a webpage to be displayed;

parse the source code to form tree-shaped nodes;

compose the tree-shaped nodes according to style specifications of the source code;

locate at least a primary container according to the tree-shaped nodes, wherein the determining a primary container according to the composed tree-shaped nodes comprises;

judging whether a parent node of the current node is the primary container;

upon judging that the parent node of the current node is the primary container, judging whether the width of the current node is greater than or equal to a first percentage of the width of a root node and greater than or equal to a second percentage of the width of the parent node of the current node;

upon judging that the width of the current node is greater than or equal to the first percentage of the width of the root node and greater than or equal to the second percentage of the width of the parent node of the current node, judging whether the height of the current node is a fixed value; and

upon judging that the height of the current node is not the fixed value, determining the current node as the primary container;

locate a plurality of secondary containers in the primary container, wherein each of the secondary containers contains some of elements of the webpage to be displayed;

determine an area of each of the secondary containers in the primary container and a threshold value associated with areas of the secondary containers;

adjust the area of one or more of the secondary containers that is greater than the threshold value to be scaled up and the area of other one or more of the secondary containers to be scaled down; and

display the elements of the webpage to be displayed which are contained in the adjusted secondary containers on a screen of a terminal.

6. The device according to claim 5, wherein the threshold value is an average value of the areas of the plurality of secondary containers, and the instructions are further configured to cause the one or more processors to:

compare the area of each of the plurality of secondary containers with the average value; and

with respect to the area of at least one of the plurality of secondary containers that is greater than the average value, scale up the area of the at least one of the secondary containers according to a preset scale factor k, wherein, the k is greater than 1, and correspondingly scale the area of other one or more of the plurality of secondary containers to keep the total width of the plurality of secondary containers unchanged.

7. The device according to claim 5, wherein the instructions are further configured to cause the one or more processors to:

receive a switchover command to scale up and display content of a target secondary container of the plurality of secondary containers;

generate a scaling factor u of the target secondary container;

adjust the area of the target secondary container u times, and correspondingly adjust the area of one or more other secondary containers of the plurality of secondary containers to keep the total width of the plurality of secondary containers unchanged; and

display the elements of the adjusted secondary containers on the screen of the terminal.

8. The device according to claim 7, wherein the instructions are further configured to cause the one or more processors to:

compare the width of the screen of the terminal with the width of the primary container, and choose the minimum value of the two;

multiply the minimum value with the preset scale factor k, and then divide the result of the multiplication calculation by the width of the target secondary containers, to obtain a first scaling factor u1; and

divide a height value of the primary container by a height value of the target secondary container, to obtain a second scaling factor u2; and

determine the minimum value in the u1 and u2 as the scaling factor u.

9. A non-transitory computer readable medium with processor executable program code, when executed, the program code causing a processor to execute the following steps of:

acquiring source code of a webpage to be displayed;

parsing the source code to form tree-shaped nodes;

composing the tree-shaped nodes according to style specifications of the source code;

determining at least a primary container according to the composed tree-shaped nodes, wherein the determining a primary container according to the composed tree-shaped nodes comprises;

judging whether a parent node of the current node is the primary container;

upon judging that the parent node of the current node is the primary container, judging whether the width of the current node is greater than or equal to a first percentage of the width of a root node and greater than or equal to a second percentage of the width of the parent node of the current node;

upon judging that the width of the current node is greater than or equal to the first percentage of the width of the root node and greater than or equal to the second percentage of the width of the parent node of the current node, judging whether the height of the current node is a fixed value; and

upon judging that the height of the current node is not the fixed value, determining the current node as the primary container;

determining a plurality of secondary containers in the primary container, wherein each of the secondary containers contains some of elements of the webpage to be displayed;

determining an area of each of the secondary containers in the primary container and a threshold value associated with areas of the secondary containers;

adjusting the area of one or more of the secondary containers that is greater than the threshold value to be scaled up and the area of other one or more of the secondary containers to be scaled down; and

displaying the elements of the webpage to be displayed which are contained in the adjusted secondary containers on a screen of a terminal.

10. A webpage display method, the method comprising:

composing tree-shaped nodes according to style specifications of source code of a webpage to be displayed, wherein the tree-shaped nodes are formed after the source code is parsed;

determining at least a primary container and a plurality of secondary containers in the primary container according to the composed tree-shaped nodes, wherein each secondary container contains some elements in the webpage to be displayed, wherein the determining at least one secondary container contained in the primary container comprises;

judging whether a parent node of the current node is the primary container;

upon judging that the parent node of the current node is the primary container, judging whether the width of the current node belongs to a preset value range, wherein two endpoint values of the preset value range are respectively a product of the width of the parent node of the current node and a third percentage and a product of the width of the parent node of the current node and a fourth percentage, and the third percentage is smaller than the fourth percentage; and

upon judging that the width belongs to the preset value range, determining the current node as the secondary container;

determining an area of each of the secondary containers in the primary container and a threshold value associated with areas of the secondary containers;

adjusting the area of one or more of the secondary containers that is greater than the threshold value to be scaled up and the area of other one or more of the secondary containers to be scaled down; and

displaying the elements of the webpage to be displayed which are contained in the adjusted secondary containers on a screen of a terminal.

11. The method according to claim 10, wherein the determining a primary container according to the composed tree-shaped nodes comprises:

finding a node in the tree-shaped nodes of which parent node null and the height of the node is not a fixed value; and

determining the found node as the primary container.

12. The method according to claim 10, wherein the determining a primary container according to the composed tree-shaped nodes comprises:

judging whether a parent node of the current node is the primary container;

upon judging that the parent node of the current node is the primary container, judging whether the width of the current node is greater than or equal to a first percentage of the width of a root node and greater than or equal to a second percentage of the width of the parent node of the current node;

upon judging that the width of the current node is greater than or equal to the first percentage of the width of the root node and greater than or equal to the second percentage of the width of the parent node of the current node, judging whether the height of the current node is a fixed value; and

upon judging that the height of the current node is not the fixed value, determining the current node as the primary container.

13. The method according to claim 10, wherein the threshold value is an average value of the areas of the plurality of secondary containers, and the adjusting the areas of the secondary containers comprises:

comparing the area of each of the plurality of secondary containers with the average value;

with respect to the area of at least one of the plurality of secondary containers that is greater than the average value, scaling up the area of the at least one of the plurality of secondary containers according to a preset scale factor k, wherein k is greater than 1, and scaling down the area of other one or more of the plurality of secondary containers to keep the total width of the plurality of secondary containers unchanged.

14. The method according to claim 13, wherein k is determined by a frequency at which each of the plurality of secondary containers is browsed.

15. The method according to claim 13, wherein the determining the area of each of the secondary containers comprises one of the following steps:

calculating a product of the width of the secondary container and the height of the secondary container, and acquiring the area of the secondary container;

or,

respectively calculating the area of each type of webpage elements in the secondary container, and adding the areas of various types of webpage elements to calculate the area of the secondary container.