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

Abstract

The present invention discloses a method and device for displaying a webpage in a mobile terminal, wherein the method includes receiving a request for accessing a webpage through a mobile terminal, and obtaining resources corresponding to the webpage from a webpage server according to the request; The page elements contained in the web resource are parsed, and during the parsing process, it is judged whether the label corresponding to the current page element affects the layout, and if there is a label that affects the layout, the label that affects the layout is processed; according to the processed label structure The node of the rendering tree judges whether there is a cascading style sheet CSS attribute that affects the layout. If there is a cascading style sheet CSS attribute that affects the layout, remove the CSS attribute that affects the layout, and then draw and display the webpage content according to the constructed rendering tree. Through the present invention, some due picture effects can be preserved to a certain extent, and the vividness of web page display can be guaranteed.

Description

Method and device for displaying webpage in mobile terminal

technical field

The invention relates to the field of computer technology, in particular to a method and device for displaying web pages in a mobile terminal.

Background technique

With the rapid development of science and technology, mobile terminals (such as mobile phones, etc.) already have powerful processing capabilities, and mobile terminals are changing from a simple communication tool to a comprehensive information processing platform. important way.

Initially, in order to be able to browse webpages on mobile terminals, a special protocol—WAP (Wireless Application Protocol, Wireless Application Protocol) was used. It is made using the WML (Wireless Markup Language) language, so it can generally be referred to as a WML webpage for short). However, with the continuous improvement of user needs and the development of technology, it is also possible to browse ordinary HTML (Hypertext Markup Language, Hypertext Markup Language) webpages on mobile terminals at present, that is, webpages made based on HTML language commonly used in the Internet. . However, such HTML webpages are generally designed for traditional devices with larger display screens (such as desktop computers, notebook computers, etc.), and for mobile terminals (such as mobile phones, etc.), due to the size of the display screen Therefore, in order to normally display an HTML webpage in a mobile terminal, it is generally necessary to process the HTML webpage in advance and convert it into a format similar to a WML webpage. In the process of converting an HTML web page to a WML web page, it is first necessary to perform narrow row adaptation processing on the page elements, that is, it is necessary to re-layout the page elements in the HTML web page according to the screen width of the mobile terminal, so that each line displays The number of page elements is reduced, so that when displayed on a smaller display screen, the font will not be too small, and at the same time, the phenomenon of scroll bars in the horizontal direction is avoided, which is convenient for users to browse. However, in the prior art, in the process of narrowly arranging pages, in order to avoid phenomena such as content overflowing the mobile phone screen or screen blanking, overlapping display, etc., the original CSS styles designed for some page elements in HTML web pages are generally removed. But this will cause the display of the webpage not to be vivid, and some proper picture effects will disappear.

Contents of the invention

The invention provides a method and device for displaying web pages in a mobile terminal, which can retain some due picture effects to a certain extent and ensure the vividness of web page display.

The present invention provides following scheme:

A method for displaying a webpage in a mobile terminal, comprising:

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

Analyzing the page elements contained in the webpage resource, judging during the parsing process whether the label corresponding to the current page element affects the typesetting, if there is a label that affects the typesetting, then processing the label that affects the typesetting;

Construct the nodes of the rendering tree according to the processed tags, and judge whether there is a cascading style sheet CSS attribute that affects the layout. If there is a cascading style sheet CSS attribute that affects the layout, remove the CSS attribute that affects the layout, and then follow the constructed rendering tree. The content is drawn and displayed.

Wherein, the processing of the tags that affect typesetting includes:

Remove the tags that affect typesetting, so that when the nodes of the rendering tree are constructed based on the processed tags, the page elements corresponding to the tags are treated as ordinary text.

Among them, the removal of tags that affect typesetting includes:

If the page element currently being parsed is a normal scrolling element, a subscript element or a superscript element, the tag of such page element is removed.

Wherein, the processing of the tags that affect typesetting includes:

Remove the current page element, so that when the node of the rendering tree is constructed according to the processed label, the node corresponding to the page element is no longer generated.

Wherein, said removing the current page element includes:

If the page element currently being parsed is a common scrolling element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, such page element is removed.

Wherein, the processing of the tags that affect typesetting includes:

Modify the CSS attribute value defined in the label that affects layout;

The nodes for constructing the rendering tree according to the processed labels include:

The modified CSS property value is used to assign a value to the CSS property of the node corresponding to the page element in the rendering tree.

Wherein, modifying the CSS attribute values defined in the tags that will affect layout includes:

When the page element currently being parsed is a table element, the CSS value of the table element and the inline element of the table element is modified so that the table element can wrap automatically;

or,

When the page element currently being parsed is a form input control, drop-down menu/list, text field or inline frame element, and there is an absolute value representing its width, modify the absolute value to a relative value;

or,

When the page element currently being parsed is an image element, compare the width value of the image element with the screen width value of the mobile terminal, if the width value is greater than the screen width value of the mobile terminal, then move according to the width value and the mobile terminal The ratio between the screen widths of the terminal, the width value is proportionally reduced; if the width value is less than the screen width value of the mobile terminal, but greater than half of the screen width value of the mobile terminal, then the image element The position attribute value is modified to be displayed in the center;

or,

If the page element currently being parsed is a hyperlink element, and the hyperlink element contains an img tag and text, then add a boundary attribute value to the img tag;

or,

If the page element currently being parsed is a partition element, add a boundary attribute value to the partition element.

Wherein, said removing CSS attributes that affect typesetting included in the rendering tree node includes:

Remove the absolute attributes of width and height, positioning attributes, background image attributes and/or attributes related to text display contained in the page element currently being parsed;

and / or,

Remove the border and padding properties in the element box model.

Wherein, if the background image of the page element currently being parsed is removed, it also includes:

The color attribute value of the text included in the page element is modified to ensure the recognition of the text after the background image is removed.

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

If the text color in the page element is white, then set the text color as the default color of the web page text;

or,

If the text color in the webpage element is not white, and the background color of the element is opaque, then set the text color to the color of the background color of the element with a preset color difference value;

or,

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 with a preset color difference value from the background color of the main element of the web page.

A device for displaying web pages in a mobile terminal, comprising:

A resource obtaining unit, configured to receive a request for accessing a webpage through a mobile terminal, and obtain resources corresponding to the webpage from a webpage server according to the request;

The label processing unit is used to analyze the page elements contained in the webpage resources. During the analysis process, it is judged whether the label corresponding to the current page element affects the typesetting. If there is a label that affects the typesetting, the label that affects the typesetting is processed. deal with;

The rendering tree construction unit is used to construct the nodes of the rendering tree according to the processed tags, and judge whether there are cascading style sheet CSS attributes that affect the layout. If there are cascading style sheet CSS attributes that affect the layout, remove the CSS attributes that affect the layout, and then Draw and display the web page content according to the constructed rendering tree.

Wherein, the label processing unit includes:

The tag removal subunit is used to remove tags that affect typesetting, so that when the nodes of the rendering tree are constructed based on the processed tags, the page elements corresponding to the tags are treated as ordinary text.

Wherein, the label removing subunit is specifically configured to: if the page element currently being parsed is a common scroll element, a subscript element or a superscript element, then remove the label of this page element.

Wherein, the label processing unit includes:

The element removal subunit is used to remove the current page element, so that when the node of the rendering tree is constructed according to the processed label, the node corresponding to the page element is no longer generated.

Wherein, the element removal subunit is specifically used for: if the page element currently being parsed is a normal scrolling element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, then element removed.

Wherein, the label processing unit includes:

The attribute value modification subunit is used to modify the CSS attribute value defined in the tag that affects layout;

The rendering tree construction unit is also used for:

The modified CSS property value is used to assign a value to the CSS property of the node corresponding to the page element in the rendering tree.

Wherein, the attribute value modification subunit includes:

The first modification subunit is used to modify the CSS value of the table element and the inline element of the table element when the page element currently being parsed is a table element, so that the table element can wrap automatically;

or,

The second modification subunit is used to convert the absolute value to Modified to a relative value;

or,

The third modification subunit is used to compare the width value of the image element with the screen width value of the mobile terminal when the page element currently being parsed is an image element, if the width value is greater than the screen width value of the mobile terminal, Then according to the ratio between the width value and the screen width of the mobile terminal, the width value is proportionally reduced; if the width value is less than the screen width value of the mobile terminal, but greater than half of the screen width value of the mobile terminal One, modify the value of the position attribute of the image element to display in the center;

or,

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

or,

The fifth modification subunit is configured to add a boundary attribute value to the partition element if the page element currently being parsed is a partition element.

Wherein, the rendering tree construction unit includes:

The first attribute removes subunits, which are used to remove the absolute attributes of width and height contained in the page element currently being parsed, positioning attributes, background image attributes and/or attributes related to text display;

and / or,

The second attribute removes the subunit, which is used to remove the border and padding attributes in the element box model.

Among them, also include:

The text color modifying unit is configured to modify the color attribute value of the text contained in the page element if the background image of the page element currently being parsed is removed, so as to ensure the recognition of the text after the background image is removed.

Wherein, the text color modification unit includes:

The first color modification subunit is used to set the text color as the default color of the webpage text if the text color in the page element is white;

or,

The second color modification subunit is used to set the text color as the color of the background color of the element with a preset color difference value if the text color in the web page element is not white and the background color of the element is opaque;

or,

The third color modification subunit is used to set the text color to a color with a preset color difference value from 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 present invention, the present invention achieves the following technical effect: if the tag corresponding to the current page element affects the typesetting, then process the tag that affects the typesetting, so as to eliminate the impact of the tag on the typesetting. The processing can avoid the impact of the page element corresponding to the tag on the typesetting; construct the node of the rendering tree according to the processed tag, and if there is a cascading style sheet CSS attribute that affects the typesetting, remove the CSS attribute that affects the typesetting, so as to follow the The constructed rendering tree draws and displays the content of the webpage in the mobile terminal, and removes the CSS attributes that affect the typesetting, which can avoid the setting of the CSS attributes and make the display effect of the page elements affect the typesetting. The processing of the label includes modifying the corresponding CSS property of the label, such as changing the absolute property of its width to a relative property, so that the webpage layout can be adapted to different clients according to the size of the client screen. At the same time, in the embodiment of the present invention, only the label CSS attributes that affect layout are processed, and the CSS attributes that affect layout are removed, instead of removing all CSS styles designed for page elements. Therefore, some application elements can be retained to a certain extent. Some picture effects ensure the vividness of web page display.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the accompanying drawings required in the embodiments. Obviously, the accompanying drawings in the following description are only some of the present invention. Embodiments, for those of ordinary skill in the art, other drawings can also be obtained based on these drawings without any creative effort.

Fig. 1 is the flowchart of the method provided by the embodiment of the present invention;

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

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

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

Fig. 5 is a schematic diagram of a fourth device provided by an embodiment of the present invention.

Detailed ways

The following will clearly and completely describe the technical solutions in the embodiments of the present invention with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only some, not all, embodiments of the present invention. All other embodiments obtained by persons of ordinary skill in the art based on the embodiments of the present invention belong to the protection scope of the present invention.

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

First of all, it needs to be explained that the current web browsers are roughly divided into two types: the client directly embedded in the browser and the C/S (client/proxy server) architecture browser. Among them, the former is to directly access the webpage through the browser, that is, after the browser receives the user's request to visit a certain webpage, it directly sends the request to the webpage server, and after obtaining the webpage data returned by the webpage server, it performs parsing and processing locally. Rendering, and finally displaying; the latter is to divide the browser into two parts, the client and the server, where the client runs on the user terminal, and the server runs on the remote server. After the client receives the user's request to access the webpage , first send the request to its own server, and then the server accesses the web server, after obtaining the web page data returned by the web server, parses and renders calculations on the server, and then sends the calculated results to the client through a private protocol end, and the client displays the calculation results on the user terminal, which means that all interactions are completed with the assistance of the server. The embodiments of the present invention may be applicable to any of the foregoing situations.

When the web server receives an http request for accessing web pages from a mobile terminal, such as a mobile phone, PAD (Personal Digital Assistant, personal assistant), etc., it will return the web page resource, but most of the existing web page layout and display are For the traditional PC (personal computer, personal computer) display screen, therefore, when accessing the webpage through the mobile terminal, the webpage content needs to be narrowly adapted, otherwise the text content will overflow when the webpage content is displayed on the mobile terminal screen or other unsuitable conditions. When the mobile terminal sends a webpage access request, the request information may include its resolution information. Therefore, by parsing the request information, corresponding narrow row adaptation may be performed according to the resolution information of the mobile terminal. In addition, for mobile browsers, the resolution information of each model of mobile phone can also be stored in advance on the server side. At this time, only the model of the mobile phone is obtained, and the corresponding narrow row adaptation is performed according to the resolution information corresponding to each model of mobile phone. .

S102: During the parsing process of parsing the page elements contained in the webpage resources and generating the corresponding rendering tree nodes, it is judged whether the label corresponding to the current page element affects the typesetting, if there is a label that affects the typesetting, the Tags that affect typesetting are processed to eliminate the impact of the tags on typesetting;

In order to facilitate understanding of this step, let's briefly introduce CSS (Cascading Style Sheet, Cascading Style Sheet). CSS is a computer language used to represent file styles such as HTML (Hypertext Markup Language) or XML, and can be used to design web pages. For example, if you want to make the link word blue when it is not clicked, it will turn red and underlined when the mouse is moved up. This is a style. The realization of this style can be realized by setting the CSS property of the corresponding element.

Currently, CSS is used to control the display effect of HTML pages in the following ways:

1) The inline method can be realized by directly applying style=" " to HTML tags.

2) The embedded method is to write the CSS code between <head> and </head>, and declare it with <style></style>.

3) In the link method, just add a link between <head> and </head>, and set the herf attribute value of the link as the name of the external CSS file. This method realizes the complete separation of HTML files and CSS files, making pre-production and post-maintenance very convenient. If you want to maintain a unified page style, you only need to save these public CSS files as a single file, and other pages can call the required CSS files separately. If you need to change the web page style, you only need to modify the public CSS file.

4) Import method. The import method is similar to the link style. The import method is used to import the CSS style sheet. When the HTML is initialized, it will be imported into the HTML file and become a part of the file.

Because the control of CSS on the display effect of HTML pages is realized through links, the operation is convenient, and it is also convenient for management and maintenance. Therefore, most websites currently use links to control the display effects of pages.

In addition, for the sake of understanding, briefly introduce the basic workflow of the rendering engine. The basic workflow of the rendering engine is: building the Dom tree, building the Render tree, laying out the Render tree, and drawing the Render tree. After the rendering engine obtains the HTML page resource, it starts to parse the HTML page content, converts the tags in it into Dom tree nodes, and builds the Dom tree. Then it starts to parse the CSS file and the style information in the style tag, and the acquired style information and visibility instructions in the HTML page will be used to build the Render tree. The Render tree is a further description of the Dom tree. It is composed of visible elements in the element display sequence. It is a visual representation of the document. This tree is constructed to draw the content of the document in the correct order. Rendering objects correspond to Dom elements, but this correspondence is not necessarily one-to-one. Invisible Dom elements will not be inserted into the rendering tree, such as the head element. In addition, elements whose display attribute is none will not appear in the rendering tree. Processing the html and body tags will build the root of the render tree, which corresponds to what the CSS specification calls a containing block element—the top-level block element that contains all other block elements. Its size is viewport—the display area of the browser window. Firefox calls it viewPortFrame, and webkit calls it RenderView. This is the rendering object pointed to by the document. The rest of the tree will be created as an inserted Dom node.

In the rendering tree, each node (rendering object) has its corresponding style, so creating the rendering tree needs to calculate the visual attribute of each rendering object, which can be obtained by calculating the style attribute of each element. Styles include style sheets from various sources, inline style elements and visual attributes in html (such as bgcolor), and visual attributes are converted into css style attributes. The style sheet comes from the default style sheet of the browser, as well as the style sheet provided by the page author and the user - some styles are provided by the browser user (the browser allows the user to define the favorite style, for example, in Firefox, you can pass in the FirefoxProfile directory Place the stylesheet implementation below.

The embodiment of the present invention achieves the effect that the calculated styles of the page elements can be adapted to different sizes of mobile terminal screens by modifying the CSS properties of the page elements at the rendering engine generation rendering tree stage. The specific modification of the properties of the page elements is carried out for the class RenderStyle in webkit. Because each member of this class corresponds to various styles of CSS. Detailed description will be given below.

In the stage of building the rendering tree by the browser rendering engine, the CSS style information of the page elements will be obtained. However, the CSS style information obtained at this time cannot be directly applied to the mobile terminal, because the existing web pages are mainly aimed at PC display screens, so the CSS styles of some of the page elements are not suitable for display on the mobile terminal. After the CSS style information of the page element, if the label corresponding to the current page element affects the layout, the label that affects the layout needs to be processed to eliminate the impact of the label on the layout. Wherein, the tags that affect typesetting include tables and related sub-tags (including table headers, table bodies, table rows), form input controls, drop-down menus/lists, text fields, images, hyperlinks, partitions, ordinary scrolling , containing objects, embedded elements, subscripts, superscripts, inline frames, and more. Specifically, when processing these tags, different processing can be carried out according to different situations. For example, one of the processing methods can be: for some special tags, when processing tags that affect typesetting, you can also directly use the This method of removing tags that affect typesetting means that the current page element is retained, but the tag originally set for the element is removed, so that the element no longer displays the style set by the original tag. The specific removal method can be to set the display attribute of the tag to none. For example:

(1) Ordinary scrolling (marquee)

Marquee tags are used to control font scrolling. Because some mobile clients do not support the marquee scrolling function, or the support effect is not very good, in order not to affect the typesetting effect, you can remove the tag by processing the display attribute of the tag. After the label is removed, the content in the label will no longer have the effect of scrolling when displayed on the web page.

(2) subscript (sub), superscript (sup)

Sub is used to define subscript text, and the text contained in the label is displayed at half the normal text height below the baseline. sup is used to define superscript text, and the text contained in the label is displayed at half the normal text height above the baseline. These two corner mark elements will cause the overall layout to be irregular and the layout of elements to be chaotic, so if the above tags exist on the page, they can be removed. After the label is removed, the content in the corner mark label can be displayed in the style of ordinary text, that is, it is on the same baseline as ordinary text, and the font information is consistent.

In addition, processing the tags that affect typesetting may also be removing the current page element corresponding to the tags. For example, if the page element currently being parsed is the aforementioned common scrolling element, subscript element or superscript element, such page element is directly removed. That is to say, the node corresponding to the page element no longer exists in the rendering tree, and the page element will no longer be drawn and displayed in the web page. Obviously, the influence of the page element on typesetting can also be eliminated.

Of course, in actual implementation, in addition to the above-mentioned ordinary scroll elements, subscript elements or superscript elements can be directly removed, page elements including objects (object) and embedded (embed) can also be directly removed. Among them, the object and embed embedded elements are used to add multimedia files, such as audio, video, flash, etc., to the page. The object tag is used for the IE browser on the Windows platform, and the embed is used for the Netscape Navigator browser on the Windows and Macintosh platforms and the IE browser on the Macintosh platform. Generally, in order to ensure that most browsers can display flash normally, it is necessary to nest the embed tag in the object tag. Browsers that support ActiveX controls will ignore the embed tag inside the object tag. Netscape and IE browsers using plug-ins will only read the embed tag and will not recognize the object tag. For example, <objectclassid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1"width="100"height="50"></object>, where classid is used to define the class embedded in the web page The ID value, this attribute can be used to specify the location of the object contained in the browser, usually a Java class. However, currently most mobile browsers do not support flash animation. If the above two elements are included in the page, such page elements can be removed in order not to affect the typesetting effect. After such page elements are removed, specific video, audio, flash and other elements will no longer be displayed in the webpage.

In addition, the processing of the label can also be to modify the CSS attribute value defined in the label that affects the layout, that is to say, the current page element and its label are retained, but the attribute value defined for the element in the label needs to be modified. , so that the tag no longer affects typography. For example, during specific implementation, attribute values can be modified separately for the tags of the following types of elements:

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

Web designers often use tables to make the page layout neat and orderly. There are usually multiple columns and multiple rows in a table, and the row width is usually adapted to the PC display screen. Therefore, for the mobile terminal display screen, there will be a table When the row width is larger than the screen width, some table content overflows the screen because the table cells cannot wrap automatically. Therefore, if the page element currently being parsed is a table element, the CSS selector can be used to modify the cascading style sheet properties of the table element and the inline element of the table element accordingly, so that the table content can automatically wrap to adapt to different sizes size of the screen.

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

Form input control (Input) represents an input object of the Form form, which is divided into text input box, password input box, radio/check box, submit/reset button, etc. according to the type. The drop-down menu/list (Select) element creates a single-select or multi-select menu. A text area (textarea) is a text input control that defines multiple lines, and an unlimited number of texts can be accommodated in the text area. The iframe element creates an inline frame (ie, an inline frame) that contains another document.

If the page element currently being parsed is any one or more elements mentioned above, and the width attribute of the element is an absolute value, then modify the width to a relative width, and its attribute value is 100%, so that its content can fill up Phone screen width. Because the absolute value width may cause screen blanking or line folding problems, which will affect the layout. For example, by default, the width of the iframe is 300px. When the screen width of the mobile terminal is greater than 300px, there will be a large blank on the right side of the screen. Therefore, you can modify the width attribute of the iframe to a relative width, and the attribute value is 100 %. At this time, the text content in the iframe can always fill the screen.

(3) Image (img)

The Img element is used to insert an image into a web page. The width attribute of this element is used to specify the width displayed after the image is inserted into the web page. This width may affect the layout. Therefore, if the page element currently being parsed is an image element also need to be modified. Specifically, you can first obtain the width value of the image element, and compare it with the screen width value of the mobile terminal. When the width value is greater than the screen width of the mobile terminal, scale the width value in proportion to the screen size. The specific operation It can be setstyle(Length(Auto)), so that it can be displayed normally according to the screen size. If the width of the picture does not exceed the screen width, but exceeds one-half of the screen width, you can modify its position attribute value to display in the center, so that it can be displayed in the center on the screen of the mobile terminal.

(4) hyperlink (a)

In the a tag, an img tag can be inserted, and the picture inserted in the img tag becomes an image hyperlink, and clicking any part of the picture can open the hyperlink. In order to prevent the picture from overlapping with other text corresponding to the label when displayed, add a border attribute value (margin) to the img tag, and in order to prevent two adjacent hyperlinks from being connected together, you can set the border attribute for the a tag . The margin shorthand attribute can set the width of all margins of an element, or set the width of margins on each side.

(5) Partition (div)

The DIV element is an element used to provide structure and background to block-level content within an HTML document. Everything between the start and end tags of the DIV is used to form the block, and the properties of the contained elements are controlled by attributes of the DIV tag, or by formatting the block using a style sheet. If the page element currently being parsed is a partition element, in order to avoid overlapping borders between parent-child and sibling partitions, you can set the margin attribute for each div element.

It should be noted that, for a webpage to be accessed by a mobile terminal, it may not necessarily contain all the above-mentioned tags that affect typesetting, and may only contain one or more of them. Therefore, in the process of specific implementation, one or more above-mentioned tags that affect typesetting can be processed according to the actual situation of different pages.

S103: Construct the nodes of the rendering tree according to the processed tags, and if it is judged whether there is a CSS attribute that affects layout, if there is a CSS attribute that affects layout, remove the CSS attribute that affects layout. , so that the web page content can be drawn and displayed in the mobile terminal according to the constructed rendering tree.

When the rendering engine generates the rendering tree, it needs to calculate its corresponding style for each node, that is, it needs to apply the obtained CSS style attribute value to the corresponding node. Since the CSS properties of some page elements can also affect the layout, in the process of calculating the style, these corresponding properties need to be removed and not applied to the corresponding nodes, so as to eliminate the impact of the properties on the layout. Among them, these attributes that affect typesetting may include: absolute value attributes of width and height, border and padding attributes in the element box model, attributes for setting background images, and attributes related to text display. In this embodiment, the processing of these attributes is specifically:

(1) Absolute properties of width and height

For the width and height attributes given by absolute values (width, min-width, max-width, height, min-height, max-height, size), the content of the page will appear disproportionate or overflow the phone when it is adapted to the phone screen screen phenomenon. For example, the width value of the CSS attribute of some elements in the original web page is a given absolute value, assuming that the value of the width attribute is width:320px, since the given value is an absolute value, for any browser after parsing It is understood that the width is 320px, then for a display with a screen width smaller than 320px, the content will overflow the screen. Therefore, in order not to affect the typesetting, it is necessary to filter out the above-mentioned absolute value attributes related to width and height.

(2) Margin and padding attributes in the element box model

CSS treats all web page elements as a rectangular box consisting of the element's content, padding, border, and border. Padding is the space between an element's content and its border. A border is the space between one element and another. The border and padding properties of elements will cause the text content in the web page to wrap and leave blank space on the screen, so these properties need to be filtered out.

(3) Positioning attributes

Attributes related to the position of the element (position, center, align, left, right, bottom, top, text-align) will cause the page element to display inappropriately or overflow the mobile phone screen during the process of adapting to the mobile phone screen Phenomena, causing great problems for typesetting, so these attributes need to be filtered out.

(4) Background image properties

The background-image attribute sets the background image for the element. The element's background takes up the full size of the element, including padding and borders, but excluding margins. By default, the background image is placed in the upper left corner of the element and is repeated horizontally and vertically.

In the process of adapting to the mobile phone screen, the background-image attribute is filtered out because the cutting of the large background image and the repetition of the small background image cannot be handled. Since the background image is removed, the text with the same color as the background color cannot be displayed, so the color attribute value of the text can also be reset to ensure the recognition of the text after the background image is removed. The specific implementation can be: if the text color in the page element is white, then set the text color to the 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, then set the text color to have the same color as the background color of the element The color of a certain color difference value; if the text color in the webpage element is not white, and the background color of the element is transparent, set the text color to a color with a certain color difference value from the background color of the main element (body element) of the webpage. Wherein, the specific color difference value may be preset based on empirical values or the like.

(5) Attributes related to text display

The word-wrap attribute is used to control whether the current line breaks and wraps when it exceeds the boundary of the specified container. The default value is to allow the content to push the specified container boundary. If the selected attribute value is break-word, the content will be in the Line breaks within boundaries. The text-indent attribute is used to control the indentation of the first line of text in a text block. These attributes related to text display will cause the problems of line wrapping and blank spaces left in the webpage, so these attributes need to be filtered out.

Specifically, when removing the attributes that affect typesetting, you can proceed as follows: poll all the attributes of the current page element, and when a certain attribute that needs to be removed is polled, directly press Enter instead of assigning any attribute to the attribute attribute value, which is equivalent to removing the attribute.

After processing the tags corresponding to the page elements, since the tags and page elements that affect the layout are removed or the CSS attributes of the tags are reset, and the CSS attributes that affect the layout of the page elements are filtered at the same time, after rendering and layout, The webpage content requested by the mobile terminal can be normally displayed on the screen without any incompatibility.

In addition, in order to make the html page can be displayed normally on the mobile phone, the existing technology also has the following implementation method: the HTML page is converted to the WAP format through the WAP transcoding server, and the typesetting and screen drawing are completed by the mobile phone client with complete WAP analysis capability , but doing so causes the JAVASCRIPT of the original page to be filtered, and the functions that can only be supported after the browser engine parses JAVASCRIPT on the original page are missing. However, in the embodiment of the present invention, the element attributes in the original HTML page are correspondingly adapted, and the original HTML page does not need to be simplified. Therefore, all the JAVASCRIPT of the original webpage can be retained without filtering, thereby ensuring that all effects of the JAVASCRIPT can be displayed on the screen of the mobile terminal.

Corresponding to the method for displaying a webpage in a mobile terminal provided in the embodiment of the present invention, the embodiment of the present invention also provides a device for displaying a webpage in a mobile terminal. Referring to FIG. 2, the device may include:

The resource obtaining unit 201 is configured to receive a request for accessing a webpage through a mobile terminal, and obtain resources corresponding to the webpage from a webpage server according to the request;

The tag processing unit 202 is configured to analyze the page elements contained in the webpage resource, and during the parsing process, judge whether the tag corresponding to the current page element affects the typesetting, and if there is a tag that affects the typesetting, then the tag that affects the typesetting Tags are processed to eliminate the impact of said tags on typesetting;

The rendering tree construction unit 203 is configured to construct the nodes of the rendering tree according to the processed tags, and judge whether there is a cascading style sheet CSS attribute that affects typesetting, and if there is a cascading style sheet CSS attribute that affects typesetting, then remove the CSS attribute that affects typesetting, Then draw and display the web page content in the mobile terminal according to the constructed rendering tree.

During specific implementation, for some special tags, referring to FIG. 3, the tag processing unit 202 may include:

The tag removal subunit 2021 is configured to remove tags that affect typesetting, so that when the nodes of the rendering tree are constructed according to the processed tags, the page elements corresponding to the tags are treated as ordinary text.

Wherein, the label removing subunit is specifically used for: if the page element currently being parsed is a common scroll element, a subscript element or a superscript element, then remove the label of this page element.

Or, referring to FIG. 4, the tag processing unit 202 may also include:

The element removal subunit 2022 is used to remove the current page element, so that when the node of the rendering tree is constructed according to the processed label, the node corresponding to the page element is no longer generated.

Wherein, the element removal subunit can be specifically used for: if the page element currently being parsed is a normal scrolling element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, then the page element remove.

Furthermore, referring to FIG. 5, the tag processing unit 202 may also include:

The attribute value modifying subunit 2023 is used to modify the CSS attribute value defined in the tag that affects layout;

Correspondingly, the rendering tree construction unit 203 can also be used for:

The modified CSS property value is used to assign a value to the CSS property of the node corresponding to the page element in the rendering tree.

Wherein, the attribute value modifying subunit may specifically include:

The first modification subunit is used to modify the CSS value of the table element and the inline element of the table element when the page element currently being parsed is a table element, so that the table element can wrap automatically;

or,

The second modification subunit is used to convert the absolute value to Modified to a relative value;

or,

The third modification subunit is used to compare the width value of the image element with the screen width value of the mobile terminal when the page element currently being parsed is an image element, if the width value is greater than the screen width value of the mobile terminal, Then according to the ratio between the width value and the screen width of the mobile terminal, the width value is proportionally reduced; if the width value is less than the screen width value of the mobile terminal, but greater than half of the screen width value of the mobile terminal One, modify the value of the position attribute of the image element to display in the center;

or,

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

or,

The fifth modification subunit is configured to add a boundary attribute value to the partition element if the page element currently being parsed is a partition element.

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

The first attribute removes subunits, which are used to remove the absolute attributes of width and height contained in the page element currently being parsed, positioning attributes, background image attributes and/or attributes related to text display;

and / or,

The second attribute removes the subunit, which is used to remove the border and padding attributes in the element box model.

Wherein, in order to ensure the legibility of the text, the device may also include:

The text color modifying unit is configured to modify the color attribute value of the text contained in the page element if the background image of the page element currently being parsed is removed, so as to ensure the recognition of the text after the background image is removed.

Wherein, the text color modification unit may specifically include:

The first color modification subunit is used to set the text color as the default color of the webpage text if the text color in the page element is white;

or,

The second color modification subunit is used to set the text color as the color of the background color of the element with a preset color difference value if the text color in the web page element is not white and the background color of the element is opaque;

or,

The third color modification subunit is used to set the text color to a color with a preset color difference value from 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.

It can be seen from the above description of the implementation manners that those skilled in the art can clearly understand that the present invention can be implemented by means of software plus a necessary general hardware platform. Based on this understanding, the essence of the technical solution of the present invention or the part that contributes to the prior art can be embodied in the form of software products, and the computer software products can be stored in storage media, such as ROM/RAM, disk , CD, etc., including several instructions to make a computer device (which may be a personal computer, server, or network device, etc.) execute the methods described in various embodiments or some parts of the embodiments of the present invention.

Each embodiment in this specification is described in a progressive manner, the same and similar parts of each embodiment can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device or system embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and for relevant parts, refer to part of the description of the method embodiments. The device and system embodiments described above are only illustrative, and the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, It can be located in one place, or it can be distributed to multiple network elements. Part or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. It can be understood and implemented by those skilled in the art without creative effort.

The method and device for displaying web pages in the mobile terminal provided by the present invention have been described above in detail. In this paper, specific examples are used to illustrate the principle and implementation of the present invention. The description of the above embodiments is only for helping understanding The method of the present invention and its core idea; at the same time, for those of ordinary skill in the art, according to the idea of the present invention, there will be changes in the specific implementation and application range. In summary, the contents of this specification should not be construed as limiting the present invention.

According to the embodiments of the present invention, it is disclosed that:

A1, a method for displaying a webpage in a mobile terminal, is characterized in that, comprising:

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

Analyzing the page elements contained in the webpage resource, judging during the parsing process whether the label corresponding to the current page element affects the typesetting, if there is a label that affects the typesetting, then processing the label that affects the typesetting;

Construct the nodes of the rendering tree according to the processed tags, and judge whether there is a cascading style sheet CSS attribute that affects the layout. If there is a cascading style sheet CSS attribute that affects the layout, remove the CSS attribute that affects the layout, and then follow the constructed rendering tree. The content is drawn and displayed.

A2. The method according to claim A1, wherein said processing the label that affects typesetting comprises:

Remove the tags that affect typesetting, so that when the nodes of the rendering tree are constructed based on the processed tags, the page elements corresponding to the tags are treated as ordinary text.

A3, the method according to claim A2, is characterized in that, said removing the label that affects typesetting comprises:

If the page element currently being parsed is a normal scrolling element, a subscript element or a superscript element, the tag of such page element is removed.

A4. The method according to claim A1, wherein said processing the label that affects typesetting comprises:

Remove the current page element, so that when the node of the rendering tree is constructed according to the processed label, the node corresponding to the page element is no longer generated.

A5. The method according to claim A4, wherein said removing the current page element comprises:

If the page element currently being parsed is a common scrolling element, an element containing an object, an element embedded in a page, a subscript element or a superscript element, such page element is removed.

A6. The method according to claim 1, wherein said processing the label that affects typesetting comprises:

Modify the CSS attribute value defined in the label that affects layout;

The nodes for constructing the rendering tree according to the processed labels include:

The modified CSS property value is used to assign a value to the CSS property of the node corresponding to the page element in the rendering tree.

A7. The method according to claim A6, wherein said modifying the CSS attribute value defined in the label that affects typesetting comprises:

When the page element currently being parsed is a table element, the CSS value of the table element and the inline element of the table element is modified so that the table element can wrap automatically;

or,

When the page element currently being parsed is a form input control, drop-down menu/list, text field or inline frame element, and there is an absolute value representing its width, modify the absolute value to a relative value;

or,

When the page element currently being parsed is an image element, compare the width value of the image element with the screen width value of the mobile terminal, if the width value is greater than the screen width value of the mobile terminal, then move according to the width value and the mobile terminal The ratio between the screen widths of the terminal, the width value is proportionally reduced; if the width value is less than the screen width value of the mobile terminal, but greater than half of the screen width value of the mobile terminal, then the image element The position attribute value is modified to be displayed in the center;

or,

If the page element currently being parsed is a hyperlink element, and the hyperlink element contains an img tag and text, then add a boundary attribute value to the img tag;

or,

If the page element currently being parsed is a partition element, add a boundary attribute value to the partition element.

A8. The method according to claim A1, said removing CSS attributes that affect layout included in the rendering tree node includes:

Remove the absolute attributes of width and height, positioning attributes, background image attributes and/or attributes related to text display contained in the page element currently being parsed;

and / or,

Remove the border and padding properties in the element box model.

A9, the method according to claim A8, is characterized in that, if the background image of the page element currently being parsed is removed, it also includes:

The color attribute value of the text included in the page element is modified to ensure the recognition of the text after the background image is removed.

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

If the text color in the page element is white, then set the text color as the default color of the web page text;

or,

If the text color in the webpage element is not white, and the background color of the element is opaque, then set the text color to the color of the background color of the element with a preset color difference value;

or,

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 with a preset color difference value from the background color of the main element of the web page.

B11, a device for displaying web pages in a mobile terminal, characterized in that it includes:

A resource obtaining unit, configured to receive a request for accessing a webpage through a mobile terminal, and obtain resources corresponding to the webpage from a webpage server according to the request;

The label processing unit is used to analyze the page elements contained in the webpage resources. During the analysis process, it is judged whether the label corresponding to the current page element affects the typesetting. If there is a label that affects the typesetting, the label that affects the typesetting is processed. deal with;

The rendering tree construction unit is used to construct the nodes of the rendering tree according to the processed tags, and judge whether there are cascading style sheet CSS attributes that affect the layout. If there are cascading style sheet CSS attributes that affect the layout, remove the CSS attributes that affect the layout, and then Draw and display the web page content according to the constructed rendering tree.

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

The tag removal subunit is used to remove tags that affect typesetting, so that when the nodes of the rendering tree are constructed based on the processed tags, the page elements corresponding to the tags are treated as ordinary text.

B13. The device according to claim B12, wherein the label removal subunit is specifically used for: if the page element currently being parsed is an ordinary scrolling element, a subscript element or a superscript element, then the The label of this page element is removed.

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

The element removal subunit is used to remove the current page element, so that when the node of the rendering tree is constructed according to the processed label, the node corresponding to the page element is no longer generated.

B15. The device according to claim B14, wherein the element removal subunit is specifically used for: if the page element currently being parsed is a common scrolling element, an element containing an object, an element embedded in a page, Subscript elements or superscript elements, remove such page elements.

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

The attribute value modification subunit is used to modify the CSS attribute value defined in the tag that affects layout;

The rendering tree construction unit is also used for:

The modified CSS property value is used to assign a value to the CSS property of the node corresponding to the page element in the rendering tree.

B17. The device according to claim B16, wherein the attribute value modification subunit comprises:

The first modification subunit is used to modify the CSS value of the table element and the inline element of the table element when the page element currently being parsed is a table element, so that the table element can wrap automatically;

or,

The second modification subunit is used to convert the absolute value to Modified to a relative value;

or,

The third modification subunit is used to compare the width value of the image element with the screen width value of the mobile terminal when the page element currently being parsed is an image element, if the width value is greater than the screen width value of the mobile terminal, Then according to the ratio between the width value and the screen width of the mobile terminal, the width value is proportionally reduced; if the width value is less than the screen width value of the mobile terminal, but greater than half of the screen width value of the mobile terminal One, modify the value of the position attribute of the image element to display in the center;

or,

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

or,

The fifth modification subunit is configured to add a boundary attribute value to the partition element if the page element currently being parsed is a partition element.

B18. The device according to claim B11, the rendering tree construction unit comprises:

The first attribute removes subunits, which are used to remove the absolute attributes of width and height contained in the page element currently being parsed, positioning attributes, background image attributes and/or attributes related to text display;

and / or,

The second attribute removes the subunit, which is used to remove the border and padding attributes in the element box model.

B19. The device according to claim B18, further comprising:

The text color modifying unit is configured to modify the color attribute value of the text contained in the page element if the background image of the page element currently being parsed is removed, so as to ensure the recognition of the text after the background image is removed.

B20. The device according to claim B19, wherein the text color modification unit comprises:

The first color modification subunit is used to set the text color as the default color of the webpage text if the text color in the page element is white;

or,

The second color modification subunit is used to set the text color as the color of the background color of the element with a preset color difference value if the text color in the web page element is not white and the background color of the element is opaque;

or,

The third color modification subunit is used to set the text color to a color with a preset color difference value from 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.

Claims (10)

1. A method for 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.

2. The method according to claim 1, wherein the processing the label affecting the typeset 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.

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

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.

4. The method according to claim 1, wherein the processing the label affecting the typeset 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.

5. The method of claim 4, 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.

6. The method according to claim 1, wherein the processing the label affecting the typeset 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.

7. The method of claim 6, wherein modifying CSS attribute values defined in the tags that affect 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.

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

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.

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

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.

10. 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.