保存网页完整内容的方法、系统及相应的客户端和服务器的制造方法
【专利摘要】本申请公开了一种保存网页完整内容的方法、系统以及对应的客户端和中转服务器。所述客户端获取浏览器所解析的当前所展示网页的DOM树和所有非内联样式数据，遍历所述DOM树，将非内联样式数据转换成每个DOM元素的内联样式数据，并保存在对应元素的自定义属性中，之后将所述DOM树上传到中转服务器；中转服务器接收客户端上传的DOM树，根据该DOM树中的图片标签抓取网页中的图片数据，按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件，并将格式文件上传到云端服务器保存。利用本发明，可以实现利用移动终端将网页的完整内容高效、快速地保存到云端服务器，同时又可以节约移动终端的机器资源开销和网络带宽资源。
【专利说明】保存网页完整内容的方法、系统及相应的客户端和服务器
【技术领域】
[0001]本申请涉及网页数据处理【技术领域】，尤其涉及一种保存网页完整内容的方法、系统及相应的客户端和服务器。
【背景技术】
[0002]网络浏览器简称浏览器，是指万维网(Web)服务的客户端浏览程序，浏览器在访问网页时，可以向Web服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解析、显示和播放，从而将网页展示在终端屏幕上。
[0003]用户在通过浏览器访问网页时，往往希望能把当前浏览的网页的完整内容保存下来，在以后希望重新浏览该网页时，即使不访问该网页的发布服务器也可以正常浏览该网页的完整内容。为了满足这一需求，现有的大部分浏览器都有将当前浏览的网页的完整内各保存在本地终端(如计算机或移动终端)上的功能。
[0004]但是目前随着各种电子终端的普及，用户往往会拥有多个具有数据处理功能的电子终端，并可采用各个电子终端上的浏览器网浏览网页。例如在办公室使用台式计算机浏览网页，在家里使用笔记本电脑浏览网页，外出时又使用移动终端(例如智能手机、掌上电脑、平板电脑等)浏览网页，如果还是将当前浏览的网页的完整内容只保存在本地终端，那么当用户更换电子终端后，由于当前电子终端本地中没有保存网页，因此用户需要重新浏览该网页时，还需要访问该网页的发布服务器才可以正常浏览到该网页的完整内容，如果该发布服务器出现问题则无法再次浏览该网页。
[0005]为了解决这个问题，目前出现了一种在云端保存网页完整内容的技术方案，例如Evernote云端笔记系统。该技术方案中包括云端服务器和客户端，所述客户端作为计算机(PC)浏览器的插件安装在计算机浏览器上，用于对该计算机当前浏览的网页的完整内容(包括具体内容信息和样式信息)进行直接提取，并转换成所述云端服务器要求的指定格式的文件，该指定格式的文件中包含了网页的排版内容、样式信息、图片资源数据这些构成网页的完整内容；转换完毕后，再将该指定格式的文件上传到云端服务器进行保存，用户可以凭借帐号来访问该云端服务器。在用户以后希望重新浏览保存过的具有完整内容的网页时，不需要再访问该网页的发布服务器，而是登录所述云端服务器，访问该云端服务器中保存的网页即可。这样即使该网页的发布服务器出现问题也可以再次浏览该网页的完整内容，而且不必受到终端的限制，例如用户利用办公室电脑将网页保存到云端服务器，在家里使用笔记本电脑同样可以访问到该云端服务器中保存的网页。
[0006]但是上述技术方案只能适用于计算机即桌面平台，无法适用于机器性能很差的移动终端即移动平台，例如智能手机、掌上电脑、平板电脑等，因为所述客户端的转换工作对机器资源的开销太大，将上述技术方案直接移植到移动终端上，即直接将所述客户端安装在移动终端上，且采用现有方法对网页进行提取转换，会导致移动终端资源开销大、运行效率低的技术问题；同时，由于网页的所有内容(包括所有的文字和图片资源)的提取和转换工作在客户端完成，并且要将所有内容由客户端上传到云端服务器，因此会耗费大量的网络带宽资源，而移动终端的网络带宽资源又是相对稀少且昂贵的。
【发明内容】
[0007]有鉴于此，本发明的主要目的在于提供一种保存网页完整内容的方法、系统及相应的客户端和服务器，可以实现利用移动终端将网页的完整内容高效、快速地保存到云端服务器，同时又可以节约移动终端的机器资源开销和网络带宽资源。
[0008]本发明的技术方案是这样实现的:
[0009]一种保存网页完整内容的方法，包括:
[0010]客户端获取浏览器所解析的当前所展示网页的文档对象模型DOM树；并获取该网页的所有非内联样式数据；
[0011]客户端遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中；
[0012]客户端将所述经过转换处理的DOM树上传到中转服务器；
[0013]中转服务器接收客户端上传的所述经过转换处理的DOM树；
[0014]中转服务器根据所述经过转换处理的DOM树中的图片标签抓取网页中的图片数据；
[0015]中转服务器按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件；
[0016]中转服务器将所述转换后的格式文件上传到所述云端服务器保存。
[0017]一种保存网页完整内容的系统，该系统包括客户端和中转服务器；
[0018]所述客户端包括第一模块、第二模块和第三模块；
[0019]所述第一模块用于获取浏览器所解析的当前所展示网页的文档对象模型DOM树；并获取该网页的所有非内联样式数据；
[0020]所述第二模块用于遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中；
[0021]所述第三模块用于将所述经过转换处理的DOM树上传到中转服务器；
[0022]所述中转服务器包括第四模块、第五模块、第六模块和第七模块；
[0023]所述第四模块用于接收客户端上传的所述经过转换处理的DOM树；
[0024]所述第五模块用于根据所述经过转换处理的DOM树中的图片标签抓取网页中的图片数据；
[0025]所述第六模块用于按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件；
[0026]所述第七模块用于将所述转换后的格式文件上传到所述云端服务器保存。
[0027]—种客户端，该客户端包括第一模块、第二模块和第三模块；
[0028]所述第一模块用于获取浏览器所解析的当前所展示网页的DOM树；并获取该网页的所有非内联样式数据；
[0029]所述第二模块用于遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中；
[0030]所述第三模块用于将所述经过转换处理的DOM树上传到中转服务器。
[0031]—种中转服务器,其特征在于，该中转服务器包括第四模块、第五模块、第六模块和第七模块；
[0032]所述第四模块用于接收客户端上传的经过转换处理的DOM树；
[0033]所述第五模块用于根据所述经过转换处理的DOM树中的图片标签抓取网页中的图片数据；
[0034]所述第六模块用于按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件；
[0035]所述第七模块用于将所述转换后的格式文件上传到所述云端服务器保存。
[0036]与现有技术相比，本发明采用客户端和中转服务器共同处理的方式来完成对网页完整内容(包括具体内容信息和样式信息)提取转换并保存到指定云端服务器的过程。其中，网页中不需要过多消耗机器资源的字符信息和样式信息的提取工作由客户端来完成，而需要消耗大量机器资源和带宽资源的依照云端服务器要求格式的格式转换工作、图片抓取工作、以及将格式文件上传到云端服务器的工作由中转服务器来完成，这样的客户端安装在移动终端上，就可以实现利用移动终端将网页的完整内容高效、快速地保存到云端服务器，同时又可以节约移动终端的机器资源。同时，网页中图片的抓取工作由中转服务器来完成，从而避免了移动终端上传数据量较大的图片资源给服务器的过程，节约了移动终端的网络带宽资源。
【专利附图】
【附图说明】
[0037]图1为本发明所述保存网页完整内容的方法的一种流程图；
[0038]图2为本发明所述保存网页完整内容的系统的一种组成示意图。
【具体实施方式】
[0039]下面结合附图及具体实施例对本发明再作进一步详细的说明
[0040]图1为本发明所述保存网页完整内容的方法的一种流程图。参见图1，该方法主要包括:
[0041]101、客户端获取浏览器所解析的当前在浏览器上所展示出的网页的文档对象模型(DOM)树；并获取该网页的所有非内联样式数据。
[0042]所述D0M，是W3C组织推荐的处理可扩展置标语言的标准编程接口，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个超文本标记语言(HTML, Hypertext Markup Language)或可扩展标记语言(XML,Extensible Markup Language)的常用方法,而网页的本质就是由HTML或XML文档构成，DOM树中包含了网页中的完整的内容和结构，DOM树包含的是字符信息，数据量较小。
[0043]此步骤101中，所述DOM树由浏览器内核经过解析处理(包括渲染，加载javascript引擎等处理)得到的DOM树，客户端可以以插件的形式安装到移动终端的浏览器中，可以直接获取该浏览器内核所解析出的浏览器当前所展示网页的DOM树。
[0044]例如在移动终端的浏览器中，所述浏览器内核通常为Webkit浏览器内核，本发明可以从Webkit浏览器内核获取所述DOM树。
[0045]此步骤101中，所述客户端获取所述网页的所有非内联样式数据，具体包括:
[0046]获取所述网页中style标签内所包含的非内联级联样式表(CSS, CascadingStyleSheet)数据；
[0047]和/或，根据所述网页中I ink标签内指定的外部CSS文件地址，访问该外部CSS文件，从该外部CSS文件中获取非内联CSS数据。例如具体可以是通过Javascript获取要当所展示的网页中link标签内跨域的CSS文件URL，然后通过浏览器下载上述CSS文件，并用Javascript动态的在原link标签位置创建style标签,并插入CSS文本内容,所述style标签内插入的CSS文本内容就是所要获取的所述网页的非内联样式数据。
[0048]102、客户端遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中。
[0049]下面以一个具体的例子来说明上述步骤101和102的一种具体的处理方法。
[0050]比如有个当前所要保存的网页的DOM树如下:
[0051]
【权利要求】
1.一种保存网页完整内容的方法，其特征在于，包括: 客户端获取浏览器所解析的当前所展示网页的文档对象模型DOM树；并获取该网页的所有非内联样式数据； 客户端遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中； 客户端将所述经过转换处理的DOM树上传到中转服务器； 中转服务器接收客户端上传的所述经过转换处理的DOM树； 中转服务器根据所述经过转换处理的DOM树中的图片标签抓取网页中的图片数据；中转服务器按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件； 中转服务器将所述转换后的格式文件上传到所述云端服务器保存。
2.根据权利要求1所述的方法，其特征在于，所述客户端获取所述网页的所有非内联样式数据，具体包括: 获取所述网页中style标签内所包含的非内联级联样式表CSS数据； 和/或，根据所述网页中link标签内指定的外部CSS文件地址，访问该外部CSS文件，从该外部CSS文件中获取非 内联CSS数据。
3.根据权利要求1所述的方法，其特征在于，所述客户端遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中，具体包括: 客户端遍历所述DOM树中的每一个DOM元素,对于每一个元素,具体包括: 获取应用在该元素上的所有CSS属性名；获取每个CSS属性名的值；把最终获取到的CSS属性名及其值保存在该元素的一个自定义属性中。
4.根据权利要求1所述的方法，其特征在于， 该方法进一步包括:所述客户端将指定的云端服务器的标识上传到中转服务器；所述中转服务器中保存至少一种云端服务器的格式信息，并进一步接收客户端上传的指定的云端服务器的标识； 所述中转服务器按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件，具体包括:中转服务器根据所述客户端上传的指定云端服务器的标识查找该云端服务器的格式信息，之后再按照该云端服务器的格式信息要求，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件。
5.根据权利要求1至4任一项所述的方法，其特征在于，所述中转服务器按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件，具体包括: 所述中转服务器按照云端服务器所要求的标签和属性的格式，遍历所述DOM树中的标签和属性，将云端服务器不允许的标签和属性过滤掉，将云端服务器允许但需要替换的标签和属性按照云端服务器提供的标签和属性标识进行替换，将所述遍历处理后的DOM树转换为云端服务器指定格式的文本文件； 将所述图片数据置入所述文本文件，将所述置入了图片数据的文本文件作为云端服务器所要求的格式文件；或者，将所述图片数据与所述文本文件打包成云端服务器所要求的格式文件。
6.根据权利要求5所述的方法，其特征在于，所述中转服务器按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件的过程中，进一步包括:中转服务器利用散列算法计算所述图片数据对应的散列标识，利用该散列标识替换所述DOM树中对应图片的原有标识。
7.—种保存网页完整内各的系统，其特征在于，该系统包括客户端和中转服务器； 所述客户端包括第一模块、第二模块和第三模块； 所述第一模块用于获取浏览器所解析的当前所展示网页的文档对象模型DOM树；并获取该网页的所有非内联样式数据； 所述第二模块用于遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中； 所述第三模块用于将所述经过转换处理的DOM树上传到中转服务器； 所述中转服务器包括第四模块、第五模块、第六模块和第七模块； 所述第四模块用于接收客户端上传的所述经过转换处理的DOM树； 所述第五模块用于根据所述经过转换处理的DOM树中的图片标签抓取网页中的图片数据； 所述第六模块用于按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件； 所述第七模块用于将所述转换后的格式文件上传到所述云端服务器保存。
8.一种客户端，其特征在于，该客户端包括第一模块、第二模块和第三模块； 所述第一模块用于获取浏览器所解析的当前所展示网页的DOM树；并获取该网页的所有非内联样式数据； 所述第二模块用于遍历所述DOM树，将所述非内联样式数据转换成所述DOM树中每个DOM元素的内联样式数据，并将转换后的内联样式数据保存在对应DOM元素的自定义属性中； 所述第三模块用于将所述经过转换处理的DOM树上传到中转服务器。
9.根据权利要求8所述的客户端，其特征在于，所述第三模块进一步用于将指定的云端服务器的标识上传到中转服务器。
10.一种中转服务器,其特征在于，该中转服务器包括第四模块、第五模块、第六模块和第七模块； 所述第四模块用于接收客户端上传的经过转换处理的DOM树； 所述第五模块用于根据所述经过转换处理的DOM树中的图片标签抓取网页中的图片数据； 所述第六模块用于按照云端服务器要求的格式，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件； 所述第七模块用于将所述转换后的格式文件上传到所述云端服务器保存。
11.根据权利要求10所述的中转服务器，其特征在于， 所述第四模块进一步用于:接收客户端上传的指定的云端服务器的标识；所述第六模块具体用于:保存两种以上云端服务器的格式信息，根据所述客户端上传的指定云端服务器的标识查找该云端服务器的格式信息，之后再按照该云端服务器的格式信息要求，将所述DOM树和抓取到的图片数据转换成该云端服务器所要求的格式文件。
12.根据权利要求10或11所述的中转服务器，其特征在于，所述第六模块具体用于:按照云端服务器所要求的标签和属性的格式，遍历所述DOM树中的标签和属性，将云端服务器不允许的标签和属性过滤掉，将云端服务器允许但需要替换的标签和属性按照云端服务器提供的标签和属性标识进行替换，将所述遍历处理后的DOM树转换为云端服务器指定格式的文本文件；将所述图片数据置入所述文本文件，将所述置入了图片数据的文本文件作为云端服务器所要求的格式文件；或者，将所述图片数据与所述文本文件打包成云端服务器所要求的格式文件。
13.根据权利要求12所述的中转服务器，其特征在于，所述第六模块进一步用于:利用散列算法计算所述图片数据对应的散列标识，利用该散列标识替换所述DOM树中对应图片的原有标 识。
【文档编号】H04L29/08GK103902571SQ201210578711
【公开日】2014年7月2日 申请日期:2012年12月27日 优先权日:2012年12月27日
【发明者】程亮, 潘农菲, 安婷婷, 谷琦 申请人:腾讯科技（深圳）有限公司