CN105094786B

CN105094786B - 基于JavaScript定制页面的方法及系统

Info

Publication number: CN105094786B
Application number: CN201410217132.XA
Authority: CN
Inventors: 唐俊开; 刘欣
Original assignee: Guangzhou Dongjing Computer Technology Co Ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2014-05-21
Filing date: 2014-05-21
Publication date: 2019-05-28
Anticipated expiration: 2034-05-21
Also published as: WO2015176435A1; CN105094786A

Abstract

本发明提供一种基于JavaScript定制页面的方法及系统，其中的方法包括，根据浏览器访问的网址获取待处理网页的源页面代码；在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件；执行JavaScript定制页面文件，将JavaScript定制页面文件后的源页面代码封装成文本字符串；根据封装后的文本字符串获取待处理页面的业务数据；根据JavaScript定制页面文件中的定制规则，创建基于业务数据的定制页面的DOM对象；加载所述DOM对象，得到定制页面。利用上述根据本发明提供的基于JavaScript定制页面的方法及系统，能够节省用户在访问页面时的流量，还能够提升浏览器在定制页面时的响应速度。

Description

基于JavaScript定制页面的方法及系统

技术领域

本发明涉及移动互联网技术领域，更为具体地，涉及一种基于JavaScript定制页面的方法及系统。

背景技术

目前，浏览器的论坛模式、小说阅读器等智能模式的产品，为用户提供的都是针对特定网页的定制页面，其根据用户的访问请求定制网页内容的方式，都是通过中间件服务器处理后返回浏览器显示给用户实现的。

图1示出了现有的浏览器定制特定网页内容的基本流程，如图1所示，在浏览器发起网页内容定制请求后，中间件服务器会根据浏览器发起的请求，把指定的URL地址访问一遍。在此过程中，中间件服务器解析DOM对象后，把定制业务相关的JavaScript定制页面文件注入到页面中，并且和原页面一起运行和解析；在完成所有的定制和渲染后，中间件服务器会根据和JavaScript定制页面文件约定好的规则条件，移除非JavaScript定制页面文件定制页面的资源代码，最后形成定制页面输出给浏览器解析，并显示给用户。

从图1中可以看出，从注入JavaScript定制页面文件到JavaScript定制页面文件动态生成页面的过程，都是在中间件服务器中完成的，浏览器自身只需负责渲染中间件服务器最终生成的页面。由于浏览器在发起定制请求后需要等待中间件服务器完成上述一系列数据处理后才能获得定制页面(JavaScript定制页面文件定制页面)的资源代码，因此，这种定制网页内容的方法会导致浏览器定制页面的响应速度慢，同时浏览器需要从中间件服务器端下载全部的JavaScript定制页面文件定制页面的资源代码，也会增加用户的流量支出。

因此，需要一种能够提高响应速度同时降低用户流量的新的定制页面的技术方案。

发明内容

鉴于上述问题，本发明的目的是提供一种基于JavaScript定制页面的方法及系统，以解决浏览器在定制页面时响应速度慢的问题，以及浏览器在定制页面过程中耗费用户流量的问题。

本发明提供的基于JavaScript定制页面的方法，包括：

根据浏览器访问的网址获取待处理网页的源页面代码；

在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件；

执行JavaScript定制页面文件，将JavaScript定制页面文件后的源页面代码封装成文本字符串；

根据封装后的文本字符串获取待处理页面的业务数据；

根据JavaScript定制页面文件中的定制规则，创建基于业务数据的定制页面的DOM对象；

加载DOM对象，得到定制页面。

本发明提供的基于JavaScript定制页面的系统，包括：

源页面代码获取单元，用于根据浏览器访问的网址获取待处理网页的源页面代码；

JavaScript定制页面文件插入单元，用于在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件；

源页面代码封装单元，用于执行JavaScript定制页面文件，将JavaScript定制页面文件后的源页面代码封装成文本字符串；

业务数据获取单元，用于根据封装后的文本字符串获取待处理页面的业务数据；

定制页面DOM对象创建单元，用于根据JavaScript定制页面文件中的定制规则，创建基于业务数据的定制页面的DOM对象；

定制页面DOM对象加载单元，用于加载DOM对象，得到定制页面。

利用上述根据本发明提供的基于JavaScript定制页面的方法及系统，能够取得以下有益效果：

1)由于定制业务相关的JavaScript定制页面文件预先设置在浏览器内，所以不需要从中间件服务器实时下载，可以减少用户在访问页面时的流量。

2)由于不需要经过中间件服务器将定制业务相关的JavaScript定制页面文件注入到页面中，和页面一起运行和解析，因此，在下载源页面代码时预设在浏览器内的JavaScript定制页面文件开始执行操作，能够提升浏览器定制页面时的响应速度。

3)由于将源页面代码全部字符串化，因此浏览器不会解析原页面，也不会创建DOM对象和渲染，因此，能够大幅度减少使用资源。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1为现有的浏览器定制特定网页内容的基本流程示意图；

图2为根据本发明实施例的基于JavaScript定制页面的方法的流程示意图；

图3为根据本发明实施例的浏览器端注入JavaScript定制页面文件的交互示意图；

图4为根据本发明实施例的基于JavaScript定制页面的系统的逻辑结构示意图；

图5为根据本发明实施例的一个具体实施方式的基于JavaScript定制页面的系统的逻辑结构示意图；

图6为根据本发明实施例的另一个具体实施方式的基于JavaScript定制页面的系统的逻辑结构示意图；

图7为根据本发明实施例的又一个具体实施方式的基于JavaScript定制页面的系统的逻辑结构示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

在下面的描述中，出于说明的目的，为了提供对一个或多个实施例的全面理解，阐述了许多具体细节。然而，很明显，也可以在没有这些具体细节的情况下实现这些实施例。在其它例子中，为了便于描述一个或多个实施例，公知的结构和设备以方框图的形式示出。

为了方便理解本发明提供的基于JavaScript定制页面的方法及系统，首先对下述内容中出现的英文进行注解：

JavaScript定制页面文件，为编写的JavaScript代码，JavaScript代码存放在一个JS物理文件(也就是XXX.JS文件)中，这个JS物理文件预设在浏览器中，将JavaScript定制页面文件注入到源页面代码中，就是将保存在JS物理文件中的JavaScript代码注入到用户浏览的原始页面之中，为了表述的方便，下述的JavaScript定制页面文件等同于JavaScript代码。

HTML：是标准通用标记语言下的一个应用，通过标记符号来标记要显示的网页中的各个部分；网页文件本身是一种文本文件，通过在文本文件中添加标记符号，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。

DOM对象：即文档对象模型(Document Object Model，DOM)，是一种用于HTML和XML文档的编程接口，给文档提结构化的表示方法，可以改变文档的内容和呈现方式。

<head>标签：用于定义文档的头部，是所有头部元素的容器。

innerHTML：标签属性，用来设置或获取位于对象起始和结束标签内的HTML(获取HTML当前标签的起始和结束里面的内容)。

document.write：用在两个方面，一方面，页面载入过程中用实时脚本创建页面内容；另一方面，用延时脚本创建本窗口或新窗口的内容。

<plaintext>标签：可以令该标签后的html标签失去其标示作用，将按照HTML源代码的方式显示。

</plaintext>标签：是关闭标签。

以下将结合附图对本发明的具体实施例进行详细描述。

针对前述现有定制页面方法中，从中间件服务器端注入JavaScript定制页面文件导致定制页面响应速度慢的问题，以及增加用户流量的问题，本发明提供的基于JavaScript定制页面的方法，利用浏览器自身解析JavaScript定制页面文件的能力，把JavaScript定制页面文件的运行环境从中间件服务器搬到浏览器中，以提高访问定制页面时的响应速度，同时降低用户访问定制页面时的流量。

图2示出了本发明实施例的基于JavaScript定制页面的方法的流程，如图2所示，本发明实施例提供的基于JavaScript定制页面的方法，首先，在用户向浏览器发起访问目标网址的请求时，浏览器根据访问的目标网址获取目标网址对应的待处理网页的源页面代码(步骤S201)；在获取待处理网页的源页面代码之后，在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件(步骤S202)；执行JavaScript定制页面文件，将JavaScript定制页面文件后的源页面代码封装成文本字符串(步骤S203)；在步骤S204中，根据封装后的文本字符串获取待处理页面的业务数据；在获取待处理页面的业务数据后，根据JavaScript定制页面文件中的定制规则，创建基于业务数据的定制页面的DOM对象(步骤S205)；最后，加载DOM对象，得到定制页面。(步骤S206)。

其中，在步骤S201之后，可以通过在浏览器内预设白名单的方式，判断浏览器访问的网址是否在预设的白名单内，如果浏览器访问的网址在预设的白名单内，则进行步骤S202；如果不在，则不进行步骤S202。

另外，JavaScript定制页面文件中的定制规则将在下面做详细地说明。

为了更详细地说明本发明实施例提供的基于JavaScript定制页面的方法，图3示出了本发明实施例的浏览器端注入JavaScript定制页面文件的交互过程，如图3所示，本发明实施例的浏览器端注入JavaScript定制页面文件的交互过程为：

步骤S301：访问目标网址。

在用户输入网址，并且按下回车键后，浏览器开始连接目标网站的服务器，连接成功后，浏览器开始从目标服务器下载解析待处理页面的源页面代码。

需要说明的是，待处理页面即访问目标网址对应的页面。

步骤S302：浏览器向自身外核发起访问目标网址的请求。

浏览器包括外核和内核，白名单预设在浏览器的外核内，对浏览器访问的目标网址进行判断，如果目标网址在预设的白名单内，则浏览器的外核将访问目标网址的请求通知给浏览器的内核，如果目标网址不在预设的白名单内，则浏览器的外核不通知浏览器的内核，也不会进行下述的操作。

总而言之，将白名单作为一种开关，通过能够增加或减少名单规则，自由的扩大或缩小定制页面的范围，甚至能够立即取消该白名单(插入空白的JavaScript定制页面文件)。

步骤S303：浏览器的外核通知浏览器的内核。

在目标网址通过白名单的判断后，浏览器的外核将访问目标网址的请求通知给浏览器的内核，为解析目标网址对应的待处理页面做准备。

步骤S304：浏览器的内核向浏览器的外核请求获取JavaScript定制页面文件。

JavaScript定制页面文件同样预设在浏览器的外核内，用于解析目标网址对应的待处理页面。

步骤S305：浏览器的外核向浏览器的内核提供JavaScript定制页面文件。

在浏览器的外核将JavaScript定制页面文件提供给浏览器的内核后，将JavaScript定制页面文件注入到浏览器的内核中；在本实施例一个具体实施方式中，将JavaScript定制页面文件以脚本的形式注入到浏览器的内核中，但并不限于以脚本的形式注入JavaScript定制页面文件。

步骤S306：浏览器内核解析页面。

在将JavaScript定制页面文件注入到浏览器的内核之后，浏览器内核开始解析目标网址对应的待处理页面，解析该页面就是通过注入的JavaScript定制页面文件解析该页面的源页面代码。

在本实施例一个具体实施方式中，JavaScript定制页面文件解析在源页面代码的过程如下：

浏览器内核在解析源页面代码遇到<head>标签时，把已经注入到浏览器内核的JavaScript定制页面文件以脚本的形式插入到<head>标签后面，插入的JavaScript定制页面文件通过document.write方法，插入一个特定的标签元素：<plaintext>，<plaintext>标签会忽略其后的任何标签元素，同时把<plaintext>标签后的所有标签元素转化为文本字符串，使其不作HTML解析，起到屏蔽解析源页面代码的作用，由于源页面代码下载和解析源页面代码是同步进行的，所以，当原始页面代码下载完毕时，解析源页面代码的过程也会结束，此时，JavaScript定制页面文件会自动增加另一个特定的标签元素</plaintext>结尾。

由上述解析过程可以看出，在解析页面的过程中，通过JavaScript定制页面文件在<head>标签后插入特定的标签元素，将<head>标签后的标签元素字符串化，也就是将JavaScript定制页面文件后的源页面代码不作HTML解析，可以屏蔽页面的加载，因此能够节省用户访问定制页面时的流量。

另一方面，<head>标签是一个网页的开始部分，如果要屏蔽页面的全部资源，JavaScript定制页面文件要插入到<head>标签之后，JavaScript定制页面文件插入到何处，取决于想屏蔽页面到何种程度，如果不希望屏蔽<head>标签部分，可以在网页的<body>标签之后插入JavaScript定制页面文件。

步骤S307：抽取数据重排页面。

根据封装后文本字符串获取待处理页面的业务数据，为创建定制页面的DOM对象的做好准备。由于在源页面代码被<plaintext>标签封装成文本字符串后，脚本形式的JavaScript定制页面文件仍会继续运行，此时根据JavaScript定制页面文件中约定的定制规则，创建基于业务数据的定制页面的DOM对象，将创建出的DOM对象保存在内存中，供用户使用，然后加载保存在内存中的DOM对象，重新组成页面，由此，得到定制页面。

需要说明的是，获取待处理页面的业务数据是指根据业务的需要，获取与业务相关的数据，例如抽取小说的标题、正文等等。

在本实施例的另一个具体实施方式中，根据封装后的文本字符串创建待处理页面的DOM对象；根据待处理页面的DOM对象获取待处理页面的业务数据。

在本实施例的又一个具体实施方式中，使用JavaScript定制页面文件的innerHTML属性创建基于业务数据的定制页面的DOM对象。

需要说明的是，一般页面上的源页面代码是由浏览器解析，解析后创建一个DOM对象进行渲染，最后显示在浏览器上，在浏览器渲染页面的过程中会消耗大量的资源，因此，本发明实施例利用JavaScript定制页面文件将源页面代码全部字符串化，使浏览器不会解析源页面代码，也不会创建DOM对象进行渲染，但不创建定制页面的DOM对象便无法定制页面，所以，本发明实施例根据JavaScript定制页面文件中约定的定制规则，创建基于业务数据的定制页面的DOM对象，将创建出的定制页面的DOM对象保存在内存中供用户使用，由于创建出的定制页面的DOM对象并不在页面上渲染，因此，能够达到大幅度减少使用资源，同时定制页面需要的数据又可以供用户使用的目的。

另一方面，JavaScript定制页面文件中约定的定制规则实际上是指将原始DOM对象(浏览器解析后创建的DOM对象)内的数据按照一定需求重新排列、组合，例如原始DOM对象内包含的广告，根据本发明实施例的JavaScript定制页面文件中约定的定制规则将其去掉；再例如原始页面内有众多链接，或者其他和主要内容关联不大的内容，同样根据本发明实施例的JavaScript定制页面文件中约定的定制规则也将其删除，原始DOM对象适合PC查看，而本发明实施例将原始DOM对象改为创建基于业务数据的定制页面的DOM对象，更适合手机查看。

步骤S308：将定制页面加载在浏览器上显示给用户。

由上述浏览器端注入JavaScript定制页面文件的交互过程可以看出，在浏览器端能够独立完成对页面的解析，无需经过中间件服务器的操作，因此，可以提高浏览器定制页面时的响应速度。

综上所述，上述流程描述了本发明实施例提供的基于JavaScript定制页面的方法，与现有的定制页面的方法区别如下：

1)客户端注入JavaScript定制页面文件后，可以立即屏蔽原始页面的资源定制和渲染；而中间件服务器需要完整定制一次页面，包括所有资源。

2)客户端注入JavaScript定制页面文件后，可以立即屏蔽原始页面的JavaScript定制页面文件执行环境，只保留注入的JavaScript定制页面文件环境；而中间件注入JavaScript定制页面文件则存在共享JavaScript定制页面文件环境以及全局变量冲突等问题。

本发明实施例提供的基于JavaScript定制页面的方法还能取得以下有益效果：

1)由于定制业务相关的JavaScript制定页面文件预先设置在浏览器端，不需要从中间件服务器端实时下载，并且，浏览器端注入JavaScript制定页面文件的过程都是在用户的浏览器上进行的，无需向中间件服务器请求服务，用户访问网址时，只需要下载其页面的源页面代码，因此，可以减少用户在访问页面时的流量。

2)由于不需要经过中间件服务器将定制业务相关的JavaScript制定页面文件注入到页面中，和页面一起运行和解析，因此，在下载源页面代码时预设在浏览器内的JavaScript制定页面文件开始执行操作，能够提升浏览器定制页面时的响应速度。

3)由于将源页面代码全部字符串化，因此浏览器不会解析页面，也不会创建DOM对象和渲染，因此，能够大幅度减少资源。

4)由于中间件服务器返回的已定制页面是一个简洁的HTML页面，是一种提供信息服务的页面；而客户端注入JavaScript制定页面文件方案，由于全部都是由JavaScript制定页面文件生成的动态页面，是一种可交换的页面，更有利于用户对其进行操作。

与上述方法相对应，本发明还提供一种基于JavaScript定制页面的系统。图4示出了根据本发明实施例的基于JavaScript定制页面的系统的逻辑结构。

如图4所示，本发明实施例所提供的基于JavaScript定制页面的系统包括源页面代码获取单元410、JavaScript定制页面文件插入单元420、源页面代码封装单元430、业务数据获取单元440、定制页面DOM对象创建单元450、定制页面DOM对象加载单元460。

当用户向浏览器请求访问目标网址时，源页面代码获取单元410根据浏览器访问的目标网址获取目标网址对应的待处理页面的源页面代码；在获取源页面代码后，JavaScript定制页面文件插入单元420在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件；在将预设的JavaScript定制页面文件插入后，源页面代码封装单元430执行JavaScript定制页面文件，将JavaScript定制页面文件后的源页面代码封装成文本字符串，以屏蔽执行预设的JavaScript定制页面文件后的源页面代码；然后，业务数据获取单元440根据封装后的文本字符串获取待处理页面的业务数据；在获取待处理页面的业务数据后，定制页面DOM对象创建单元450根据JavaScript定制页面文件中的定制规则，创建基于业务数据的定制页面的DOM对象；最后，定制页面DOM对象加载单元460加载DOM对象，得到定制页面。

图5示出了根据本发明实施例的一个具体实施方式的逻辑结构图。

在如图5所示的具体实施方式中，源页面代码封装单元430包括特定标签元素封装模块431，用于利用特定的标签元素将JavaScript定制页面文件后的源页面代码封装成文本字符串。

具体地，上述特定的标签元素可以为plaintext标签，plaintext标签可以使其后的源页面代码转化被文本字符串。

图6示出了根据本发明实施例的另一个具体实施方式的逻辑结构。

在如图6所示的具体实施方式中，JavaScript定制页面文件插入单元420进一步包括白名单预设模块421和白名单判断模块422；通过白名单预设模块480在浏览器的外核内预设白名单，使白名单判断模块421在源页面代码获取单元410根据浏览器访问的目标网址获取目标网址对应的待处理页面的源页面代码后，对浏览器访问的目标网址进行判断，白名单判断模块422判断浏览器访问的目标网址是否在预设的白名单内，如果浏览器访问的目标网址在预设的白名单内，则JavaScript定制页面文件插入单元420在目标网址对应的待处理页面的源页面代码的head标签后插入预设的JavaScript定制页面文件；如果浏览器访问的目标网址不在预设的白名单内，则JavaScript定制页面文件插入单元420不插入预设的JavaScript定制页面文件。

在如图7所示的具体实施方式中，业务数据获取单元440包括待处理页面DOM对象创建模块441，用于根据封装后的文本字符串创建待处理页面的DOM对象，根据待处理页面的DOM对象获取待处理页面的业务数据。

如上参照附图以示例的方式描述了根据本发明提出的基于JavaScript定制页面的方法及系统。但是，本领域技术人员应当理解，对于上述本发明所提出的基于JavaScript定制页面的方法及系统，还可以在不脱离本发明内容的基础上对其中的实现细节做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims

1.一种基于JavaScript定制页面的方法，包括：

根据浏览器访问的网址获取待处理网页的源页面代码；

在所述源页面代码下载的同时，执行所述JavaScript定制页面文件，将所述JavaScript定制页面文件后的源页面代码封装成文本字符串；

根据封装后的文本字符串获取待处理页面的业务数据；

在所述源页面代码下载完毕后，根据所述JavaScript定制页面文件中的定制规则，创建基于所述业务数据的定制页面的DOM对象；

加载所述DOM对象，得到定制页面。

2.如权利要求1所述的基于JavaScript定制页面的方法，其中，利用特定的标签元素将所述JavaScript定制页面文件后的源页面代码封装成文本字符串。

3.如权利要求2所述的基于JavaScript定制页面的方法，其中，所述特定的标签元素为plaintext标签。

4.如权利要求1所述的基于JavaScript定制页面的方法，其中，根据封装后的文本字符串获取待处理页面的业务数据，包括：

根据封装后的文本字符串创建待处理页面的DOM对象；

根据待处理页面的DOM对象获取待处理页面的业务数据。

5.如权利要求1所述的基于JavaScript定制页面的方法，其中，在根据浏览器访问的网址获取待处理网页的源页面代码之后，

判断所述浏览器访问的网址是否在预设的白名单内，如果在，则在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件；如果不在,则不插入预设的JavaScript定制页面文件。

6.一种基于JavaScript定制页面的系统,包括：

JavaScript定制页面文件插入单元,用于在待处理网页的源页面代码的head标签后立即插入预设的JavaScript定制页面文件；

源页面代码封装单元，用于在所述源页面代码下载的同时，执行所述JavaScript定制页面文件,将所述JavaScript定制页面文件后的源页面代码封装成文本字符串；

定制页面DOM对象创建单元，用于在所述源页面代码下载完毕后，根据所述JavaScript定制页面文件中的定制规则，创建基于所述业务数据的定制页面的DOM对象；

定制页面DOM对象加载单元，用于加载所述DOM对象，得到定制页面。

7.如权利要求6所述的基于JavaScript定制页面的系统，其中，

源页面代码封装单元包括特定标签元素封装模块，用于利用特定的标签元素将所述JavaScript定制页面文件后的源页面代码封装成文本字符串。

8.如权利要求7的所述的基于JavaScript定制页面的系统，其中，

特定标签元素插入模块插入的特定的标签元素为plaintext标签。

9.如权利要求6所述的基于JavaScript定制页面的系统，其中，

JavaScript定制页面文件插入单元包括白名单预设模块和白名单判断模块；

所述白名单预设模块，用于在所述浏览器内预设白名单；

所述白名单判断模块，用于在根据浏览器访问的网址获取待处理网页的源页面代码之后，判断所述浏览器访问的网址是否在预设的白名单内，如果在，则在待处理网页的源页面代码的head标签后插入预设的JavaScript定制页面文件；如果不在，则不插入预设的JavaScript定制页面文件。

10.如权利要求6所述的基于JavaScript定制页面的系统，其中，

业务数据获取单元包括待处理页面DOM对象创建模块，用于根据封装后的文本字符串创建待处理页面的DOM对象，根据待处理页面的DOM对象获取待处理页面的业务数据。