CN104217037B

CN104217037B - A kind of method and device for showing webpage in the terminal

Info

Publication number: CN104217037B
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: 2018-03-23
Anticipated expiration: 2032-04-23
Also published as: CN104217037A

Abstract

The invention discloses a kind of method and device for showing webpage in the terminal, wherein, methods described includes, and receives the request by mobile terminal accessing webpage, is asked according to described to resource corresponding to the web page server acquisition webpage；The page elements included in the web page resources are parsed, judge whether label influences typesetting corresponding to current page element in resolving, if there is the label for influenceing typesetting, then the label of the influence typesetting are handled；According to the node of the label configurations render tree after processing, judge whether the CSS CSS attributes of influence typesetting, if there is the CSS CSS attributes for influenceing typesetting, then the CSS attributes for influenceing typesetting are removed, web page contents are drawn and shown according to the render tree of construction afterwards.By means of the invention it is possible to retain some due picture effects to a certain extent, ensure the vividness of web displaying.

Description

A kind of method and device for showing webpage in the terminal

Technical field

The present invention relates to field of computer technology, more particularly to a kind of method and dress for showing webpage in the terminal Put.

Background technology

As science and technology develops rapidly, mobile terminal (such as mobile phone) has had powerful disposal ability, mobile terminal It is changed into an integrated information processing platform from simple call instrument, browses webpage especially with mobile terminal, The important channel of information is obtained as people.

Initially, in order to browse webpage on mobile terminals, special agreement-WAP (Wireless have been used Application Protocol, WAP), webpage author, which needs to make according to the agreement, to be exclusively used in mobile whole Browsed on end webpage (this webpage is usually to be made using WML (Wireless Markup Language) language, because This, can typically be referred to as WML webpages).But with the continuous lifting of user's request and the development of technology, also can at present It is enough to browse common HTML (Hypertext Markup Language, HTML) webpage on mobile terminals, The webpage made based on html language generally used in internet.However, this html web page is typically all for tradition The equipment (such as desktop computer, notebook computer etc.) with larger display screen and design, and for mobile terminal (such as hand Machine etc.) for, because the size of its display screen is smaller, therefore, want normally to show html web page in the terminal, typically Also need in advance handle html web page, be converted into the form of similar WML webpages.Be converted to by html web page During WML webpages, it is necessary first to page elements are carried out with narrow row's adaptation processing, namely, it is necessary to screen according to mobile terminal Curtain width carries out typesetting to the page elements in html web page again so that and the page elements number shown in per a line tails off, So that when being shown in less display screen, font will not be too small, meanwhile, avoid the occurrence of scroll bar in horizontal direction Phenomenon, it is easy to browsing for user.But prior art is to the page during narrow row is carried out, in order to avoid there is content spilling Phenomena such as mobile phone screen or screen are left white, overlapping display, it can typically be set original in html web page for some page elements The CSS style of meter removes.But it is not lively so to will result in web displaying, some due picture effects disappear.

The content of the invention

The invention provides a kind of method and apparatus for showing webpage in the terminal, can retain to a certain extent Some due picture effects, ensure the vividness of web displaying.

The invention provides following scheme：

A kind of method for showing webpage in the terminal, including：

The request by mobile terminal accessing webpage is received, asks to obtain the webpage to web page server according to described Corresponding resource；

The page elements included in the web page resources are parsed, judge that current page element is corresponding in resolving Label whether influence typesetting, if there is influence typesetting label, then on it is described influence typesetting label handle；

According to the node of the label configurations render tree after processing, judge whether to influence the CSS CSS of typesetting Attribute, if there is the CSS CSS attributes for influenceing typesetting, then the CSS attributes for influenceing typesetting are removed, afterwards according to construction Render tree web page contents are drawn and shown.

Wherein, the label on the influence typesetting, which carries out processing, includes：

The label for influenceing typesetting is removed, so as to which in the node of the label configurations render tree after according to processing, this is marked Page elements corresponding to label are as plain text processing.

Wherein, it is described by influence typesetting label remove including：

If the current page elements parsed are common scrolling element, subscript element or subscript element, incite somebody to action The label of this page elements removes.

Current page element is removed, in the node of the label configurations render tree after according to processing, not regenerate Node corresponding to the page elements.

Wherein, it is described by current page element remove including：

If the current page elements parsed are common scrolling element, the element comprising object, the embedded page Element, subscript element or subscript element, then this page elements are removed.

The CSS property values defined in label that typesetting will be influenceed are modified；

The node of the label configurations render tree according to after processing includes：

Assignment is carried out using the CSS attributes that amended CSS property values are node corresponding to the page elements in render tree.

Wherein, it is described will influence typesetting label defined in CSS property values modify including：

When the current page elements parsed are table element, to the inline member of table element and table element The CSS values of element are modified, so that the table element can enter a new line automatically；

Or

When the current page elements parsed are list input control, drop-down menu/list, textview field or inline Frame elements, and exist represent its width absolute figure when, the absolute figure is revised as relative value；

Or

When the current page elements parsed are pictorial element, compare the width values of the pictorial element with moving The screen width value of dynamic terminal, if the width values are more than the screen width value of mobile terminal, according to the width values Ratio between the screen width of mobile terminal, width values described in scaled down；If the width values are less than movement The screen width value of terminal, but the half of the screen width value more than mobile terminal, then belong to the position of the pictorial element Property value is revised as being shown centered on；

Or

If the current page elements parsed are hyperlink element, and are included in the hyperlink element Img labels and text, then add frontier properties value for the img labels；

Or

If the current page elements parsed are partition element, frontier properties are added for the partition element Value.

Wherein, it is described by the CSS attributes for rendering the influence typesetting included in tree node remove including：

Absolute attribute, positioning properties, the Background for the Width x Height that the current page elements parsed are included Attribute and/or show that related attribute removes to text；

And/or

Frame in element BOX Model is removed with fill area attribute.

Wherein, if the Background of the current page elements parsed removed, in addition to：

The color attribute value of the text included in the page elements is changed, to ensure the text after Background is removed This identification.

Wherein, the color attribute value of the text included in the modification page elements, including：

If textcolor is white in page elements, it is web page text default color to set the textcolor；

Or

If textcolor is not white in web page element, and the element background value color is opaque, then sets text face Color is the color that the element background value color has preset value of chromatism；

Or

If textcolor is not white in web page element, and the element background value color is transparent, then sets textcolor There is the color of preset value of chromatism for the background colour of the main element with this webpage.

A kind of device for showing webpage in the terminal, including：

Resource acquisition unit, for receiving the request by mobile terminal accessing webpage, asked according to described to webpage Server obtains resource corresponding to the webpage；

Tag processes unit, for being parsed to the page elements included in the web page resources, in resolving, sentence Whether label corresponding to disconnected current page element influences typesetting, if there is the label for influenceing typesetting, then on the influence typesetting Label handled；

Render tree structural unit, for the node according to the label configurations render tree after processing, judge whether to influence The CSS CSS attributes of typesetting, if there is the CSS CSS attributes for influenceing typesetting, then removing influences typesetting CSS attributes, web page contents are drawn and shown according to the render tree of construction afterwards.

Wherein, the tag processes unit includes：

Label removes subelement, for the label for influenceing typesetting to be removed, so as to the label configurations wash with watercolours after according to processing When contaminating the node of tree, using page elements corresponding to the label as plain text processing.

Wherein, the label removes subelement and is specifically used for：If the current page elements parsed are common Scrolling element, subscript element or subscript element, then remove the label of this page elements.

Wherein, the tag processes unit includes：

Element removes subelement, for current page element to be removed, so that the label configurations after according to processing render During the node of tree, node corresponding to the page elements is not regenerated.

Wherein, the element removes subelement and is specifically used for：If the current page elements parsed are common Scrolling element, the element comprising object, element, subscript element or the subscript element of the embedded page, then remove this page elements Fall.

Wherein, the tag processes unit includes：

Property value changes subelement, for the CSS property values influenceed defined in the label of typesetting to be modified；

The render tree structural unit is additionally operable to：

Wherein, the property value modification subelement includes：

First modification subelement, it is first to form for when the current page elements parsed be table element The CSS values of the inline element of element and table element are modified, so that the table element can enter a new line automatically；

Or

Second modification subelement, for being list input control, pulling down dish when the current page elements parsed List/list, textview field or inline frame element, and exist represent its width absolute figure when, the absolute figure is repaiied It is changed to relative value；

Or

3rd modification subelement, for when the current page elements parsed are pictorial element, comparing the figure The width values and the screen width value of mobile terminal of pixel element, if the width values are more than the screen width of mobile terminal Value, then according to the ratio between the width values and the screen width of mobile terminal, width values described in scaled down；If The width values are less than the screen width value of mobile terminal, but the half of the screen width value more than mobile terminal, then will The position attribution value of the pictorial element is revised as being shown centered on；

Or

4th modification subelement, if it is hyperlink element for the current page elements that are parsing, and institute State and img labels and text are included in hyperlink element, then add frontier properties value for the img labels；

Or

5th modification subelement, if being partition element for the current page elements parsed, to be described Partition element adds frontier properties value.

Wherein, the render tree structural unit includes：

First attribute removes subelement, for the exhausted of the Width x Height that includes the current page elements parsed To attribute, positioning properties, Background attribute and/or to text show that related attribute removes；

And/or

Second attribute removes subelement, for the frame in element BOX Model to be removed with fill area attribute.

Wherein, in addition to：

Textcolor changes unit, if for the Background of the current page elements parsed to be removed, repaiies Change the color attribute value of the text included in the page elements, to ensure the identification of the text after Background is removed Degree.

Wherein, the textcolor modification unit includes：

First color changes subelement, if being white for textcolor in page elements, sets the text face Color is web page text default color；

Or

Second color changes subelement, if it is not white for textcolor in web page element, and the element is carried on the back Scenery is opaque, then it is the color that the element background value color has preset value of chromatism to set textcolor；

Or

3rd color changes subelement, if it is not white for textcolor in web page element, and the element is carried on the back Scenery is transparent, then it is the color for having preset value of chromatism with the background colour of the main element of this webpage to set textcolor.

According to specific embodiment provided by the invention, invention achieves following technique effect：If current page element Corresponding label influences typesetting, then the label for influenceing typesetting is handled, to eliminate influence of the label to typesetting, passed through Processing to label can avoid influence of the page elements corresponding to label to typesetting；According to the label configurations render tree after processing Node, also, if there is influence typesetting CSS CSS attributes, then by it is described influence typesetting CSS attributes go Fall, so as to which web page contents are drawn and shown in the terminal according to the render tree of construction, the CSS for influenceing typesetting is belonged to Property remove, can avoid CSS attributes setting and cause page elements display effect influence typesetting.Wherein to the processing of label Relative priority is revised as including the modification to CSS attributes corresponding to label, such as by the absolute attribute of its width, hence in so that net Page typesetting can be adapted to different clients according to client screen size.Meanwhile it will simply be influenceed in the embodiment of the present invention The label C SS attributes of typesetting are handled, and remove the CSS attributes for influenceing typesetting, and without that will be designed by page elements All CSS styles remove, therefore, some due picture effects can be retained to a certain extent, ensure web displaying Vividness.

Brief description of the drawings

In order to illustrate more clearly about the embodiment of the present invention or technical scheme of the prior art, below will be to institute in embodiment The accompanying drawing needed to use is briefly described, it should be apparent that, drawings in the following description are only some implementations of the present invention Example, for those of ordinary skill in the art, on the premise of not paying creative work, can also be obtained according to these accompanying drawings Obtain other accompanying drawings.

Fig. 1 is the flow chart of method provided in an embodiment of the present invention；

Fig. 2 is the schematic diagram of first device provided in an embodiment of the present invention；

Fig. 3 is the schematic diagram of second device provided in an embodiment of the present invention；

Fig. 4 is the schematic diagram of 3rd device provided in an embodiment of the present invention；

Fig. 5 is the schematic diagram of the 4th device provided in an embodiment of the present invention.

Embodiment

Below in conjunction with the accompanying drawing in the embodiment of the present invention, the technical scheme in the embodiment of the present invention is carried out clear, complete Site preparation describes, it is clear that described embodiment is only part of the embodiment of the present invention, rather than whole embodiments.It is based on Embodiment in the present invention, the every other embodiment that those of ordinary skill in the art are obtained, belong to what the present invention protected Scope.

S101：The request by mobile terminal accessing webpage is received, asks to obtain institute to web page server according to described State resource corresponding to webpage；

Firstly the need of explanation, current web browser is roughly divisible into two types：Client, which is directly embedded into, to be browsed Device and C/S (client/agent server) architecture browser.Wherein, the former be directly by browser access webpage, that is, Browser directly sends the request to web page server after receiving user and accessing the request of certain webpage, obtains webpage After the web data that server returns, parsed and rendered locally, finally shown；The latter is that browser is divided into visitor Family end and service end two parts, wherein client are run on the subscriber terminal, and service end is run on the remote server, client After the request of user's access webpage is received, the service end of oneself is sent the requests to first, is then accessed by service end Web page server, after the web data of web page server return is got, calculating is parsed and is rendered in service end, then The result of calculating is sent to by client by proprietary protocol, shown on the subscriber terminal according to result of calculation by client, phase When in all interactions being completed under the assistance of service end.The embodiment of the present invention goes for a kind of any of the above described feelings Condition.

Web page server is receiving mobile terminal, such as mobile phone, PAD (Personal Digital Assistant, individual Assistant) etc., during the http request of the access webpage of transmission, described web page resources can be returned, but existing webpage layout and Display is most of both for traditional PC (personal computer, PC) display screen, therefore, by mobile whole , it is necessary to carry out narrow row's adaptation to described web page contents when end accesses webpage, web page contents otherwise can be caused in the terminal Occur content of text during display and overflow screen or other situations about not being adapted to.Mobile terminal send access web-page requests when, Its resolution information can be included in solicited message, therefore, can be by resolution request message, according to the resolution ratio of mobile terminal Information carries out corresponding narrow row's adaptation.In addition, for mobile phone browser or server end pre-saves each model The resolution information of mobile phone, now, need to only obtain the model of mobile phone, and phase is carried out according to resolution information corresponding to various trumpeter's machine The narrow row adaptation answered.

S102：The page elements included in the web page resources parse, and render tree node corresponding to generation Resolving in, judge whether label influences typesetting corresponding to current page element, if there is influence typesetting label, then The label of the influence typesetting is handled, to eliminate influence of the label to typesetting；

For the ease of understanding this step, first CSS (Cascading Style Sheet, CSS are simply introduced It is single).CSS is that one kind is used for showing the texts such as HTML (Hypertext Markup Language, HTML) or XML The computer language of part style, it can be used for carrying out the design of web page style.Such as it is blueness when wanting and not clicking on link word , become red after mouse movement up and have underscore, here it is a kind of style.The realization of such a style can be by right The settings of the CSS attributes of respective element is realized.

The display effect of html page is controlled there are following several ways currently with CSS：

1) mode in row, can directly be applicable html tag style=＂＂ to realize.

2) inline mode, between CSS codes exactly are write on into ＜ head ＞＜/head ＞, and with ＜ style ＞＜/ Style ＞ are declared.

3) on-link mode (OLM), only need to be between ＜ head ＞＜/head ＞ plus a link, by the herf attributes of the link Value is arranged to outside CSS filenames.This mode realizes being completely separated for html file and CSS files so that pre-production It is quite convenient to later maintenance.If keeping page style unified, if these public CSS files are individually preserved into One file, other page cans call the CSS files of needs respectively, if desired for change web page style, it is only necessary to change Public CSS files can is realized.

4) lead-in mode, lead-in mode and link shape are more similar, and CSS style sheet is imported using improt modes, When HTML is initialized, it can be directed in html file, turn into a part for file.

It is easy to operate due to realizing controls of the CSS to html page display effect by on-link mode (OLM), also allow for simultaneously Management and maintenance, therefore, current most websites all control page display effect using on-link mode (OLM).

In addition, in order to make it easy to understand, the groundwork flow of rendering engine is simply introduced again.Rendering engine it is basic Workflow is：Build Dom trees, structure Render trees, layout Render trees, drafting Render trees.Rendering engine is got After html page resource, start to parse html page content, and by it is therein it is label converting be Dom tree nodes, and build Dom Tree.Then it starts to parse the style information in CSS files and style labels, these style informations and HTML page for getting Observability instruction in face will be used to build Render trees.Render trees are that Dom trees are described in further detail, by element Visual elements composition in display sequence, it is the visable representation of document, and it is in order to correctly sequentially to paint to build this tree Document content processed.Rendering objects and Dom elements are corresponding, but this corresponding relation is not necessarily man-to-man, sightless Dom Element will not be inserted into render tree, such as head elements.In addition, the element that display attributes are none also will not be in render tree Middle appearance.The root that html and body labels will build render tree is handled, this root rendering objects is corresponding to be referred to as by css specifications Containing block element --- contain the top piece of element of other all pieces of elements.Its size is exactly The viewing area of viewport --- browser window, it is referred to as viewPortFrame to Firefox, and webkit is referred to as RenderView, this is exactly the rendering objects pointed by document, and other parts are all saved as the Dom of an insertion in tree Point is created.

In render tree, each node (rendering objects) has its corresponding pattern, therefore establishment render tree needs to calculate Go out the visual attributes of each rendering objects, this can be obtained by calculating the Style Attributes of each element.Pattern includes various next Visual attribute (such as bgcolor) in the CSS in source, inline style element and html, visual attribute is converted into css Style Attributes.CSS derives from browser stylesheet, and CSS --- some samples that page author and user provide Formula be browser client provide (browser allows user to define the pattern liked, for example, in Firefox, can by CSS is placed under Firefox Profile catalogues to realize.

The embodiment of the present invention is exactly to generate the render tree stage in rendering engine, real by changing the CSS attributes of page elements The effect that the pattern of the page elements calculated can be fitted on various sizes of mobile terminal screen is showed.Concrete modification page The attribute of surface element is carried out for the class RenderStyle in webkit.Because each member is corresponding CSS in such Various patterns.It is specifically described below.

The render tree stage is built in browser rendering engine, it will obtains the CSS style information of page elements.But this When the CSS style information that obtains can not directly cover and use mobile terminal because existing webpage is primarily directed to PC display screens, Therefore the CSS style of some of which page elements is not appropriate for mobile terminal and shown, so, getting page elements After CSS style information, if label corresponding to current page element influences typesetting, need at the label to influenceing typesetting Reason, to eliminate influence of the label to typesetting.Wherein, the label of described influence typesetting includes form and the subtab of correlation (including head of form, form body, table row), list input control, drop-down menu/list, textview field, image, hyperlink, point Area, common scrolling, include object, embedded element, subscript, subscript, inline frame etc..Specifically handled to these labels When, different situations can be directed to and carry out different processing, for example, one of which processing mode can be：It is special for some Label, when the label to influenceing typesetting is handled, the label directly by this influence typesetting can also be used to remove Mode, that is to say, that retain current page elements, but will be that the label that the element is set removes originally so that the element No longer it is shown as the pattern set by original label.The mode specifically removed can set the disply attributes of the label It is set to none.Such as：

(1) common scrolling (marquee)

Marquee labels are for controlling font to roll.Because part cell-phone customer terminal does not support marquee rolling Function, or the effect supported are not so good, in order to not influence typesetting effect, can be gone by handling the display properties of the label Fall the label.After removing label, by there is no the effect of rolling when the content in label is shown in webpage.

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

Sub is used for defining subscript text, and the text in label presses the half of normal text height below baseline To show.Sup is used for defining subscript text, and the text in label is come more than baseline by the half of normal text height Display.The two footmark elements can cause overall typesetting irregular, and element layout is chaotic, if so existed in the page with subscript Label, can remove label.After removing label, the content in footmark label can be shown according to the pattern of plain text, i.e., with Plain text is in same baseline, and font information is consistent.

Current page element corresponding to label is removed in addition, carrying out processing to the label for influenceing typesetting and can also be.Example Such as, if the current page elements parsed are foregoing common scrolling element, subscript element or subscript element, directly by this Kind page elements remove.That is, node corresponding to the page elements in render tree no longer be present, and then in webpage It would not again draw and show the page elements, it is clear that also can eliminates influence of the page elements to typesetting.

Certainly, during specific implementation, except above-mentioned common scrolling element, subscript element or subscript element can directly remove it Outside, the page elements comprising object (object), embedded (embed) can also directly remove.Wherein, object and embed are embedding It is all for adding multimedia file, such as audio, video, flash into the page to enter element.Object labels are to be used for The IE browser of windows platforms, and embed is for the Netscape under windows and macintosh platform IE browser under Navigator browsers and macintosh platform.Typically in order to ensure most of browsers can normally show Show flash, it is necessary to which embed label nestings are placed in object labels.Supporting the browser of activex control will ignore Embed labels in object labels.Netscape and using plug-in unit IE browser will only read embed labels without knowing Other object labels.For example,<Object classid=" clsid:F08DF954-8592-11D1-B16A- 00C0F0283628 " id=" Slider1 " width=" 100 " height=" 50 "></object>, wherein, classid is used for Define the ID values of the class in embedded web page, this attribute can be used to the position of the object included in specified browser, typically one Java class.But most mobile phone browser does not support flash animation at present, if including two above-mentioned members in the page Element, in order to not influence typesetting effect, then it can remove this page elements., will not in webpage after this page elements are removed The elements such as specific video, audio, flash are shown again.

The CSS property values influenceed defined in the label of typesetting are modified in addition, the processing on label can also be, That is retaining current page elements and its label, but need to being that the property value of the element definition is modified in label, To cause the label no longer to influence typesetting.For example, the label that following dvielement can be directed to during specific implementation is belonged to respectively The modification of property value：

(1) form (table) and corresponding inline element (th, td, tr)

Web page maker often uses form to cause page general layout in good order, and multiple row is generally had in a form Multirow, and line width is typically to adapt to PC display screens, therefore for mobile terminal display screen curtain, table row just occurs It is wider than the situation of screen width, because list cell can not enter a new line automatically, and then causes partial table content to overflow screen.Cause This, can be by CSS selector to table element and form member if the current page elements parsed are table element The cascading style Table Properties of the inline element of element are changed accordingly so that table content can enter a new line automatically, so as to adapt to The screen of different sizes.

(2) list input control (input), drop-down menu/list (select), textview field (textarea) or inline frame Frame (iframe)

List input control (Input) represent Form lists a kind of input object, its again with Type types difference and It is divided into Text Entry, Password Input frame, single choice/check box, submission/reset button etc..Drop-down menu/list (Select) member Element can create single choice or multiselect menu.Textview field (textarea) is the text-entry control for defining multirow, can be held in text area Receive an infinite number of text.Iframe elements can create the inline frame (inner frame at once) comprising another document.

If the page elements currently parsed are above-described any one or more element, and the width category of element Property when being absolute figure, then width is revised as relative width, its property value is 100% so that its content can take mobile phone Screen width.Because absolute value width may bring screen to be left white or folds problem, impacted to typesetting.For example, In the case of acquiescence, iframe width is 300px, and when mobile terminal screen width is more than 300px, screen just occurs Iframe width attribute, therefore, can be revised as relative width, property value 100% by curtain right side significantly blank.Now Content of text can take screen all the time in iframe.

(3) image (img)

Img elements are used for inserting a width picture in webpage, the width attributes of the element, are to be used to designated pictures insert The width shown after webpage, the width may influence whether typesetting, therefore, if the current page elements parsed are image It is also required to modify during element.Specifically, the width values of pictorial element can be got first, by itself and mobile terminal Screen width value contrasts, when width values are more than the screen width of mobile terminal, by the progress of width values and screen size etc. The scaling of ratio, concrete operations can be setstyle (Length (Auto)), can normally be shown according to screen size.Such as Fruit picture width can change its position attribution value without departing from screen width, but more than the half of screen width To be shown centered on, can be shown centered on mobile terminal screen.

(4) hyperlink (a)

In a labels, img labels are may be inserted into, the picture now inserted in img labels just turns into image hyperlink, point The hyperlink can be opened by hitting any part of picture.In order to avoid the picture other texts corresponding with label are being shown When overlap, add frontier properties value (margin) for the img labels, while in order to avoid two adjacent hyperlink connections To together, frontier properties can be set for a labels.Margin this write a Chinese character in simplified form attribute all outer back gauges of one element can be set Width, or the width of outer back gauge on each side is set.

(5) subregion (div)

DIV element is that the content of the bulk (block-level) in for html document provides the element of structure and background. All the elements between DIV start-tag and end-tag are all the spies of element included in it for forming this block Property is controlled by the attribute of DIV labels, or is controlled by using this block of fstyleformat.scrolltrackization.If currently just It is partition element in the page elements of parsing, can is each in order to avoid the frame between father and son and fraternal subregion is overlapping Div elements set margin attributes.

It should be noted that for the webpage that mobile terminal to be accessed, can not necessarily include all above-mentioned described Influence typesetting label, it is possible to only include one or more.Therefore, during specific implementation, Ke Yigen According to the actual conditions of the different pages, the label of one or more above-mentioned influence typesettings on occurring in the page is handled.

S103：According to the node of the label configurations render tree after processing, also, if it is determined that with the presence or absence of influence typesetting CSS CSS attributes, if there is the CSS CSS attributes for influenceing typesetting, then remove the influence typesetting CSS attributes remove, so that the render tree afterwards according to construction is drawn and shown to web page contents in the terminal.

Rendering engine is required for calculating its corresponding pattern when generating render tree for each node, namely need by The CSS style property value of acquisition is applied to corresponding node.Because the CSS attributes of some page elements also influence whether typesetting, Therefore, it is necessary to which these corresponding attributes are removed during calculating pattern herein, do not apply it on corresponding node, with Eliminate influence of the attribute to typesetting.Wherein, these attributes for influenceing typesetting can include：Wide high absolute value attribute, element Frame in BOX Model shows related attribute to fill area attribute, the attribute of setting Background, with text.It is right in the present embodiment The processing of these attributes is specially：

(1) wide high absolute attribute

Given for absolute value wide high attribute (width, min-width, max-width, height, min-height, Max-height, size), content of pages can be made to occur when being adapted to mobile phone screen disproportionate or overflow mobile phone screen Phenomenon.For example, width value is given absolute value in the CSS attributes of some elements in former webpage, it is assumed that its width attribute value is width:320px, it is absolute value because its is given, therefore, width is all understood as after parsing for any browser It is 320px, then for display of the screen width less than 320px, just occur that content overflows the phenomenon of screen.Therefore In order to not influence typesetting, above-described wide high related absolute value attribute need to be filtered out.

(2) border (margin) in element BOX Model and filling (padding) attribute

CSS can regard all web page elements as one rectangle frame, and these frames are by the content of element, filling, frame (border) formed with border.Filling is the space between the content of element and frame.Border is an element and another yuan Interval between element.The border of element and fill area attribute can cause webpage Chinese version content folds and screen to leave asking for blank Topic, it is therefore desirable to filter out these attributes.

(3) positioning properties

The attribute related to the position of element (position, center, align, left, right, bottom, top, Text-align), can cause page elements the process being adapted with mobile phone screen occur position display it is incorrect or overflow The phenomenon of mobile phone screen, cause very big problem to typesetting, it is therefore desirable to filter out these attributes.

(4) Background attribute

Background (background-image) attribute is that element sets background image.The background of element occupies element Overall dimension, including inset spacing and frame, but do not include outer back gauge.Acquiescently, background image is located at the upper left corner of element, and It is both horizontally and vertically upper to repeat.

During being adapted to mobile phone screen, due to the cutting of overall background figure and the repetition of small Background can not be handled, Therefore background-image attributes are filtered out.Due to eliminating Background, therefore color can be caused identical with background colour Text can not show, it is described after Background is removed to ensure so the color attribute value of text can also be reset The identification of text.Can be during specific implementation：If textcolor is white in page elements, setting textcolor is net Page text default color；If textcolor is not white in web page element, and element background value color is opaque, then sets text Color is the color for having with element background value color certain value of chromatism；If textcolor is not white in web page element, and first The background colour of element is transparent, then it is to have a fixation with the background colour of the main element (body elements) of this webpage to set textcolor The color of difference.Wherein, specific value of chromatism can be pre-set based on experience value etc..

(5) related attribute is shown to text

Text enters a new line (word-wrap) attribute for controlling whether current line disconnects when exceeding the border of specified containers automatically Change one's profession, default value is allows content top to open the Vessel Boundary specified, if selection property value is break-word, content will be Entered a new line in border.Text-indent attributes are used for controlling first trip word in text block to be retracted.These show related category to text Property the problem of all causing in webpage the folds of word and leaving blank, it is therefore desirable to filter out these attributes.

Specifically when removing the attribute for influenceing typesetting, it can be carried out as follows：The all properties of current page element are carried out Poll, when being polled to the attribute that some needs removes, carriage return operation is directly carried out, and any attribute is no longer assigned for the attribute Value, thus equivalent to eliminating the attribute.

After to label is handled corresponding to page elements, the label and page elements of typesetting are influenceed due to eliminating Or the CSS attributes of label have been reset, while the CSS attributes of the influence typesetting to page elements are filtered, therefore After rendering and being laid out, the web page contents can that mobile terminal is asked is normally displayed on its screen, without not The situation of adaptation.

In addition, in order that obtaining the html pages can normally show on mobile phone, prior art, which also has, is implemented as described below mode：It is logical Cross WAP transcoding servers and html page is converted into WAP forms, by possessing the completion of the cell-phone customer terminal of complete WAP analytic abilities Typesetting and screen drawing, it is done so that so that the JAVASCRIPT of the former page is filtered, browser engine is relied on the former page The afunction that could be supported after parsing JAVASCRIPT.And it is to the element property in former html page in the embodiment of the present invention Corresponding adaptation processing is carried out, without being simplified to former html page.Therefore, the JAVASCRIPT of former webpage can be protected all Stay, without doing filtration treatment, thereby may be ensured that JAVASCRIPT institute is effective can show in mobile terminal screen.

Corresponding with the method provided in an embodiment of the present invention for showing webpage in the terminal, the embodiment of the present invention also carries A kind of device for showing webpage in the terminal is supplied, referring to Fig. 2, the device can include：

Resource acquisition unit 201, for receiving the request by mobile terminal accessing webpage, asked according to described to net Page server obtains resource corresponding to the webpage；

Tag processes unit 202, the page elements for being included in the web page resources parse, resolving In, judge whether label influences typesetting corresponding to current page element, if there is the label for influenceing typesetting, then on the influence The label of typesetting is handled, to eliminate influence of the label to typesetting；

Render tree structural unit 203, for the node according to the label configurations render tree after processing, judge whether shadow The CSS CSS attributes for version of rehearsing with musical accompaniment, if there is the CSS CSS attributes for influenceing typesetting, then removing influences typesetting CSS attributes, web page contents are drawn and shown in the terminal according to the render tree of construction afterwards.

During specific implementation, for some special labels, referring to Fig. 3, tag processes unit 202 can include：

Label removes subelement 2021, for the label for influenceing typesetting to be removed, so as to the label structure after according to processing When making the node of render tree, using page elements corresponding to the label as plain text processing.

Wherein, label removes subelement and is specifically used for：If the current page elements parsed are common scrolling Element, subscript element or subscript element, then remove the label of this page elements.

Or it can also include referring to Fig. 4, tag processes unit 202：

Element removes subelement 2022, for current page element to be removed, so as to the label configurations after according to processing During the node of render tree, node corresponding to the page elements is not regenerated.

Wherein, element removes subelement and specifically can be used for：If the current page elements parsed are common Scrolling element, the element comprising object, element, subscript element or the subscript element of the embedded page, then remove this page elements Fall.

Furthermore referring to Fig. 5, tag processes unit 202 can also include：

Property value changes subelement 2023, for the CSS property values influenceed defined in the label of typesetting to be modified；

Accordingly, render tree structural unit 203 can be also used for：

Wherein, the property value modification subelement can specifically include：

Or

In actual applications, render tree structural unit 203 can include：

And/or

Wherein, in order to ensure text can identification, the device can also include：

Wherein, textcolor modification unit can specifically include：

Or

As seen through the above description of the embodiments, those skilled in the art can be understood that the present invention can Realized by the mode of software plus required general hardware platform.Based on such understanding, technical scheme essence On the part that is contributed in other words to prior art can be embodied in the form of software product, the computer software product It can be stored in storage medium, such as ROM/RAM, magnetic disc, CD, including some instructions are causing a computer equipment (can be personal computer, server, either network equipment etc.) performs some of each embodiment of the present invention or embodiment Method described in part.

Each embodiment in this specification is described by the way of progressive, identical similar portion between each embodiment Divide mutually referring to what each embodiment stressed is the difference with other embodiment.Especially for device or For system embodiment, because it is substantially similar to embodiment of the method, so describing fairly simple, related part is referring to method The part explanation of embodiment.Apparatus and system embodiment described above is only schematical, wherein the conduct The unit that separating component illustrates can be or may not be it is physically separate, can be as the part that unit is shown or Person may not be physical location, you can with positioned at a place, or can also be distributed on multiple NEs.Can root Factually border needs to select some or all of module therein realize the purpose of this embodiment scheme.Ordinary skill Personnel are without creative efforts, you can to understand and implement.

Above to the method and device provided by the present invention for showing webpage in the terminal, it is described in detail, Specific case used herein is set forth to the principle and embodiment of the present invention, and the explanation of above example is simply used Understand the method and its core concept of the present invention in help；Meanwhile for those of ordinary skill in the art, according to the present invention's Thought, in specific embodiments and applications there will be changes.In summary, this specification content should not be construed as Limitation of the present invention.

According to an embodiment of the invention, disclose:

A1, a kind of method for showing webpage in the terminal, it is characterised in that including：

A2, the method according to claim A1, it is characterised in that it is described on it is described influence typesetting label at Reason includes：

A3, the method according to claim A2, it is characterised in that it is described by influence typesetting label remove including：

A4, the method according to claim A1, it is characterised in that it is described on it is described influence typesetting label at Reason includes：

A5, the method according to claim A4, it is characterised in that it is described by current page element remove including：

A6, the method according to claim 11, it is characterised in that it is described on it is described influence typesetting label at Reason includes：

A7, the method according to claim A6, it is characterised in that described to influence defined in the label of typesetting CSS property values modify including：

Or

A8, the method according to claim A1, the CSS attributes that the influence typesetting included in tree node will be rendered Remove including：

And/or

Frame in element BOX Model is removed with fill area attribute.

A9, the method according to claim A8, it is characterised in that if the current page parsed is first The Background of element removes, then also includes：

A10, the method according to claim A9, it is characterised in that included in the modification page elements The color attribute value of text, including：

Or

B11, a kind of device for showing webpage in the terminal, it is characterised in that including：

B12, the device according to claim B11, it is characterised in that the tag processes unit includes：

B13, the device according to claim B12, it is characterised in that the label removes subelement and is specifically used for： If the current page elements parsed are common scrolling element, subscript element or subscript element, by this page The label of element removes.

B14, the device according to claim B11, it is characterised in that the tag processes unit includes：

B15, the device according to claim B14, it is characterised in that the element removes subelement and is specifically used for： If the current page elements parsed are common scrolling element, the element of the element comprising object, the embedded page, under Element or subscript element are marked, then is removed this page elements.

B16, the device according to claim B11, it is characterised in that the tag processes unit includes：

The render tree structural unit is additionally operable to：

B17, the device according to claim B16, it is characterised in that the property value modification subelement includes：

Or

B18, the device according to claim B11, the render tree structural unit include：

And/or

B19, the device according to claim B18, it is characterised in that also include：

B20, the device according to claim B19, it is characterised in that the textcolor modification unit includes：

Or

Claims

A kind of 1. method for showing webpage in the terminal, it is characterised in that including：

The request by mobile terminal accessing webpage is received, asks to correspond to the web page server acquisition webpage according to described Resource；

The page elements included in the web page resources are parsed, judge to mark corresponding to current page element in resolving Whether label influence typesetting, if there is the label for influenceing typesetting, then the label of the influence typesetting are handled；The influence The label of typesetting includes：The page elements are common scrolling element, subscript element or label corresponding to subscript element；

According to the node of the label configurations render tree after processing, judge whether to influence the CSS CSS attributes of typesetting, If there is the CSS CSS attributes for influenceing typesetting, then the CSS attributes for influenceing typesetting are removed, afterwards according to the wash with watercolours of construction Dye tree is drawn and shown to web page contents；Wherein,

The label on the influence typesetting is handled, including：

The label for influenceing typesetting is removed, so as in the node of the label configurations render tree after according to processing, by the label pair The page elements answered are as plain text processing.
2. according to the method for claim 1, it is characterised in that the label on the influence typesetting carries out processing bag Include：

Current page element is removed, in the node of the label configurations render tree after according to processing, not regenerate the page Node corresponding to surface element.
3. according to the method for claim 2, it is characterised in that it is described by current page element remove including：

If the current page elements parsed are common scrolling element, the element comprising object, the member of the embedded page Element, subscript element or subscript element, then remove this page elements.
4. according to the method for claim 1, it is characterised in that the label on the influence typesetting carries out processing bag Include：

The CSS property values defined in label that typesetting will be influenceed are modified；

The node of the label configurations render tree according to after processing includes：

Assignment is carried out using the CSS attributes that amended CSS property values are node corresponding to the page elements in render tree；Its In, the label for influenceing typesetting includes：

The page elements be table element, list input control, drop-down menu/list, textview field or inline frame element, Pictorial element, hyperlink element or label corresponding to partition element.
5. according to the method for claim 4, it is characterised in that the CSS attributes by defined in the label of influence typesetting Value modify including：

When the current page elements parsed are table element, to the inline element of table element and table element CSS values are modified, so that the table element can enter a new line automatically；

Or

When the current page elements parsed are list input control, drop-down menu/list, textview field or inline frame Element, and exist represent its width absolute figure when, the absolute figure is revised as relative value；

Or

When the current page elements parsed are pictorial element, width values and the movement for comparing the pictorial element are whole The screen width value at end, if the width values are more than the screen width value of mobile terminal, according to the width values with moving Ratio between the screen width of dynamic terminal, width values described in scaled down；If the width values are less than mobile terminal Screen width value, but more than mobile terminal screen width value half, then by the position attribution value of the pictorial element It is revised as being shown centered on；

Or

If the current page elements parsed are hyperlink element, and are marked in the hyperlink element comprising img Label and text, then add frontier properties value for the img labels；

Or

If the current page elements parsed are partition element, frontier properties value is added for the partition element.
It is 6. according to the method for claim 1, described to go to exchange by the CSS attributes for rendering the influence typesetting included in tree node Include：

Absolute attribute, positioning properties, the Background attribute for the Width x Height that the current page elements parsed are included And/or show that related attribute removes to text；

And/or

Frame in element BOX Model is removed with fill area attribute.
7. according to the method for claim 6, it is characterised in that if the back of the body by the current page elements parsed Scape figure removes, then also includes：

The color attribute value of the text included in the page elements is changed, to ensure the text after Background is removed Identification.
8. according to the method for claim 7, it is characterised in that the face of the text included in the modification page elements Color property value, including：

If textcolor is white in page elements, it is web page text default color to set the textcolor；

Or

If textcolor is not white in web page element, and the element background value color is opaque, then setting textcolor is The element background value color has the color of preset value of chromatism；

Or

If textcolor is not white in web page element, and the element background value color is transparent, then set textcolor be with The background colour of the main element of this webpage has the color of preset value of chromatism.
A kind of 9. device for showing webpage in the terminal, it is characterised in that including：

Resource acquisition unit, for receiving the request by mobile terminal accessing webpage, asked according to described to web service Device obtains resource corresponding to the webpage；

Tag processes unit, for parsing the page elements included in the web page resources, in resolving, judge to work as Whether label influences typesetting corresponding to preceding page elements, if there is the label for influenceing typesetting, then on the mark of the influence typesetting Label are handled；The label for influenceing typesetting includes：The page elements are common scrolling element, subscript element or subscript member Label corresponding to element；

Render tree structural unit, for the node according to the label configurations render tree after processing, judge whether to influence typesetting CSS CSS attributes, if there is influence typesetting CSS CSS attributes, then remove influence typesetting CSS category Property, web page contents are drawn and shown according to the render tree of construction afterwards；Wherein,

The tag processes unit includes：

Label removes subelement, for the label for influenceing typesetting to be removed, so as to the label configurations render tree after according to processing Node when, using page elements corresponding to the label as plain text processing.
10. device according to claim 9, it is characterised in that the tag processes unit includes：

Element removes subelement, for current page element to be removed, so as to the label configurations render tree after according to processing During node, node corresponding to the page elements is not regenerated.
11. device according to claim 10, it is characterised in that the element removes subelement and is specifically used for：If institute It is common scrolling element, the element comprising object, element, the subscript element of the embedded page to state the current page elements parsed Or subscript element, then this page elements are removed.
12. device according to claim 9, it is characterised in that the tag processes unit includes：

Property value changes subelement, for the CSS property values influenceed defined in the label of typesetting to be modified；

The render tree structural unit is additionally operable to：

Assignment is carried out using the CSS attributes that amended CSS property values are node corresponding to the page elements in render tree；Its In, the label for influenceing typesetting includes：

The page elements are table element, list input control, drop-down menu/list, textview field or inline frame element, figure Pixel element, hyperlink element or label corresponding to partition element.
13. device according to claim 12, it is characterised in that the property value modification subelement includes：

First modification subelement, for when the current page elements parsed are table element, to table element and The CSS values of the inline element of table element are modified, so that the table element can enter a new line automatically；

Or

Second modification subelement, for being list input control, drop-down menu/row when the current page elements parsed Table, textview field or inline frame element, and exist represent its width absolute figure when, the absolute figure is revised as phase Logarithm value；

Or

3rd modification subelement, for when the current page elements parsed are pictorial element, comparing the image primitive The width values of element and the screen width value of mobile terminal, if the width values are more than the screen width value of mobile terminal, According to the ratio between the width values and the screen width of mobile terminal, width values described in scaled down；It is if described Width values are less than the screen width value of mobile terminal, but the half of the screen width value more than mobile terminal, then by the figure The position attribution value of pixel element is revised as being shown centered on；

Or

4th modification subelement, if it is hyperlink element for the current page elements parsed, and it is described super Img labels and text are included in linking element, then adds frontier properties value for the img labels；

Or

5th modification subelement, if being partition element for the current page elements parsed, for the subregion Element adds frontier properties value.
14. device according to claim 9, the render tree structural unit includes：

First attribute removes subelement, for the absolute category for the Width x Height for including the current page elements parsed Property, positioning properties, Background attribute and/or show that related attribute removes to text；

And/or

Second attribute removes subelement, for the frame in element BOX Model to be removed with fill area attribute.
15. device according to claim 14, it is characterised in that also include：

Textcolor changes unit, if for the Background of the current page elements parsed to be removed, changes institute The color attribute value of the text included in page elements is stated, to ensure the identification of the text after Background is removed.
16. device according to claim 15, it is characterised in that the textcolor modification unit includes：

First color changes subelement, if being white for textcolor in page elements, sets the textcolor to be Web page text default color；

Or

Second color changes subelement, if not being white for textcolor in web page element, and the element background value color Opaque, then it is the color that the element background value color has preset value of chromatism to set textcolor；

Or

3rd color changes subelement, if not being white for textcolor in web page element, and the element background value color Transparent, then it is the color for having preset value of chromatism with the background colour of the main element of this webpage to set textcolor.