CN103678317B - 网页布局的自动适配方法与系统 - Google Patents

网页布局的自动适配方法与系统 Download PDF

Info

Publication number
CN103678317B
CN103678317B CN201210320716.0A CN201210320716A CN103678317B CN 103678317 B CN103678317 B CN 103678317B CN 201210320716 A CN201210320716 A CN 201210320716A CN 103678317 B CN103678317 B CN 103678317B
Authority
CN
China
Prior art keywords
webpage
proxy server
mobile terminal
css
css attributes
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201210320716.0A
Other languages
English (en)
Other versions
CN103678317A (zh
Inventor
李伟刚
刘承诚
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN201210320716.0A priority Critical patent/CN103678317B/zh
Publication of CN103678317A publication Critical patent/CN103678317A/zh
Application granted granted Critical
Publication of CN103678317B publication Critical patent/CN103678317B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

本发明提出一种网页布局的自动适配方法，包括：代理服务器接收用户通过移动终端发送的访问第三方站点的网页的请求；代理服务器抓取网页，并对网页进行分析以获得网页中至少部分的级联样式表CSS属性；代理服务器获得网页对应的转换规则；代理服务器根据转换规则对CSS属性进行修改；代理服务器将具有修改后的CSS属性的网页发送至移动终端。本发明通过修改CSS，从而在保留原网页DOM树结构的同时修改了网页布局。本发明的第二个目的在于提出一种网页布局的自动适配系统以及一种代理服务器。

Description

网页布局的自动适配方法与系统
技术领域
本发明涉及计算机科学技术领域，特别涉及一种用于网页布局的自动适配方法与系统。
背景技术
现在的主流网页结构采用HTML和CSS(Cascading Style Sheet，级联样式表)相结合的方式。CSS的出现使得网页的表现与内容相互分离，它可以统一地控制HTML中各标志的显示属性，从而对网页中的对象的位置排版进行像素级的精确控制。每个HTML标签有自己的布局特点，它们都具有相对应的CSS属性。
PC和移动终端等层出不穷的上网方式丰富了用户的选择，但是由于屏幕和分辨率等的问题，同样的网页在不同的终端显示会有差异。目前为了使得网页尽可能在各种终端都合理显示，普遍采用布局适配来解决问题。目前的布局适配主要采用替换HTML标签的方式，直接替换HTML标签可以达到调整布局的目的，但是破坏了原网页的DOM(DocumentObject Model，文档对象模型)树结构。DOM树结构的缺失不利于交互保留，修改的幅度比较大，并且没有遵守内容与表现分离的规则。
发明内容
本发明的目的旨在至少解决上述技术缺陷之一。
为此，本发明的第一个目的在于提出一种网页布局的自动适配方法，该方法通过修改CSS，从而在保留原网页DOM树结构的同时修改了网页布局。
本发明的第二个目的在于提出一种网页布局的自动适配系统。
本发明的第三个目的在于提出代理服务器。
为达到上述目的，本发明第一方面的实施例公开了一种网页布局的自动适配方法，包括：代理服务器接收用户通过移动终端发送的访问第三方站点的网页的请求；所述代理服务器抓取所述网页，并对所述网页进行分析以获得所述网页中至少部分的CSS属性；所述代理服务器获得所述网页对应的转换规则；所述代理服务器根据所述转换规则对所述CSS属性进行修改；所述代理服务器将具有修改后的CSS属性的网页发送至所述移动终端。
在本发明的实施例中，网页布局的自动适配方法通过修改对应的CSS属性从而完成对网页布局的修改，避免破坏DOM树结构，将网页表现与内容的修改相互分离，提高了修改的安全性，缩小了修改的粒度和范围，更加精确和高效。
在本发明的一个实施例中，所述获得网页中部分节点对应的CSS属性进一步包括：
所述代理服务器获得所述网页的文档对象模型DOM树结构；所述代理服务器获得所述DOM树结构中的部分节点，并获得所述部分节点对应的CSS属性。
在本发明的一个实施例中，还包括：所述移动终端将转码后的所述网页显示给所述用户。
在本发明的一个实施例中，所述移动终端包括手机、个人数字助理、电子书、掌上电脑。
本发明第二方面的实施例公开了一种网页布局的自动适配系统，包括移动终端和代理服务器。其中，所述移动终端用于发送访问第三方站点的网页的请求；所述代理服务器用于抓取所述网页，并对所述网页进行分析以获得所述网页中至少部分的级联样式表CSS属性，以及根据所述网页对应的转换规则对所述CSS属性进行修改，并将具有修改后的CSS属性的网页发送至所述移动终端。
在本发明的实施例中，网页布局的自动适配系统通过修改对应的CSS属性从而完成对网页布局的修改，避免破坏DOM树结构，将网页表现与内容的修改相互分离，提高了修改的安全性，缩小了修改的粒度和范围，更加精确和高效。
在本发明的一个实施例中，所述代理服务器获得所述网页的文档对象模型DOM树结构，并根据所述DOM树结构中的部分节点获得所述部分节点对应的CSS属性。
在本发明的一个实施例中，所述移动终端还用于将转码后的所述网页显示给所述用户。
本发明第三方面的实施例公开了一种代理服务器，包括接收模块、抓取模块、分析模块、转码模块以及发送模块。接收模块用于接收用户通过移动终端发送的访问第三方站点的网页的请求；抓取模块用于抓取所述网页；分析模块用于对所述网页进行分析以获得所述网页中的部分CSS属性；转码模块用于根据所述网页对应的转换规则对所述CSS属性进行修改；发送模块用于将具有修改后的CSS属性的网页发送至所述移动终端。
在本发明的实施例中，代理服务器通过修改对应的CSS属性从而完成对网页布局的修改，避免破坏DOM树结构，将网页表现与内容的修改相互分离，提高了修改的安全性，缩小了修改的粒度和范围，更加精确和高效。
在本发明的一个实施例中，所述分析模块用于获得所述网页的文档对象模型DOM树结构，并根据所述DOM树结构中的部分节点获得所述部分节点对应的CSS属性。
本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：
图1为根据本发明实施例的网页布局的自动适配方法的流程示意图；
图2为根据本发明实施例的网页布局的自动适配系统的结构示意图；和
图3为根据本发明实施例的代理服务器的结构示意图。
具体实施方式
下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能解释为对本发明的限制。
下面参考图1描述根据本发明实施例的网页布局的自动适配方法。
步骤S110：代理服务器接收用户通过移动终端发送的访问第三方站点的网页的请求。其中，移动终端包括手机、个人数字助理、电子书、掌上电脑。
步骤S120：代理服务器抓取网页，并对网页进行分析以获得网页中至少部分的级联样式表CSS属性。
其中，获得网页中部分节点对应的CSS属性进一步包括：
步骤S121：代理服务器获得网页的文档对象模型DOM树结构。
步骤S122：代理服务器获得DOM树结构中的部分节点，并获得部分节点对应的CSS属性。
例如，代理服务器发送从移动终端接收的网页请求，对网页进行抓取。代理服务器获得网页之后，解析文档对象模型DOM树结构，选择其中需要调整的节点并记录节点的标签、标签对应的CSS属性以及属性值。例如获得标签li以及标签的CSS式样li{font-size：12px；}。
步骤S130：代理服务器获得网页对应的转换规则。
其中，转码为对网页布局的转码，是对CSS属性进行修改。例如，对于上述li的转码后的CSS为li{font-size：8px；}。CSS属性有多种方式，例如修改为自动换行，或者修改内容块的大小等，目前已有的CSS属性或者今后开发的CSS属性均可采用本发明进行修改，因此在此不再一一赘述。
步骤S140：代理服务器根据转换规则对CSS属性进行修改。
例如，代理服务器将CSS修改为li{font-size：8px；}。
步骤S150：代理服务器将具有修改后的CSS属性的网页发送至移动终端。
代理服务器将修改后的包含CSS的文件发送到移动终端。移动终端将转码后的网页显示给用户。
可以理解的是，上述li只出于示例目的，修改还可以包括对长度超出屏幕宽度的超链接进行换行，或者将固定大小的表格调整为自适应宽度等，本发明实施例不限于此。
根据本发明实施例的网页布局的自动适配方法对比网页转码前后的网页布局，通过将需要修改的标签所对应的CSS进行修改，完成对网页布局的修改。该方法在保留原网页DOM树结构的情况下，使用流式布局，提高了修改的安全性，缩小了修改的粒度和范围，并且将网页表现与内容的修改相互分离，使得适配更加精确和高效。
下面参考图2描述根据本发明实施例的网页布局的自动适配系统100。
如图2所示，本发明实施例提供的网页布局的自动适配系统100包括包括移动终端110和代理服务器120。其中，移动终端110用于发送访问第三方站点的网页的请求；代理服务器120用于抓取网页，并对网页进行分析以获得网页中至少部分的级联样式表CSS属性，以及根据网页对应的转换规则对CSS属性进行修改，并将具有修改后的CSS属性的网页发送至移动终端。此外，移动终端110还用于将转码后的网页显示给用户。
进一步地，代理服务器获得网页的文档对象模型DOM树结构，并根据DOM树结构中的部分节点获得部分节点对应的CSS属性。
例如，移动终端110发送访问网页的请求，代理服务器120接收后对网页进行请求，从而完成对网页的抓取。代理服务器120获得网页之后，解析文档对象模型DOM树结构，选择其中需要调整的节点并记录节点的标签、标签对应的CSS属性以及属性值。例如代理服务器120获得标签li以及标签的CSS式样li{font-size：12px；}。代理服务器120根据网页对应的转换规则修改CSS属性。转码为对网页布局的转码，是对CSS进行修改。例如，对于上述li的转码后的CSS为li{font-size：8px；}。代理服务器120将CSS修改为li{font-size：8px；}。代理服务器120将修改后的包含CSS的文件发送到移动终端。移动终端110将转码后的网页显示给用户。可以理解的是，上述li只出于示例目的，移动终端110的修改还可以包括对长度超出屏幕宽度的超链接进行换行，或者将固定大小的表格调整为自适应宽度等，本发明的实施例不限于此。
根据本发明实施例的网页布局的自动适配系统对比网页转码前后的网页布局，通过将需要修改的标签所对应的CSS进行修改，完成对网页布局的修改。该系统在保留原网页DOM树结构的情况下，使用流式布局，提高了修改的安全性，缩小了修改的粒度和范围，并且将网页表现与内容的修改相互分离，使得适配更加精确和高效。
下面参考图3描述根据本发明实施例的代理服务器200。
如图3所示，本发明实施例提供的代理服务器200包括接收模块210、抓取模块220、分析模块230、转码模块240和发送模块250。其中，接收模块210用于接收用户通过移动终端发送的访问第三方站点的网页的请求；抓取模块220用于抓取网页；
分析模块230用于对网页进行分析以获得网页中的部分CSS属性；转码模块240用于根据网页对应的转换规则对CSS属性进行修改；发送模块250用于将具有修改后的CSS属性的网页发送至移动终端。
其中，分析模块230用于获得网页的文档对象模型DOM树结构，并根据DOM树结构中的部分节点获得部分节点对应的CSS属性。
例如，接收模块210接收移动终端发送访问网页的请求。抓取模块220与接收模块210相连，抓取模块220发送接收模块210接收的请求，获得网页。分析模块230解析文档对象模型DOM树结构，选择其中需要调整的节点并记录节点的标签、标签对应的CSS属性以及属性值。例如，分析模块230获得并记录标签li以及标签的CSS式样li{font-size：12px；}。转码模块240根据网页对应的转换规则修改CSS属性。转码为对网页布局的转码，是对CSS进行修改。例如，对于上述li的转码后的CSS为li{font-size：8px；}。转码模块240将CSS修改为li{font-size：8px；}。发送模块250将修改后的包含CSS的文件发送到移动终端。可以理解的是，上述li只出于示例目的，代理服务器120的修改还可以包括对长度超出屏幕宽度的超链接进行换行，或者将固定大小的表格调整为自适应宽度等，本发明的实施例不限于此。
根据本发明实施例的代理服务器对比网页转码前后的网页布局，通过将需要修改的标签所对应的CSS进行修改，完成对网页布局的修改。该代理服务器在保留原网页DOM树结构的情况下，使用流式布局，提高了修改的安全性，缩小了修改的粒度和范围，并且将网页表现与内容的修改相互分离，使得适配更加精确和高效。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同限定。

Claims (6)

1.一种网页布局的自动适配方法，其特征在于，包括以下步骤：
代理服务器接收用户通过移动终端发送的访问第三方站点的网页的请求；
所述代理服务器抓取所述网页，并对所述网页进行分析以获得所述网页中至少部分的级联样式表CSS属性，其中，所述代理服务器获得所述网页之后，解析所述网页的文档对象模型DOM树结构，并选择其中需要调整的节点并记录节点的标签、所述标签对应的CSS属性以及属性值；
所述代理服务器获得所述网页对应的转换规则；
所述代理服务器根据所述转换规则对所述CSS属性进行修改；以及
所述代理服务器将具有修改后的CSS属性的网页发送至所述移动终端。
2.如权利要求1所述的网页布局的自动适配方法，其特征在于，还包括：
所述移动终端将转码后的所述网页显示给所述用户。
3.如权利要求1-2任一项所述的网页布局的自动适配方法，其特征在于，所述移动终端包括手机、个人数字助理、电子书、掌上电脑。
4.一种网页布局的自动适配系统，其特征在于，包括移动终端和代理服务器，其中，
所述移动终端，用于发送访问第三方站点的网页的请求；
所述代理服务器，用于抓取所述网页，并对所述网页进行分析以获得所述网页中至少部分的级联样式表CSS属性，以及根据所述网页对应的转换规则对所述CSS属性进行修改，并将具有修改后的CSS属性的网页发送至所述移动终端，其中，所述代理服务器获得所述网页之后，解析所述网页的文档对象模型DOM树结构，并选择其中需要调整的节点并记录节点的标签、所述标签对应的CSS属性以及属性值。
5.如权利要求4所述的网页布局的自动适配系统，其特征在于，所述移动终端还用于将转码后的所述网页显示给用户。
6.一种代理服务器，其特征在于，包括：
接收模块，用于接收用户通过移动终端发送的访问第三方站点的网页的请求；
抓取模块，用于抓取所述网页；
分析模块，用于对所述网页进行分析以获得所述网页中至少部分的CSS属性，其中，所述抓取模块获得所述网页之后，所述分析模块解析所述网页的文档对象模型DOM树结构，并选择其中需要调整的节点并记录节点的标签、所述标签对应的CSS属性以及属性值；
转码模块，用于根据所述网页对应的转换规则对所述CSS属性进行修改；以及
发送模块，用于将具有修改后的CSS属性的网页发送至所述移动终端。
CN201210320716.0A 2012-08-31 2012-08-31 网页布局的自动适配方法与系统 Active CN103678317B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201210320716.0A CN103678317B (zh) 2012-08-31 2012-08-31 网页布局的自动适配方法与系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201210320716.0A CN103678317B (zh) 2012-08-31 2012-08-31 网页布局的自动适配方法与系统

Publications (2)

Publication Number Publication Date
CN103678317A CN103678317A (zh) 2014-03-26
CN103678317B true CN103678317B (zh) 2017-07-25

Family

ID=50315920

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201210320716.0A Active CN103678317B (zh) 2012-08-31 2012-08-31 网页布局的自动适配方法与系统

Country Status (1)

Country Link
CN (1) CN103678317B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104820589B (zh) * 2015-04-24 2018-11-09 美通云动（北京）科技有限公司 一种动态适配网页的方法及其装置
CN105279139B (zh) * 2015-11-30 2018-10-19 中国建设银行股份有限公司 一种表格信息展示规则配置与计算方法及系统
CN106484823A (zh) * 2016-09-28 2017-03-08 山东浪潮商用系统有限公司 一种css文件的修改方法、装置及计算机可读介质
CN106503212A (zh) * 2016-10-27 2017-03-15 中企动力科技股份有限公司 一种网页元素样式的设置方法及装置
CN110334295A (zh) * 2019-05-08 2019-10-15 北京芯盾时代科技有限公司 网站页面修改的方法、装置及系统
CN112579958A (zh) * 2020-12-23 2021-03-30 平安银行股份有限公司 网页转换方法、装置、计算机设备及可读存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9081782B2 (en) * 2006-11-17 2015-07-14 Cabin Creek, Llc Systems and methods for dynamically generating graphical memorabilia projects for presentation and use
US8181107B2 (en) * 2006-12-08 2012-05-15 Bytemobile, Inc. Content adaptation
CN101859322B (zh) * 2010-05-26 2012-06-20 卓望数码技术（深圳）有限公司 一种移动终端的网页显示方法
CN102184249B (zh) * 2011-05-23 2016-01-06 广州市动景计算机科技有限公司 基于移动终端的网页排版方法和装置
CN102325188B (zh) * 2011-09-16 2014-04-30 北京新媒传信科技有限公司 在移动终端上实现网页浏览的方法和系统

Also Published As

Publication number Publication date
CN103678317A (zh) 2014-03-26

Similar Documents

Publication Publication Date Title
CN103678317B (zh) 网页布局的自动适配方法与系统
CN103139292B (zh) 在http代理中处理图片的方法、代理服务器及系统
US9940309B2 (en) Measuring web page rendering time
CN102487402B (zh) 由服务器端实现网页渲染的方法、设备和系统
CN102325188B (zh) 在移动终端上实现网页浏览的方法和系统
CN102484686B (zh) 用于提供补充信息的方法和设备
CN102364460B (zh) 基于移动终端的页面自动放大方法和系统
CN103412928A (zh) 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN102486799B (zh) 一种环球信息网www页面处理方法和装置
CN102207967B (zh) 一种自动提供浏览器新插件的方法和系统
JP2005346734A (ja) コンテンツ提供方法
CN101526953A (zh) Www转换技术
CN101179558B (zh) 面向电视机显示的信息浏览业务提供系统和方法
CN105469335A (zh) 一种基于pc前端的学习系统
WO2012163122A1 (zh) 一种页面浏览方法、服务器和终端
CN103902571B (zh) 保存网页完整内容的方法、系统及相应的客户端和服务器
CN101539934A (zh) 在wap网页中插入广告的方法
CN101354706A (zh) 一种收集网页信息的方法及装置
CN105069092A (zh) 一种报表展示的方法、系统及移动终端
CN102681996B (zh) 预读方法和装置
CN103117892B (zh) 添加网站访问记录的方法及装置
CN103368961B (zh) 通过社交网络进行多屏互动的方法
CN109726337A (zh) 生成装置、终端装置、生成系统、生成方法及记录介质
CN104809113B (zh) 网页信息的显示方法及装置
CN103870561A (zh) 网络图片处理方法及系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant