CN103034710A - 用于浏览器的页面呈现方法和装置 - Google Patents

Abstract

本发明公开了一种用于浏览器的页面呈现方法和装置。本发明实施例提供的用于浏览器的页面呈现装置包括：接收单元，适于接收用户的输入数据；动画设置单元，适于将制作出的需要呈现的动画设置在浏览器中；页面生成单元，适于根据所述输入数据生成浏览器自定义页面；动画选取单元，适于确定需要在所述自定义页面中呈现的动画；动画加载单元，适于将所述动画加载在所述自定义页面中；页面呈现单元，适于将所述动画在所述自定义页面上呈现出来；所述动画选取单元，具体适于建立不同类型的自定义页面与动画的对应关系，根据生成的自定义页面的类型查找所述对应关系，得到需要在该自定义页面中呈现的动画。

Description

用于浏览器的页面呈现方法和装置

技术领域

本发明涉及计算机网络技术领域，特别涉及一种用于浏览器的页面呈现方法和装置。

背景技术

浏览器是万维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

对于浏览器而言，有时需要向用户显示浏览器自定义的页面，例如，当浏览器无法从网络中获取到用户期望访问的数据时，浏览器会向用户推送一个自定义的页面，在页面中显示出指示访问失败的文字信息。这样的页面会经常为用户所见，然而这种网页给用户提供的信息却很少，信息展现方式也过于单一，导致网页资源没有得到充分的利用，网络资源利用率较低，用户获取信息的效率低下。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的用于浏览器的页面呈现方法和装置。

依据本发明的一个方面，本发明实施例提供了一种用于浏览器的页面呈现方法，包括：

将制作出的动画设置在浏览器中；建立不同类型的自定义页面与动画的对应关系；在生成浏览器自定义页面时，根据生成的自定义页面的类型查找对应关系，得到需要在该自定义页面中呈现的动画；将动画加载在自定义页面中，并将动画在自定义页面上呈现出来。

其中，上述将制作出的动画设置在浏览器中包括：建立浏览器脚本文件，通过将动画写入该浏览器脚本文件，以将该动画设置在浏览器中；

上述将动画加载在自定义页面中包括：运行浏览器脚本文件，利用该浏览器脚本文件将动画设置在自定义页面中。

其中，上述将制作出的动画设置在浏览器中包括：通过设置浏览器内置页面中层叠样式表单CSS3中的动画Animation属性和转变Transition属性的内容，将动画设置在浏览器中；

上述将动画加载在自定义页面中包括：根据动画修改Animation属性和Transition属性的内容，以将动画设置在自定义页面中。

其中，上述浏览器为支持HTML5的浏览器。

其中，上述动画包括以下至少一个：天气动画、节日动画、时间动画、地点动画、情境动画。

其中，当动画为天气动画时，在确定需要在该自定义页面中呈现的动画之前，上述方法还包括：获取浏览器用户所在城市的城市代码；

上述确定需要在该自定义页面中呈现的动画包括：获取与城市代码对应的天气信息；将与天气信息相一致的动画确定为需要在自定义页面中呈现的动画。

其中，上述浏览器自定义页面包括以下至少之一：浏览器标签页、显示连接信息的浏览器页面。

其中，浏览器自定义页面为添加了新功能的新标签页时，制作出的需要呈现的动画为演示该新功能的动画。

依据本发明的又一个方面提供了一种用于浏览器的页面呈现装置，包括：

接收单元，适于接收用户的输入数据；

动画设置单元，适于将制作出的需要呈现的动画设置在浏览器中；

页面生成单元，适于根据输入数据生成浏览器自定义页面；

动画选取单元，适于确定需要在自定义页面中呈现的动画；

动画加载单元，适于将动画加载在自定义页面中；

页面呈现单元，适于将动画在自定义页面上呈现出来；

其中，所述动画选取单元，具体适于建立不同类型的自定义页面与动画的对应关系，根据生成的自定义页面的类型查找对应关系，得到需要在该自定义页面中呈现的动画。

其中，动画设置单元，具体适于建立浏览器脚本文件，通过将动画写入该浏览器脚本文件，以将该动画设置在浏览器中；和/或，通过设置浏览器内置页面中层叠样式表单CSS3中的动画Animation属性和转变Transition属性的内容，将动画设置在浏览器中。

其中，上述浏览器为支持HTML5的浏览器。

其中，动画加载单元，具体适于运行浏览器脚本文件，利用该浏览器脚本文件将动画设置在自定义页面中；和/或，根据动画修改浏览器内置页面中CSS3中的Animation属性和Transition属性的内容，以将动画设置在自定义页面中。

其中，动画包括以下至少一个：天气动画、节日动画、时间动画、地点动画、情境动画。

其中，当动画为天气动画时，动画选取单元包括城市代码获取模块和天气动画选取模块，

城市代码获取模块，适于获取浏览器用户所在城市的城市代码；天气动画选取模块，适于获取与城市代码对应的天气信息；将与天气信息相一致的动画确定为需要在自定义页面中呈现的动画。

其中，浏览器自定义页面包括以下至少之一：浏览器标签页、显示连接信息的浏览器页面。

其中，浏览器自定义页面为添加了新功能的新标签页时，动画设置单元设置在浏览器中的动画为演示该新功能的动画。

由上所述，本发明实施例通过将动画设置在浏览器中，并将动画加载在浏览器自定义页面中，在呈现浏览器自定义页面时将动画也在该页面上呈现出来的技术手段，使网页中信息的展现方式多样化，丰富了网页中承载的内容，提高了网页资源的利用率以及用户获取信息的效率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的用于浏览器的页面呈现装置结构示意图;

图2示出了根据本发明另一个实施例的用于浏览器的页面呈现方法。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明的一个实施例提供了一种用于浏览器的页面呈现装置100，能够充分利用浏览器资源，在不干扰用户的情况下提高了用户获取信息的效率。

参见图1，用于浏览器的页面呈现装置100包括接收单元110、动画设置单元111、页面生成单元112、动画选取单元113、动画加载单元114和页面呈现单元115。下面分别对这些单元进行说明。

接收单元110适于接收用户的输入数据。接收单元110接收用户在浏览器中的输入数据，网页浏览器是一种显示网页服务器或档案系统内的文件并让用户与此文件互动的一种应用软件。它用来显示在万维网或局域网内的文字、影像及其他资讯。这些文字或影像，可以是连接其他网址的超链接，用户通过浏览器可迅速及轻易地浏览各种资讯。例如，接收单元110接收用户通过点击浏览器中的图标发送的访问请求数据。

动画设置单元111适于将制作出的需要呈现的动画设置在浏览器中。

上述动画包括以下至少一个：指示气象状态的天气动画、指示节假日状态的节日动画、指示时间的时间动画、指示地理位置的地点动画、情境动画，该情境动画指针对一些具体情境的动画，如针对当日与新闻、人物等相关的情境动画。

本发明的主要目的之一是在浏览器自定义页面中，为用户提供一些常用信息。为了避免用户对推送信息的反感，并增加页面的趣味和美观，本发明实施例利用动画设置单元111采用动画作为信息的展现方式。举例来说，浏览器可以通过动画在新标签页中渲染天气、节日、时间等信息，浏览器也可以在错误返回页中提供相关的信息。

本实施例对动画制作的具体方法不进行限定，例如，对于天气动画，可以采用新一代web开发标准HTML5（Hypertext Markup Language 5，超文本标记语言第五版）来实现，以下给出一个下雨的动画效果的HTML5实现示例。本实施例中的浏览器可以为支持HTML5的浏览器。

本实施例中通过使用开源类库Three.js来实现较为复杂的动画模型设计。首先，在三维场景中，建立一个坐标系，并通过设定摄像机位置、可视范围、可视景深得到一个可视的三维区域。然后，随机产生特定数量（约在几百到几千个）的雨粒子，每个粒子有不同的位置和速度，可以将同样的贴图根据粒子不同的速度旋转不同的方向，再根据每个粒子距离摄像机的距离投影到可视的二维平面。

下面具体给出两段代码的示例，代码vertexshader展示了怎样计算一个粒子的位置、大小，代码fragmentshader展示了怎样给一个粒子根据其速度贴上合适的图片，即进行贴图的旋转。

代码vertexshader表示如下：

代码fragmentshader表示如下：

动画设置单元111可以至少通过下述两种方式将制作出的动画设置在浏览器中：

方式一、建立浏览器脚本文件，如Javascript脚本文件，通过将动画写入该浏览器脚本文件，以将该动画设置在浏览器中。这种方式适用于所有支持HTML5特性的浏览器。

方式二、在浏览器内置页面中，通过设置该浏览器内置页面中CSS3（Cascading Style Sheet，层叠样式表单）中的动画（Animation）属性和转变（Transition）属性的内容，将动画设置在浏览器中。采用HTML5方式实现网页动画，操作快速方便，资源占用小。

页面生成单元112适于根据输入数据生成浏览器自定义页面。该浏览器自定义页面包括以下至少之一：浏览器标签页、显示连接信息的浏览器页面（访问失败/超时等）。当输入数据为标签页的打开指令时，页面生成单元112根据该指令生成浏览器标签页；当输入数据为网络访问的请求指令时，在网络连接失败时，页面生成单元112根据该指令以及连接失败的原因生成访问失败页面或者访问超时页面等。

动画选取单元113适于确定需要在自定义页面中呈现的动画。一种方式下，动画选取单元113建立不同类型的自定义页面与动画的对应关系，例如自定义页面包括第一类型页面和第二类型页面时，建立第一类型页面与天气动画之间的对应关系，以及建立第二类型页面与节日动画之间的对应关系等，则动画选取单元113确定需要在第一类型页面中呈现的动画为天气动画，动画选取单元113确定需要在第二类型页面中呈现的动画为节日动画。

当动画为天气动画时，动画选取单元113还包括城市代码获取模块和天气动画选取模块。

该城市代码获取模块，适于获取浏览器用户所在城市的城市代码。城市代码获取模块可以通过下述两种方式获取到城市代码：第一种方式下，浏览器先与服务器建立网络连接，以使服务器得到浏览器的IP地址，服务器根据该IP地址查询浏览器用户所对应的城市代码，服务器将查询到的城市代码发送至浏览器，从而使城市代码获取模块获取到城市代码。第二种方式下、浏览器侧保存有城市代码信息，浏览器中的城市代码获取模块可以从本地保存的城市代码信息中查找出浏览器用户对应的城市代码。

该天气动画选取模块，适于获取与城市代码对应的天气信息；将与天气信息相一致的动画确定为需要在自定义页面中呈现的动画。例如，制作出的天气动画包括下雨动画、下雪动画和晴天动画。当天气信息指示天气为下雨时，则将下雨动画确定为需要在自定义页面中呈现的动画。

动画加载单元114适于将动画加载在自定义页面中。根据动画在浏览器中设置的方式不同，动画加载单元114加载动画的方式也不同。相应于上述方式一，动画加载单元114通过运行浏览器脚本文件，利用该浏览器脚本文件将动画设置在自定义页面中，如设置在自定义页面的页面前景或者页面背景中；相应于上述方式二，动画加载单元114通过根据动画修改Animation属性和Transition属性的内容，以将动画设置在自定义页面中，如设置在自定义页面的页面前景、页面背景或者任一页面元素中。

页面呈现单元115适于将动画在自定义页面上呈现出来。根据动画在自定义页面中设置位置的不同，如页面呈现单元115可以将动画在自定义页面的页面前景或页面背景中展示出来，页面呈现单元115也可以将动画在该动画所位于的任一页面元素处展示出来。

本实施例将动画绘制在自定义网页的背景或前景等位置并显示出来，不但不会影响自定义网页中本身自带的信息的展示，同时因为动画效果比较夺人眼球，容易引起用户注意，用这种展现方式来提示用户，也会收到非常好的效果。通过动画能够将天气、节日、时间等常用信息提供给用户，用户通常会经常用到这些常用信息，而通过将这些常用信息在自定义页面中展示出来，避免了用户需要访问某些网站或应用才能获取到这些信息带来的访问操作，降低了用户操作的复杂度，提高了网络资源的使用效率。

其中，动画中的具体内容可以根据实际需求而变化，例如，当浏览器自定义页面为浏览器标签页时，若该标签页为添加了新功能的新标签页，则通常对应于该新功能会在新标签页中新增一个按钮，当接收到用户点击该按钮的指令时，在标签页上触发某种特效或开启某个新特性。然而，在网页中新增一个按钮通常是不太容易被用户发现的，则本实施例制作出的需要呈现的动画可以为演示该新功能的动画，该动画中的内容可以使用渐变、跳动等效果指出按钮所在位置和功能，能很清楚的让用户看到新增的按钮，并了解点击此按钮的效果。

另外，当网页崩溃、网页访问超时、网页不存在时都会在这些网页中调用对应的动画并显示，更直观更清晰的提示用户应该点击哪里或者应该注意页面上的错误信息，便于用户做出下一步操作，例如，当网页载入超时时，通过动画和箭头的配合，告知用户应该点击哪里可以刷新重试等等。

由上所述，本发明实施例通过将动画设置在浏览器中，将动画加载在浏览器自定义页面中，并在呈现浏览器自定义页面时将动画也在该页面上呈现出来的技术手段，使网页中信息的展现方式多样化，丰富了网页中承载的内容，提高了网页资源的利用率以及用户获取信息的效率。

本发明另一个实施例提供了一种用于浏览器的页面呈现方法，参见图2，该方法始于步骤S200，该步骤中将制作出的动画设置在浏览器中，其中，动画包括以下至少一个：天气动画、节日动画、时间动画、地点动画、情境动画。具体的，当浏览器自定义页面为添加了新功能的新标签页时，制作出的需要呈现的动画可以为演示该新功能的动画。

步骤S202：在生成浏览器自定义页面时，确定需要在该自定义页面中呈现的动画，该浏览器自定义页面包括以下至少之一：浏览器标签页、显示连接信息的浏览器页面。可以预先建立不同类型的自定义页面与动画的对应关系，则在步骤S202中，根据生成的自定义页面的类型查找对应关系，得到需要在该自定义页面中呈现的动画。

步骤S204：将动画加载在自定义页面中。

当步骤S200中将制作出的动画设置在浏览器中具体包括：建立浏览器脚本文件，通过将动画写入该浏览器脚本文件，以将该动画设置在浏览器中，则步骤S204具体为：运行浏览器脚本文件，利用该浏览器脚本文件将动画设置在自定义页面（页面前景或背景）中。

当步骤S200中将制作出的动画设置在浏览器中具体包括：通过设置浏览器内置页面中CSS3中的动画Animation属性和转变Transition属性的内容，将动画设置在浏览器中，则步骤S204具体为：根据动画修改Animation属性和Transition属性的内容，以将动画设置在自定义页面（页面前景或背景或任一页面元素）中。

步骤S206：将动画在自定义页面上呈现出来。根据动画在自定义页面中设置位置的不同，可以将动画在自定义页面的页面前景或页面背景中展示出来，也可以将动画在该动画所位于的任一页面元素处展示出来。直至本方法执行完毕。

本实施例中的浏览器可以为支持HTML5的浏览器。

其中，当动画为天气动画时，在执行步骤S202之前，上述方法还包括：获取浏览器用户所在城市的城市代码，例如，浏览器与服务器建立网络连接，以使服务器得到浏览器的IP地址，以及接收服务器下发的由所述IP地址得到的城市代码；或者，浏览器从浏览器侧保存的城市代码信息中查找出浏览器用户所属于的城市代码，则步骤S202还具体包括：获取与城市代码对应的天气信息；将与天气信息相一致的动画确定为需要在自定义页面中呈现的动画。

本发明方法实施例中各步骤的具体执行方式以及相应的有益效果可以参见本发明的装置实施例，在此不再赘述。

由上所述，本发明实施例通过将动画设置在浏览器中，将动画加载在浏览器自定义页面中，并在呈现浏览器自定义页面时将动画也在该页面上呈现出来的技术手段，使网页中信息的展现方式多样化，丰富了网页中承载的内容，提高了网页资源的利用率以及用户获取信息的效率。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的用于浏览器的页面呈现装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (16)

1.一种用于浏览器的页面呈现方法，包括：

将制作出的动画设置在浏览器中；

建立不同类型的自定义页面与动画的对应关系；

在生成浏览器自定义页面时，根据生成的自定义页面的类型查找所述对应关系，得到需要在该自定义页面中呈现的动画；

将所述动画加载在所述自定义页面中，并将所述动画在所述自定义页面上呈现出来。

2.根据权利要求1所述的方法，其中，

所述将制作出的动画设置在浏览器中包括：

建立浏览器脚本文件，通过将动画写入该浏览器脚本文件，以将该动画设置在浏览器中；

所述将所述动画加载在所述自定义页面中包括：

运行所述浏览器脚本文件，利用该浏览器脚本文件将所述动画设置在所述自定义页面中。

3.根据权利要求1所述的方法，其中，

所述将制作出的动画设置在浏览器中包括：

通过设置浏览器内置页面中层叠样式表单CSS3中的动画Animation属性和转变Transition属性的内容，将动画设置在浏览器中；

所述将所述动画加载在所述自定义页面中包括：

根据所述动画修改所述Animation属性和Transition属性的内容，以将所述动画设置在所述自定义页面中。

4.根据权利要求1-3中任一项所述的方法，其中，所述浏览器为支持HTML5的浏览器。

5.根据权利要求1所述的方法，其中，所述动画包括以下至少一个：天气动画、节日动画、时间动画、地点动画、情境动画。

6.根据权利要求1所述的方法，其中，当所述动画为天气动画时，在确定需要在该自定义页面中呈现的动画之前，所述方法还包括：

获取浏览器用户所在城市的城市代码；

所述确定需要在该自定义页面中呈现的动画包括：

获取与所述城市代码对应的天气信息；

将与所述天气信息相一致的动画确定为需要在自定义页面中呈现的动画。

7.根据权利要求1所述的方法，其中，

所述浏览器自定义页面包括以下至少之一：浏览器标签页、显示连接信息的浏览器页面。

8.根据权利要求1所述的方法，其中，

所述浏览器自定义页面为添加了新功能的新标签页时，所述制作出的需要呈现的动画为演示该新功能的动画。

9.一种用于浏览器的页面呈现装置，包括：

接收单元，适于接收用户的输入数据；

动画设置单元，适于将制作出的需要呈现的动画设置在浏览器中；

页面生成单元，适于根据所述输入数据生成浏览器自定义页面；

动画选取单元，适于确定需要在所述自定义页面中呈现的动画；

动画加载单元，适于将所述动画加载在所述自定义页面中；

页面呈现单元，适于将所述动画在所述自定义页面上呈现出来；

所述动画选取单元，具体适于建立不同类型的自定义页面与动画的对应关系，根据生成的自定义页面的类型查找所述对应关系，得到需要在该自定义页面中呈现的动画。

10.根据权利要求9所述的装置，其中，所述动画设置单元，具体适于建立浏览器脚本文件，通过将动画写入该浏览器脚本文件，以将该动画设置在浏览器中；和/或，通过设置浏览器内置页面中层叠样式表单CSS3中的动画Animation属性和转变Transition属性的内容，将动画设置在浏览器中。

11.根据权利要求9所述的装置，其中，所述动画加载单元，具体适于运行浏览器脚本文件，利用该浏览器脚本文件将所述动画设置在所述自定义页面中；和/或，根据所述动画修改浏览器内置页面中CSS3中的Animation属性和Transition属性的内容，以将所述动画设置在所述自定义页面中。

12.根据权利要求9-11中任一项所述的装置，其中，所述浏览器为支持HTML5的浏览器。

13.根据权利要求9所述的装置，其中，所述动画包括以下至少一个：天气动画、节日动画、时间动画、地点动画、情境动画。

14.根据权利要求9所述的装置，其中，当所述动画为天气动画时，所述动画选取单元包括城市代码获取模块和天气动画选取模块，

所述城市代码获取模块，适于获取浏览器用户所在城市的城市代码；

所述天气动画选取模块，适于获取与所述城市代码对应的天气信息；将与所述天气信息相一致的动画确定为需要在自定义页面中呈现的动画。

15.根据权利要求9所述的装置，其中，所述浏览器自定义页面包括以下至少之一：浏览器标签页、显示连接信息的浏览器页面。

16.根据权利要求9所述的装置，其中，

所述浏览器自定义页面为添加了新功能的新标签页时，所述动画设置单元设置在浏览器中的动画为演示该新功能的动画。

Images