CN104217037A

CN104217037A - Method and device for displaying web page in mobile terminal

Info

Publication number: CN104217037A
Application number: CN201410525792.4A
Authority: CN
Inventors: 孙涛
Original assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Current assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Priority date: 2012-04-23
Filing date: 2012-04-23
Publication date: 2014-12-17
Anticipated expiration: 2032-04-23
Also published as: CN104217037B

Abstract

The invention discloses a method and a device for displaying a web page in a mobile terminal. The method for displaying the web page in the mobile terminal includes that receiving a request for visiting the web page through the mobile terminal, and acquiring resource corresponding to the web page from a web page server according to the request; analyzing page elements in the page resource, judging whether a label corresponding to the current page element influences type setting when analyzing, if the label influences the type setting, processing the label which influences the type setting; structuring nodes of a render tree according to processed labels, judging whether there is a cascading style sheet CSS attribute which influences the type setting, if so, removing the CSS attribute which influences the type setting, and drawing the web page content according to the structured render tree and displaying. The method and device for displaying the web page in the mobile terminal are capable of keeping some due screen effects in a certain degree so as to guarantee the web page display vitality.

Description

Method and device for displaying webpage in mobile terminal

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for displaying a web page in a mobile terminal.

Background

With the rapid development of science and technology, mobile terminals (such as mobile phones) have strong processing capabilities, and mobile terminals are changing from simple communication tools to a comprehensive information processing platform, and especially browsing web pages by using mobile terminals have become important ways for people to acquire information.

Initially, in order to browse a web page on a mobile terminal, a special Protocol, WAP (Wireless Application Protocol), was used, according to which a web page creator needs to create a web page dedicated to browsing on a mobile terminal (such a web page is typically created using the WML (Wireless Markup language) language, and thus may be generally referred to simply as a WML web page). However, with the continuous increase of user demand and the development of technology, it is also possible to browse a general HTML (Hypertext Markup Language) web page, that is, a web page made based on the HTML Language commonly used in the internet, on a mobile terminal. However, such HTML pages are generally designed for conventional devices with large display screens (e.g. desktop computers, notebook computers, etc.), and for mobile terminals (e.g. mobile phones, etc.), because the display screens are relatively small in size, the HTML pages are generally processed in advance to be converted into WML-like web pages for normal display in the mobile terminals. In the process of converting the HTML webpage into the WML webpage, the page elements need to be subjected to narrow-row adaptation processing, that is, the page elements in the HTML webpage need to be typeset again according to the screen width of the mobile terminal, so that the number of the page elements displayed in each row is reduced, and thus when the page elements are displayed on a small display screen, the font is not too small, and meanwhile, the phenomenon of a scroll bar in the horizontal direction is avoided, and the browsing of a user is facilitated. However, in the prior art, in the process of narrow-line arrangement of pages, in order to avoid the phenomena of content overflow of a mobile phone screen, screen blank, overlapping display, and the like, the original CSS style designed for some page elements in the HTML webpage is generally removed. However, the web page is not displayed vividly, and some due picture effects disappear.

Disclosure of Invention

The invention provides a method and a device for displaying a webpage in a mobile terminal, which can keep some required picture effects to a certain extent and ensure the vividness of webpage display.

The invention provides the following scheme:

a method of displaying a web page in a mobile terminal, comprising:

receiving a request for accessing a webpage through a mobile terminal, and acquiring resources corresponding to the webpage from a webpage server according to the request;

analyzing page elements contained in the webpage resources, judging whether the label corresponding to the current page element influences the typesetting or not in the analyzing process, and if the label influencing the typesetting exists, processing the label influencing the typesetting;

and constructing nodes of the rendering tree according to the processed labels, judging whether CSS attributes of the cascading style sheet influencing the typesetting exist, if the CSS attributes of the cascading style sheet influencing the typesetting exist, removing the CSS attributes influencing the typesetting, and then drawing and displaying the webpage content according to the constructed rendering tree.

Wherein, the processing the label affecting the typesetting comprises:

and removing the label influencing the typesetting so as to treat the page element corresponding to the label as a common text when constructing the node of the rendering tree according to the processed label.

Wherein, the removing the label influencing the typesetting comprises the following steps:

and if the currently resolved page element is a common scroll element, a subscript element or a superscript element, removing the label of the page element.

Wherein, the processing the label affecting the typesetting comprises:

and removing the current page element so as not to generate the node corresponding to the page element when the node of the rendering tree is constructed according to the processed label.

Wherein the removing the current page element comprises:

if the page element currently being resolved is a normal scroll element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, then such page element is removed.

Wherein, the processing the label affecting the typesetting comprises:

modifying CSS attribute values defined in the labels influencing the typesetting;

the constructing nodes of the rendering tree according to the processed tags includes:

and assigning the CSS attribute of the node corresponding to the page element in the rendering tree by using the modified CSS attribute value.

Wherein, the modifying the CSS attribute values defined in the labels affecting the typesetting comprises:

when the currently analyzed page element is a table element, modifying the CSS values of the table element and the inline elements of the table element so that the table element can be automatically changed;

or,

when the currently analyzed page element is a form input control, a drop-down menu/list, a text field or an inline frame element and an absolute numerical value representing the width of the currently analyzed page element exists, modifying the absolute numerical value into a relative numerical value;

or,

when the currently analyzed page element is an image element, comparing the width value of the image element with the screen width value of the mobile terminal, and if the width value is larger than the screen width value of the mobile terminal, reducing the width value in an equal proportion according to the proportion between the width value and the screen width of the mobile terminal; if the width value is smaller than the screen width value of the mobile terminal and is larger than one half of the screen width value of the mobile terminal, modifying the position attribute value of the image element to be displayed in the middle;

or,

if the page element currently being analyzed is a hyperlink element and the hyperlink element contains an img label and a text, adding a boundary attribute value to the img label;

or,

and if the currently analyzed page element is a partition element, adding a boundary attribute value to the partition element.

Wherein, the removing the CSS attribute which influences the typesetting and is contained in the rendering tree node comprises the following steps:

removing the absolute attribute of width and height, the positioning attribute, the background image attribute and/or the attribute related to text display contained in the current page element being analyzed;

and/or the presence of a gas in the gas,

and removing the border and the filling attribute in the element box model.

Wherein, if the background image of the currently parsed page element is removed, the method further comprises:

and modifying the color attribute value of the text contained in the page element to ensure the identification degree of the text after the background picture is removed.

Wherein the modifying the color attribute value of the text contained in the page element comprises:

if the text color in the page element is white, setting the text color as a default color of the webpage text;

or,

if the text color in the webpage element is not white and the background color of the element is not transparent, setting the text color as the color of the background color of the element with a preset color difference value;

or,

and if the text color in the webpage element is not white and the background color of the element is transparent, setting the text color as a color with a preset color difference value with the background color of the main element of the webpage.

An apparatus for displaying a web page in a mobile terminal, comprising:

the resource acquisition unit is used for receiving a request for accessing a webpage through a mobile terminal and acquiring a resource corresponding to the webpage from a webpage server according to the request;

the label processing unit is used for analyzing the page elements contained in the webpage resources, judging whether the label corresponding to the current page element influences the typesetting or not in the analyzing process, and processing the label influencing the typesetting if the label influencing the typesetting exists;

and the rendering tree construction unit is used for constructing nodes of the rendering tree according to the processed labels, judging whether CSS attributes influencing the typesetting exist in the cascading style sheet, if CSS attributes influencing the typesetting exist in the cascading style sheet, removing the CSS attributes influencing the typesetting, and then drawing and displaying the webpage content according to the constructed rendering tree.

Wherein the tag processing unit includes:

and the label removing subunit is used for removing the label influencing the typesetting so as to treat the page element corresponding to the label as the common text when the node of the rendering tree is constructed according to the processed label.

Wherein the label removal subunit is specifically configured to: and if the currently resolved page element is a common scroll element, a subscript element or a superscript element, removing the label of the page element.

Wherein the tag processing unit includes:

and the element removing subunit is used for removing the current page elements so as not to generate nodes corresponding to the page elements when nodes of the rendering tree are constructed according to the processed labels.

Wherein the element removal subunit is specifically configured to: if the page element currently being resolved is a normal scroll element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, then such page element is removed.

Wherein the tag processing unit includes:

an attribute value modification subunit, configured to modify CSS attribute values defined in the tags that affect the typesetting;

the render tree construction unit is further configured to:

Wherein the attribute value modification subunit includes:

the first modifying subunit is configured to, when the currently parsed page element is a table element, modify the CSS values of the table element and an inline element of the table element, so that the table element can be automatically rewound;

or,

a second modifying subunit, configured to modify, when the currently-being-parsed page element is a form input control, a pull-down menu/list, a text field, or an inline frame element, and there is an absolute numerical value indicating a width thereof, the absolute numerical value to a relative numerical value;

or,

a third modifying subunit, configured to, when the currently parsed page element is an image element, compare a width value of the image element with a screen width value of the mobile terminal, and if the width value is greater than the screen width value of the mobile terminal, reduce the width value in an equal proportion according to a ratio between the width value and the screen width of the mobile terminal; if the width value is smaller than the screen width value of the mobile terminal and is larger than one half of the screen width value of the mobile terminal, modifying the position attribute value of the image element to be displayed in the middle;

or,

a fourth modification subunit, configured to add a boundary attribute value to the img tag if the page element currently being parsed is a hyperlink element and the hyperlink element contains the img tag and a text;

or,

and a fifth modifying subunit, configured to add a boundary attribute value to the partition element if the page element currently being parsed is the partition element.

Wherein the rendering tree construction unit includes:

a first attribute removing subunit, configured to remove an absolute attribute of a width and a height, a positioning attribute, a background map attribute, and/or an attribute related to text display, which are included in the page element currently being parsed;

and/or the presence of a gas in the gas,

and the second attribute removing subunit is used for removing the border and the filling attribute in the element box model.

Wherein, still include:

and the text color modifying unit is used for modifying the color attribute value of the text contained in the page element if the background image of the currently analyzed page element is removed so as to ensure the identification degree of the text after the background image is removed.

Wherein the text color modification unit includes:

the first color modification subunit is used for setting the text color as a default color of the webpage text if the text color in the page element is white;

or,

the second color modification subunit is used for setting the text color as the color of the element background color with a preset color difference value if the text color in the webpage element is not white and the element background color is not transparent;

or,

and the third color modifying subunit is used for setting the text color as the color with the preset color difference value with the background color of the main element of the webpage if the text color in the webpage element is not white and the background color of the element is transparent.

According to the specific embodiment provided by the invention, the following technical effects are achieved: if the label corresponding to the current page element affects the typesetting, processing the label affecting the typesetting to eliminate the influence of the label on the typesetting, and avoiding the influence of the page element corresponding to the label on the typesetting through the processing of the label; and constructing nodes of the rendering tree according to the processed tags, and if CSS attributes influencing the typesetting exist in the cascading style sheet, removing the CSS attributes influencing the typesetting so as to draw and display the webpage content in the mobile terminal according to the constructed rendering tree, and removing the CSS attributes influencing the typesetting, so that the phenomenon that the display effect of the page elements influences the typesetting due to the setting of the CSS attributes can be avoided. The processing of the tags comprises modification of CSS attributes corresponding to the tags, for example, the absolute attribute of the width of the tags is modified into a relative attribute, so that the webpage layout can adapt to different clients according to the screen size of the clients. Meanwhile, in the embodiment of the invention, only the CSS attribute of the label influencing the typesetting is processed, and the CSS attribute influencing the typesetting is removed, but all CSS styles designed for the page elements are not required to be removed, so that some required picture effects can be reserved to a certain extent, and the vividness of webpage display is ensured.

Drawings

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

FIG. 1 is a flow chart of a method provided by an embodiment of the present invention;

FIG. 2 is a schematic diagram of a first apparatus provided by an embodiment of the present invention;

FIG. 3 is a schematic diagram of a second apparatus provided by an embodiment of the present invention;

FIG. 4 is a schematic diagram of a third apparatus provided by an embodiment of the present invention;

fig. 5 is a schematic diagram of a fourth apparatus provided in the embodiment of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments that can be derived by one of ordinary skill in the art from the embodiments given herein are intended to be within the scope of the present invention.

S101: receiving a request for accessing a webpage through a mobile terminal, and acquiring resources corresponding to the webpage from a webpage server according to the request;

first, it should be noted that current web browsers are roughly divided into two types: the client is directly embedded in a browser and a C/S (client/proxy) architecture browser. The method comprises the steps that the web page is directly accessed through a browser, namely, after the browser receives a request of a user for accessing a certain web page, the request is directly sent to a web page server, web page data returned by the web page server are obtained, and then the web page data are analyzed and rendered locally and finally displayed; the browser is divided into a client and a server, wherein the client runs on a user terminal, the server runs on a remote server, the client firstly sends a request to the server after receiving the request of the user for accessing a webpage, then the server accesses the webpage server, the server analyzes and renders calculation after acquiring webpage data returned by the webpage server, then the calculation result is sent to the client through a private protocol, the client displays the calculation result on the user terminal according to the calculation result, and all interaction is finished with the assistance of the server. Embodiments of the present invention may be applied to any of the above cases.

The web server returns the web resource when receiving a http request for accessing a web page sent by a mobile terminal, such as a mobile phone, a PAD (Personal assistant), and the like, but most of the existing web typesetting and displaying are performed on a conventional PC (Personal computer) display screen, so that narrow-line adaptation needs to be performed on the web content when the web page is accessed through the mobile terminal, otherwise, text content overflows a screen or is not adapted when the web content is displayed in the mobile terminal. When the mobile terminal sends a request for accessing a webpage, the request information can include resolution information of the webpage, so that corresponding narrow-row adaptation can be performed according to the resolution information of the mobile terminal by analyzing the request information. In addition, for the mobile phone browser, the resolution information of each model of mobile phone may be pre-stored by the server, and at this time, only the model of the mobile phone needs to be acquired, and corresponding narrow-row adaptation is performed according to the resolution information corresponding to each model of mobile phone.

S102: in the analyzing process of analyzing the page elements contained in the webpage resources and generating corresponding rendering tree nodes, judging whether the label corresponding to the current page element affects the typesetting, if so, processing the label affecting the typesetting so as to eliminate the influence of the label on the typesetting;

to facilitate understanding of this step, a brief description of CSS (Cascading Style Sheet) will be given. CSS is a computer Language for expressing a file style such as HTML (Hypertext Markup Language) or XML, and can be used to design a web page style. For example, it is a style that a link word is blue when it is not clicked, and becomes red and underlined when the mouse is moved up. This style may be implemented by setting the CSS attributes of the corresponding elements.

Currently, there are several ways to control the display effect of the HTML page by using the CSS:

1) inline, it may be implemented by applying style "directly to the HTML tag.

2) The embedded mode is to write CSS code between head and style and declare with style.

3) In the link mode, only one link needs to be added between < head > </head >, and the herf attribute value of the link is set as the external CSS file name. The mode realizes the complete separation of the HTML file and the CSS file, so that the early-stage production and the later-stage maintenance are very convenient. If the page style is required to be kept uniform, as long as the common CSS files are independently saved into one file, other pages can respectively call the required CSS files, and if the page style needs to be changed, the page style can be changed only by modifying the common CSS files.

4) The import mode, the import mode and the link mode are similar, the CSS style sheet is imported by adopting the inprot mode, and the CSS style sheet is imported into an HTML file to be a part of the file when the HTML is initialized.

Because the control of the CSS on the HTML page display effect is realized through the link mode, the operation is convenient, and the management and the maintenance are convenient, at present, most websites use the link mode to control the page display effect.

In addition, for ease of understanding, the basic workflow of the rendering engine is briefly described again. The basic workflow of the rendering engine is as follows: building a Dom tree, building a Render tree, laying out the Render tree and drawing the Render tree. And after acquiring HTML page resources, the rendering engine begins to analyze the HTML page contents, converts the tags in the HTML page contents into Dom tree nodes and constructs a Dom tree. It then begins parsing style information in the CSS file and style tags, and these retrieved style information and visibility instructions in the HTML page will be used to build the Render tree. A Render tree is a further description of a Dom tree, consisting of visible elements in a display sequence of elements, which is a visual representation of a document, and is constructed to Render the document contents in the correct order. Rendering objects correspond to Dom elements, but this correspondence is not necessarily one-to-one, and invisible Dom elements are not inserted into rendering trees, such as head elements. In addition, an element whose display attribute is none does not appear in the rendering tree. Processing html and body tags will build the root of the render tree, which corresponds to the element called the relating block by the cs specification-the top-level block element that contains all other block elements. The size of the rendering tree is viewport which is the display area of a browser window, Firefox is called viewPortFrame, webkit is called RenderView, the rendering object is pointed by a document, and other parts in the tree are created as an inserted Dom node.

In the rendering tree, each node (rendering object) has its corresponding style, so creating the rendering tree requires calculating the visual attribute of each rendering object, which can be obtained by calculating the style attribute of each element. The styles comprise style sheets from various sources, inline style elements and visualization attributes (e.g., bgcolor) in html, which are converted into css style attributes. The style sheets are derived from browser default style sheets, and page author and user supplied style sheets-some styles are browser user supplied (browsers allow users to define favorite styles, e.g., in Firefox, this may be accomplished by placing style sheets under the Firefox Profile entry.

The embodiment of the invention realizes the effect that the calculated style of the page element can be adapted to the screens of the mobile terminals with different sizes by modifying the CSS attribute of the page element at the stage of generating the rendering tree by the rendering engine. The specific modification of the properties of the page elements is done for the RenderStyle class in the webkit. Thus, each member of the class corresponds to each style of the CSS. The details will be described below.

At the stage of constructing the rendering tree by the browser rendering engine, the CSS style information of the page elements is obtained. However, the CSS style information obtained at this time cannot be directly applied to the mobile terminal, because the existing web page is mainly for the PC display screen, and thus the CSS styles of some page elements are not suitable for the mobile terminal to display, after the CSS style information of the page elements is obtained, if the tab corresponding to the current page element affects the layout, the tab affecting the layout needs to be processed to eliminate the effect of the tab on the layout. The tabs affecting the typesetting include tables and related sub-tabs (including table headers, tables, table rows), form input controls, drop-down menus/lists, text fields, images, hyperlinks, partitions, normal scrolling, inclusion of objects, embedded elements, subscripts, superscripts, inline frames, and the like. Specifically, when processing these tags, different processing may be performed for different situations, for example, one of the processing manners may be: for some special tags, when the tag affecting the typesetting is processed, a mode of directly removing the tag affecting the typesetting can be adopted, that is, the current page element is reserved, but the tag originally set for the element is removed, so that the element is not displayed into the mode set by the original tag any more. A specific way to remove may be to set the display attribute of the tag to none. For example:

(1) common scrolling (marquee)

The Marquee tag is used to control font scrolling. Because some mobile phone clients do not support the scrolling function of marquee or the supported effect is not good, the tag can be removed by processing the display attribute of the tag in order not to influence the typesetting effect. After the tab is removed, the content in the tab will not have the scrolling effect when displayed in the web page.

(2) Subscript (sub), superscript (sup)

Sub is used to define the subscript text, and the text contained within the label is displayed as half the normal text height below the baseline. sup is used to define the superscript text, with the text contained within the tag displayed above the baseline at half the height of the normal text. The two corner mark elements can cause irregular overall typesetting and disordered element layout, so that the labels can be removed if the labels exist in the page. After the label is removed, the content in the corner label can be displayed according to the style of the common text, namely, the content is at the same base line with the common text and the font information is consistent.

In addition, the processing of the label affecting the typesetting can also be to remove the current page element corresponding to the label. For example, if the page element currently being parsed is the aforementioned normal scroll element, subscript element, or superscript element, such page element is directly removed. That is to say, there is no node corresponding to the page element in the rendering tree, and then the page element is not drawn and displayed in the webpage, obviously, the influence of the page element on the layout can be eliminated.

Of course, in specific implementation, besides the above-mentioned ordinary scroll element, subscript element, or superscript element, the page element containing object (object) or embedded (embedded) may also be directly removed. The object and embedded elements are used for adding multimedia files, such as audio, video, flash, and the like, to the page. The object tag is for the IE browser in the windows platform, and the embed is for the Netscape Navigator browser in the windows and Macintosh platforms and the IE browser in the Macintosh platform. Generally, to ensure that most browsers can display the flash normally, the embed tag needs to be nested in the object tag. A browser that supports Activex controls will ignore the embed tag within the object tag. Netscape and IE browsers using plug-ins will read only the embed tag and not the object tag. For example, < object class ═ F08DF954-8592-11D1-B16A-00C0F0283628 "ID ═" Slider1"width ═"100"height ═"50 ">/object", where class is used to define the ID value of the class embedded in the web page, and this attribute can be used to specify the location of the object contained in the browser, typically a Java class. However, most mobile phone browsers do not support flash animation at present, if the page contains the two elements, the page element can be removed in order not to affect the typesetting effect. After the page elements are removed, specific video, audio, flash and other elements are not displayed in the webpage any more.

In addition, the processing of the tag may also be to modify the CSS attribute value defined in the tag that affects the layout, that is, to retain the current page element and its tag, but to modify the attribute value defined for the element in the tag, so that the tag no longer affects the layout. For example, in a specific implementation, the attribute values may be modified for the tags of the following elements:

(1) tables (table) and corresponding inline elements (th, td, tr)

The webpage designer often uses tables to make the page layout neat and orderly, one table usually has multiple columns and multiple rows, and the row width is usually adapted to the PC display screen, so for the mobile terminal display screen, the situation that the table row width is larger than the screen width occurs, and as the table cells cannot automatically change rows, part of the table contents overflow the screen. Therefore, if the currently parsed page element is a table element, the table element and the cascading style sheet attribute of the inline elements of the table element can be modified correspondingly through the CSS selector, so that the table content can be automatically wrapped, and therefore, the table can adapt to screens with different sizes.

(2) Form input control (input), drop down menu/list (select), text field (textarea), or inline frame (iframe)

The Form Input control (Input) represents an Input object of a Form, which is further classified into a text Input box, a password Input box, a check/check box, a submit/reset button, and the like according to the Type. A drop down menu/list (Select) element may create a single or multiple choice menu. A text field (textarea) is a text input control that defines multiple lines, and an unlimited number of texts may be accommodated in a text area. The iframe element creates an inline frame (i.e., inline frame) that contains another document.

If the element of the page currently being parsed is any one or more of the above elements, and the width attribute of the element is an absolute value, the width is modified to a relative width, the attribute value of which is 100%, so that the content of the element can occupy the width of the mobile phone screen. The absolute value width may cause the problem of screen blank or line folding, which affects the typesetting. For example, in a default case, the width of the iframe is 300px, and when the width of the screen of the mobile terminal is greater than 300px, a large blank on the right side of the screen occurs, so the width attribute of the iframe may be modified to a relative width, and the attribute value is 100%. The text content in the iframe can always occupy the screen at this time.

(3) Image (img)

The Img element is used to insert a picture into the web page, and the width attribute of the Img element is used to specify the width of the picture to be displayed after the picture is inserted into the web page, which may affect the layout, so that if the page element currently being parsed is an image element, the Img element needs to be modified. Specifically, the width value of the image element may be first obtained, and compared with the screen width value of the mobile terminal, and when the width value is greater than the screen width of the mobile terminal, the width value is scaled in proportion to the screen size, and the specific operation may be setsutyle (length (auto)), so that the image element can be normally displayed according to the screen size. If the picture width does not exceed the screen width but exceeds one half of the screen width, the position attribute value can be modified to be displayed in the middle, so that the picture can be displayed in the middle on the screen of the mobile terminal.

(4) Hyperlink (a)

In the a tag, an img tag can be inserted, at this time, the picture inserted in the img tag becomes an image hyperlink, and the hyperlink can be opened by clicking any part of the picture. In order to avoid overlapping of the picture and other texts corresponding to the tags when the picture is displayed, a boundary attribute value (margin) is added to the img tag, and in order to avoid connecting two adjacent hyperlinks together, a boundary attribute can be set for the a tag. The shorthand property margin can set the width of all outer margins of an element, or the width of the outer margins on each side.

(5) Partition (div)

DIV elements are elements used to provide structure and context for the content of large blocks (block-level) within an HTML document. All content between the DIV start tag and end tag is used to construct the block, with the properties of the contained elements controlled by the attributes of the DIV tag or by formatting the block using a style sheet. If the currently parsed page element is a partition element, to avoid the overlapping of borders between parent and child and sibling partitions, a margin attribute may be set for each div element.

It should be noted that, for the web page to be accessed by the mobile terminal, all the above-mentioned tags affecting the layout are not necessarily included, and only one or more of them may be included. Therefore, in the implementation process, one or more tags which affect the typesetting and appear in the page can be processed according to the actual situation of different pages.

S103: and constructing nodes of the rendering tree according to the processed labels, and if judging whether CSS attributes of the cascading style sheet influencing the typesetting exist, if CSS attributes of the cascading style sheet influencing the typesetting exist, removing the CSS attributes influencing the typesetting so as to draw and display the webpage content in the mobile terminal according to the constructed rendering tree.

When the rendering engine generates the rendering tree, for each node, the corresponding style needs to be calculated, that is, the acquired CSS style attribute value needs to be applied to the corresponding node. Because the CSS attributes of some page elements also affect the layout, in the process of calculating the style, the corresponding attributes need to be removed and not applied to the corresponding nodes, so as to eliminate the effect of the attributes on the layout. Wherein, the attributes influencing typesetting may include: the attribute of absolute value of width and height, the attribute of border and filling in the element box model, the attribute of setting background picture and the attribute related to text display. The processing of these attributes in this embodiment is specifically:

(1) absolute property of width and height

For the width and height attributes (width, min-width, max-width, height, min-height, max-height, size) given by absolute values, the page content is disproportionate when being adapted to the mobile phone screen or overflows the mobile phone screen. For example, if the width value of the CSS attribute of some elements in the original web page is given as an absolute value, and if the width attribute value is given as width:320px, since the width is given as an absolute value, any browser will understand that the width is 320px after parsing, and then the content overflows the screen for a display with a screen width less than 320 px. Therefore, in order not to affect the layout, the absolute value attribute of the above-mentioned aspect correlation needs to be filtered out.

(2) Boundary (margin) and padding (padding) attributes in an element box model

The CSS will see all web page elements as a rectangular box, which is made up of the content, fill, border (border) and boundaries of the elements. The fill is the space between the content of the element and the border. A boundary is the space between one element and another element. The border and fill-in properties of elements cause problems of text content breaks and screen blanks in web pages, and therefore these properties need to be filtered out.

(3) Location attribute

The attributes (position, center, align, left, right, bottom, top, text-align) related to the positions of the elements may cause the page elements to display improper positions or overflow the mobile phone screen in the process of adapting to the mobile phone screen, which causes a great problem in typesetting, and therefore, the attributes need to be filtered out.

(4) Background map Properties

The background-image attribute sets a background image for the element. The background of the element occupies the full dimensions of the element, including the inner margin and the border, but not the outer margin. By default, the background image is located in the upper left corner of the element and is repeated in the horizontal and vertical directions.

In the process of adapting the screen of the mobile phone, since the cutting of the large background image and the repetition of the small background image cannot be processed, the background-image attribute is filtered out. Because the background image is removed, the text with the same color as the background color cannot be displayed, and the color attribute value of the text can be reset to ensure the identification of the text after the background image is removed. The specific implementation can be as follows: if the text color in the page element is white, setting the text color as a default color of the webpage text; if the text color in the webpage element is not white and the background color of the element is opaque, setting the text color as a color with a certain color difference value with the background color of the element; if the text color in the web page element is not white and the background color of the element is transparent, the text color is set to a color having a certain color difference value with the background color of the body element of the web page. The specific color difference value may be preset according to an empirical value or the like.

(5) Properties relating to text display

The text-wrap (word-wrap) attribute is used to control whether to break a line when the current line exceeds the boundary of a specified container, the default value is to allow the content to open the specified container boundary, if the selected attribute value is break-word, the content will wrap within the boundary. the text-index attribute is used to control the first line indentation in the text block. These attributes associated with the display of text pose problems of text breaks and leaving blanks in the web page, and thus need to be filtered out.

Specifically, when removing the attribute affecting the layout, the following steps may be performed: polling all attributes of the current page element, and when polling to a certain attribute needing to be removed, directly performing carriage return operation without giving any attribute value to the attribute, thus equivalently removing the attribute.

After the tags corresponding to the page elements are processed, the tags and the page elements which influence the typesetting are removed or the CSS attributes of the tags are reset, and the CSS attributes which influence the typesetting of the page elements are filtered, so that the webpage content requested by the mobile terminal can be normally displayed on the screen after rendering and layout, and the situation of non-adaptation can be avoided.

In addition, in order to enable the html page to be normally displayed on the mobile phone, the prior art also has the following implementation modes: the method comprises the steps that an HTML page is converted into a WAP format through a WAP transcoding server, typesetting and screen drawing are completed through a mobile phone client with complete WAP resolution capability, however, JAVASCRIPT of an original page is filtered, and functions which can be supported only after the JAVASCRIPT is resolved by a browser engine on the original page are lost. In the embodiment of the invention, the element attributes in the original HTML page are correspondingly adapted without simplifying the original HTML page. Therefore, the JAVASCRIPT of the original webpage can be completely reserved without filtering, so that all effects of the JAVASCRIPT can be displayed on the screen of the mobile terminal.

Corresponding to the method for displaying a web page in a mobile terminal provided by the embodiment of the present invention, an embodiment of the present invention further provides a device for displaying a web page in a mobile terminal, and referring to fig. 2, the device may include:

a resource obtaining unit 201, configured to receive a request for accessing a web page through a mobile terminal, and obtain a resource corresponding to the web page from a web server according to the request;

the tag processing unit 202 is configured to analyze page elements included in the web page resource, and in the analyzing process, determine whether a tag corresponding to a current page element affects the typesetting, and if a tag affecting the typesetting exists, process the tag affecting the typesetting to eliminate an effect of the tag on the typesetting;

and the render tree constructing unit 203 is configured to construct nodes of the render tree according to the processed tags, determine whether CSS attributes of the cascading style sheet affecting the typesetting exist, remove the CSS attributes affecting the typesetting if the CSS attributes of the cascading style sheet affecting the typesetting exist, and then draw and display the web page content in the mobile terminal according to the constructed render tree.

In a specific implementation, for some special tags, referring to fig. 3, the tag processing unit 202 may include:

the tag removing subunit 2021 is configured to remove a tag that affects the composition, so that when a node of the rendering tree is constructed according to the processed tag, a page element corresponding to the tag is processed as a normal text.

Wherein the label-removing subunit is specifically configured to: and if the currently resolved page element is a common scroll element, a subscript element or a superscript element, removing the label of the page element.

Alternatively, referring to fig. 4, the tag processing unit 202 may also include:

the element removing subunit 2022 is configured to remove a current page element, so that when a node of the rendering tree is constructed according to the processed tag, a node corresponding to the page element is not generated any more.

Wherein the element removal subunit may be specifically configured to: if the page element currently being resolved is a normal scroll element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, then such page element is removed.

Still further, referring to fig. 5, the tag processing unit 202 may further include:

an attribute value modification subunit 2023, configured to modify the CSS attribute values defined in the tags that affect the typesetting;

accordingly, the render tree construction unit 203 may be further configured to:

The attribute value modification subunit may specifically include:

or,

In practical applications, the render tree construction unit 203 may include:

and/or the presence of a gas in the gas,

Wherein, in order to ensure the identifiability of the text, the device may further include:

The text color modification unit may specifically include:

or,

From the above description of the embodiments, it is clear to those skilled in the art that the present invention can be implemented by software plus necessary general hardware platform. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which may be stored in a storage medium, such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments or some parts of the embodiments.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for apparatus or system embodiments, since they are substantially similar to method embodiments, they are described in relative terms, as long as they are described in partial descriptions of method embodiments. The above-described embodiments of the apparatus and system are merely illustrative, and the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.

The method and the device for displaying a webpage in a mobile terminal provided by the invention are introduced in detail, a specific example is applied in the text to explain the principle and the implementation mode of the invention, and the description of the embodiment is only used for helping to understand the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, the specific embodiments and the application range may be changed. In view of the above, the present disclosure should not be construed as limiting the invention.

According to an embodiment of the present invention, there is disclosed:

a1, a method for displaying web pages in a mobile terminal, comprising:

A2, the method according to claim A1, wherein the processing the label affecting the typeset includes:

A3, the method according to claim A2, wherein the de-labeling affecting typesetting comprises:

A4, the method according to claim A1, wherein the processing the label affecting the typeset includes:

A5, the method of claim a4, wherein the removing the current page element comprises:

A6, the method according to claim 1, wherein the processing the label affecting the typesetting includes:

A7, the method according to claim A6, wherein the modifying CSS attribute values defined in the tab affecting typesetting includes:

or,

A8, the method of claim A1, wherein the removing CSS attributes affecting typesetting contained in the render tree node comprises:

and/or the presence of a gas in the gas,

and removing the border and the filling attribute in the element box model.

A9, the method according to claim A8, further comprising, if the background map of the currently parsing page element is removed:

A10, the method according to claim A9, wherein the modifying the color attribute values of the text contained in the page element comprises:

or,

B11, an apparatus for displaying a web page in a mobile terminal, comprising:

B12, the device according to claim B11, wherein the label processing unit comprises:

B13, the device according to claim B12, wherein the label-dropping subunit is specifically configured to: and if the currently resolved page element is a common scroll element, a subscript element or a superscript element, removing the label of the page element.

B14, the device according to claim B11, wherein the label processing unit comprises:

B15, the apparatus according to claim B14, wherein the element-dropping subunit is specifically configured to: if the page element currently being resolved is a normal scroll element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, then such page element is removed.

B16, the device according to claim B11, wherein the label processing unit comprises:

the render tree construction unit is further configured to:

B17, the apparatus according to claim B16, wherein the attribute value modification subunit comprises:

or,

B18, the apparatus of claim B11, the render tree construction unit comprising:

and/or the presence of a gas in the gas,

B19, the device of claim B18, further comprising:

B20, the apparatus of claim B19, wherein the text color modification unit comprises:

or,

Claims

1. A method for displaying a web page in a mobile terminal, comprising:

2. The method according to claim 1, wherein the processing the label affecting the typeset comprises:

3. The method of claim 2, wherein de-tabbing layout affecting tags comprises:

4. The method according to claim 1, wherein the processing the label affecting the typeset comprises:

5. The method of claim 4, wherein the removing the current page element comprises:

6. The method according to claim 1, wherein the processing the label affecting the typeset comprises:

7. The method of claim 6, wherein modifying CSS attribute values defined in the tags that affect the typesetting comprises:

or,

8. The method of claim 1, the removing CSS attributes affecting typesetting contained in rendering tree nodes comprises:

and/or the presence of a gas in the gas,

and removing the border and the filling attribute in the element box model.

9. The method of claim 8, wherein if the background map of the currently parsing page element is removed, further comprising:

10. An apparatus for displaying a web page in a mobile terminal, comprising: