CN102316384A - 页面多图切换实现方法及网络电视嵌入式浏览器 - Google Patents

Abstract

本发明涉及一种页面多图切换实现方法、网络电视嵌入式浏览器，其方法包括：捕捉用户选择页面选择元素的触发动作；根据触发动作选择的选择元素的编号，从页面对应的隐藏域元素中获取图片地址；通过页面的显示元素下载并更新显示与图片地址对应的图片。本发明利用机顶盒嵌入式浏览器有限的javascript脚本功能，捕捉用户点击和选中的动作；引入隐藏域元素，把图片地址储存到隐藏域元素中，浏览器不用主动下载该图片，当需要时才获取图片，使得请求响应快，加载页面小，高效的实现了多图切换的功能，进而使得页面美观、动感、交互性强，提高用户感受。

Description

页面多图切换实现方法及网络电视嵌入式浏览器

技术领域

本发明涉及IPTV(Interactive Personality TV，网络电视)页面展示技术领域，尤其涉及一种IPTV中基于嵌入式浏览器的页面多图切换实现方法及网络电视嵌入式浏览器。

背景技术

随着IPTV走进千家万户，更多的人体验到宽带带来的乐趣，人们的生活质量因此得到提高。

目前，IPTV***中音频视频解码技术、流媒体传送技术、宽带接入网络技术以及IP机顶盒技术都得到了快速的发展。而由于IPTV终端展示中所使用的嵌入式浏览器自身存在的局限性，浏览器支持的WEB特性相对较弱，一般只支持有限的超文本标语(HTML，Hyper Text Markup Language)和功能非常有限的脚本语言(javascript)。

此外，由于机顶盒内存较小，嵌入式浏览器解析速度较慢，因此，要求在机顶盒运行的web应用、页面以及请求次数要尽可能的少，否则会导致浏览器变慢，用户遥控器操作缓慢，影响用户体验，甚至可能影响用户对IPTV的兴趣。

为了提高用户视觉上的冲击和愉悦性，通常采用一种多图切换的动感展现方式，可以使展现给终端用户的界面美观、动感并且多样化。

目前，实现多图切换的方法有以下两种：

1、页面有多个显示元素，通过javascript函数控制显示元素是否显示。其缺点是：页面有多个显示元素，浏览器需要下载所有图片，会导致页面加载过慢，而且加载的页面过大，会导致机顶盒响应用户操作缓慢。其优点是：只需请求一次，图片都在页面取得。

2、在javascript函数内异步取得图片地址，其缺点是：用户请求次数增加，增加服务器的压力，浏览器也会变慢。而且异步调用后台服务的方法，并不是所有机顶盒都能良好的支持。其优点是：加载的页面小，只是在需要时才去取得图片。

因此，现有的多图切换方法无法同时实现请求次数少且页面小的多图切换效果。

发明内容

本发明的主要目的在于提供一种页面多图切换实现方法及网络电视嵌入式浏览器，旨在实现高效多图切换，提高用户体验效果。

为了达到上述目的，本发明提出一种页面多图切换实现方法，包括：

捕捉用户选择页面选择元素的触发动作；

根据所述触发动作选择的选择元素的编号，从所述页面对应的隐藏域元素中获取图片地址；

通过页面的显示元素下载并更新显示与所述图片地址对应的图片。

优选地，所述捕捉用户选择页面选择元素的触发动作的步骤包括：

按照默认触发条件或按照预定触发条件，捕捉用户通过遥控器触发的选择页面选择元素的触发动作。

优选地，该方法还包括：

设定与用户的所述触发动作对应的按键模式，作为预定触发条件。

优选地，所述触发动作的状态至少包括：获取焦点或点击选中状态。

优选地，所述页面包括若干所述选择元素、一所述显示元素以及若干与所述选择元素对应的隐藏域元素。

优选地，所述根据触发动作选择的选择元素的编号，从所述页面对应的隐藏域元素中获取图片地址的步骤包括：

根据所述触发动作选择的选择元素的编号，获取对应的隐藏域元素的编号；

根据所述对应的隐藏域元素的编号，获取所述对应的隐藏域元素内存储的图片地址。

本发明还提出一种实现页面多图切换的网络电视嵌入式浏览器，包括：

触发动作捕捉模块，用于捕捉用户选择页面选择元素的触发动作；

图片地址获取模块，用于根据所述触发动作选择的选择元素的编号，从所述页面对应的隐藏域元素中获取图片地址；

图片更新显示模块，用于通过页面的显示元素下载并更新显示与所述图片地址对应的图片。

优选地，所述触发动作捕捉模块还用于按照默认触发条件或按照预定触发条件，捕捉用户通过遥控器触发的选择页面选择元素的触发动作。

优选地，该网络电视嵌入式浏览器还包括：

设定模块，用于设定与用户的所述触发动作对应的按键模式，作为预定触发条件。

优选地，所述图片地址获取模块包括：

第一获取单元，用于根据所述触发动作选择的选择元素的编号，获取对应的隐藏域元素的编号；

第二获取单元，用于根据所述对应的隐藏域元素的编号，获取所述对应的隐藏域元素内存储的图片地址。

本发明提出的一种页面多图切换实现方法及网络电视嵌入式浏览器，利用机顶盒嵌入式浏览器有限的javascript脚本功能，捕捉用户点击和选中的动作；引入隐藏域元素，把图片地址储存到隐藏域元素中，浏览器不用主动下载该图片，当需要时才获取图片，使得请求响应快，加载页面小，以请求次数最少，页面最小的方式，高效的实现了多图切换的功能，进而使得页面美观、动感、交互性强，提高了用户感受，解决了现有技术中需要多次请求且页面过大的问题。

附图说明

图1是本发明页面多图切换实现方法一实施例流程示意图；

图2是本发明页面多图切换实现方法一实施例中根据触发动作选择的选择元素的编号，从页面对应的隐藏域元素中获取图片地址的流程示意图；

图3是本发明页面多图切换实现方法另一实施例流程示意图；

图4是本发明实现页面多图切换的网络电视嵌入式浏览器一实施例的结构示意图；

图5是本发明实现页面多图切换的网络电视嵌入式浏览器一实施例中图片地址获取模块的结构示意图；

图6是本发明实现页面多图切换的网络电视嵌入式浏览器另一实施例的结构示意图。

为了使本发明的技术方案更加清楚、明了，下面将结合附图作进一步详述。

具体实施方式

本发明实施例解决方案主要是：利用机顶盒嵌入式浏览器有限的javascript脚本功能，捕捉用户点击和选中的动作；引入隐藏域元素，把图片地址储存到隐藏域元素中，网络电视嵌入式浏览器根据捕捉到的用户选择页面选择元素的触发动作，从对应的隐藏域元素中获取图片地址；再通过页面的显示元素下载并更新显示与图片地址对应的图片，以提高页面多图切换的高效性及用户感受。

如图1所示，本发明一实施例提出一种页面多图切换实现方法，包括：

步骤S101，捕捉用户选择页面选择元素的触发动作；

本实施例方法运行环境涉及网络电视(IPTV)，IPTV门户为运行于web服务器上的web应运程序，是由jsp(java server Page，java服务网页)、图片文件、数据库等所组成。客户端为机顶盒，用户通过机顶盒的嵌入式浏览器访问页面，页面展示于电视机或类似的播放媒介上，用户的操作通过机顶盒遥控器来控制，页面展示的元素要求比较大，便于用户选择。

本实施例中，页面包括三种元素：若干个选择元素，一个显示元素和若干个隐藏域元素，其中，隐藏域元素与选择元素一一对应，其编码规则可以对应一致，比如，选择元素编码为C001，隐藏域元素编码即为H001。

选择元素供用户选择，显示元素用于显示图片，隐藏域元素用于存放备选的图片地址。当用户选择一个选择元素时，则对应选择到一个隐藏域元素，从而可以从该对应的隐藏域元素中获取相应的图片地址。

对于用户的触发动作，可以预先在IPTV门户的jsp页面模版中定义用户动作以及相应的自定义javascript函数，比如可以设定与用户的触发动作对应的按键模式，作为预定触发条件，取代默认的机顶盒按键处理。当焦点在页面上移动时，通过嵌入式浏览器所提供的脚本功能捕捉用户的动作。

若用户的动作满足预定的触发条件，则可以从对应的隐藏域元素中获取图片地址。

此外，嵌入式浏览器还可以按照默认触发条件，捕捉用户通过遥控器触发的选择页面的选择元素的触发动作。

通常，嵌入式浏览器通过界面链接响应的用户动作一般有三种操作类型(动作状态)，包括：获取焦点、失去焦点以及点击选中状态。在多图切换的实现方案中一般只处理获取焦点(onFocus)及点击选中(onClick)状态。因此，本实施例在jsp页面中定义这两种状态触发的javascript函数，在该javascript函数中判断用户的触发动作。

步骤S102，根据触发动作选择的选择元素的编号，从页面对应的隐藏域元素中获取图片地址；

对于用户的触发动作，如果触发动作为获取焦点或点击选中，嵌入式浏览器则根据触发动作获取用户触发选择的页面选择元素的编号。

然后，根据选择元素的编号，获取对应编号的隐藏域元素，从中获取对应的图片地址。

如果用户的触发动作不是获取焦点或点击选中，则调用机顶盒默认的javascript函数，进行其他相应的操作。

步骤S103，通过页面的显示元素下载并更新显示与图片地址对应的图片。

其中，一个页面只有一个显示元素，通常为img标签，显示元素的编号id是唯一且固定，如showImgid。通过该id获取显示元素的实体，再使用上述步骤S102中获取到的隐藏域元素的图片地址，修改显示元素的实体的属性(通常为img标签的src属性)，则可以实现更新当前页面显示图片的效果。

不断重复以上步骤，只要隐藏域元素的图片地址不一样，则可实现多图切换的页面展示动感效果。

具体实施过程中，如图2所示，上述步骤S102包括：

步骤S1021，根据触发动作选择的选择元素的编号，获取对应的隐藏域元素的编号；

步骤S1022，根据对应的隐藏域元素的编号，获取对应的隐藏域元素内存储的图片地址。

本实施例利用机顶盒嵌入式浏览器有限的java script脚本功能，捕捉用户点击和选中的动作，高效的实现了多图切换的功能，使得页面美观、动感、交互性强，同时解决了现有技术中需要多次请求以及页面过大的问题。

如图3所示，本发明另一实施例提出一种页面多图切换实现方法，包括：

步骤S200，设定与用户的触发动作对应的按键模式，作为预定触发条件。

步骤S201，按照预定触发条件捕捉用户选择页面选择元素的触发动作；

步骤S202，根据触发动作选择的选择元素的编号，从页面对应的隐藏域元素中获取图片地址；

步骤S203，通过页面的显示元素下载并更新显示与图片地址对应的图片。

本实施例与上述实施例的不同之处在于，本实施例中，通过在IPTV门户的jsp页面模版中定义用户动作以及相应的自定义javascript函数，设定与用户的触发动作对应的按键模式，作为预定触发条件，取代默认的机顶盒按键处理。其他与上述实施例相同。

如图4所示，本发明一实施例提出一种实现页面多图切换的网络电视嵌入式浏览器，包括：触发动作捕捉模块301、图片地址获取模块302以及图片更新显示模块303，其中：

触发动作捕捉模块301，用于捕捉用户选择页面选择元素的触发动作；

图片地址获取模块302，用于根据触发动作选择的选择元素的编号，从页面对应的隐藏域元素中获取图片地址；

图片更新显示模块303，用于通过页面的显示元素下载并更新显示与图片地址对应的图片。

本实施例网络电视嵌入式浏览器为机顶盒的网络电视嵌入式浏览器，网络电视(IPTV)门户为运行于web服务器上的web应运程序，是由jsp(javaserver Page，java服务网页)、图片文件、数据库等所组成。客户端为机顶盒，用户通过该机顶盒的嵌入式浏览器访问页面，页面展示于电视机或类似的播放媒介上，用户的操作通过机顶盒遥控器来控制，页面展示的元素要求比较大，便于用户选择。

本实施例中，页面包括三种元素：若干个选择元素，一个显示元素和若干个隐藏域元素，其中，隐藏域元素与选择元素一一对应，其编码规则可以对应一致，比如，选择元素编码为C001，隐藏域元素编码即为H001。

选择元素供用户选择，显示元素用于显示图片，隐藏域元素用于存放备选的图片地址。当用户选择一个选择元素时，则对应选择到一个隐藏域元素，从而可以从该对应的隐藏域元素中获取相应的图片地址。

对于用户的触发动作，可以预先在IPTV门户的jsp页面模版中定义用户动作以及相应的自定义javascript函数，比如可以设定与用户的触发动作对应的按键模式，作为预定触发条件，取代默认的机顶盒按键处理。当焦点在页面上移动时，触发动作捕捉模块301通过嵌入式浏览器所提供的脚本功能捕捉用户的动作。

若用户的动作满足预定的触发条件，图片地址获取模块302则从对应的隐藏域元素中获取图片地址。

此外，嵌入式浏览器还可以按照默认触发条件，捕捉用户通过遥控器触发的选择页面的选择元素的触发动作。

通常，嵌入式浏览器通过界面链接响应的用户动作一般有三种操作类型(动作状态)，包括：获取焦点、失去焦点以及点击选中状态。在多图切换的实现方案中一般只处理获取焦点(onFocus)及点击选中(onClick)状态。因此，本实施例在jsp页面中定义这两种状态触发的javascript函数，在该javascript函数中判断用户的触发动作。

对于用户的触发动作，如果触发动作为获取焦点或点击选中，嵌入式浏览器中图片地址获取模块302则根据触发动作获取用户触发选择的页面选择元素的编号。然后，根据选择元素的编号，获取对应编号的隐藏域元素，从中获取对应的图片地址。

如果用户的触发动作不是获取焦点或点击选中，则调用机顶盒默认的javascript函数，进行其他相应的操作。

本实施例中一个页面只有一个显示元素，通常为img标签，显示元素的编号id是唯一且固定，如showImgid。

图片更新显示模块303通过该id获取显示元素的实体，再使用图片地址获取模块302获取到的隐藏域元素的图片地址，修改显示元素的实体的属性(通常为img标签的src属性)，则可以实现更新当前页面显示图片的效果。

不断重复以上过程，只要隐藏域元素的图片地址不一样，则可实现多图切换的页面展示动感效果。

如图5所示，图片地址获取模块302包括：第一获取单元3021及第二获取单元3022，其中：

第一获取单元3021，用于根据触发动作选择的选择元素的编号，获取对应的隐藏域元素的编号；

第二获取单元3022，用于根据对应的隐藏域元素的编号，获取对应的隐藏域元素内存储的图片地址。

如图6所示，本发明另一实施例提出一种实现页面多图切换的网络电视嵌入式浏览器，在上述实施例的基础上，还包括：

设定模块300，用于设定与用户的触发动作对应的按键模式，作为预定触发条件。

本实施例与上述实施例的不同之处在于，本实施例中，通过设定模块300在IPTV门户的jsp页面模版中定义用户动作以及相应的自定义javascript函数，设定与用户的触发动作对应的按键模式，作为预定触发条件，取代默认的机顶盒按键处理。其他与上述实施例相同。

本发明实施例页面多图切换实现方法及网络电视嵌入式浏览器，利用机顶盒嵌入式浏览器有限的javascript脚本功能，捕捉用户点击和选中的动作；引入隐藏域元素，把图片地址储存到隐藏域元素中，浏览器不用主动下载该图片，当需要时才获取图片，使得请求响应快，加载页面小，以请求次数最少，页面最小的方式，高效的实现了多图切换的功能，进而使得页面美观、动感、交互性强，解决了现有技术中需要多次请求且页面过大的问题。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或流程变换，或直接或间接运用在其它相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种页面多图切换实现方法，其特征在于，包括：

捕捉用户选择页面选择元素的触发动作；

根据所述触发动作选择的选择元素的编号，从所述页面对应的隐藏域元素中获取图片地址；

通过页面的显示元素下载并更新显示与所述图片地址对应的图片。

2.根据权利要求1所述的方法，其特征在于，所述捕捉用户选择页面选择元素的触发动作的步骤包括：

按照默认触发条件或按照预定触发条件，捕捉用户通过遥控器触发的选择页面选择元素的触发动作。

3.根据权利要求2所述的方法，其特征在于，还包括：

设定与用户的所述触发动作对应的按键模式，作为预定触发条件。

4.根据权利要求1所述的方法，其特征在于，所述触发动作的状态至少包括：获取焦点或点击选中状态。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述页面包括若干所述选择元素、一所述显示元素以及若干与所述选择元素对应的隐藏域元素。

6.根据权利要求5所述的方法，其特征在于，所述根据触发动作选择的选择元素的编号，从所述页面对应的隐藏域元素中获取图片地址的步骤包括：

根据所述触发动作选择的选择元素的编号，获取对应的隐藏域元素的编号；

根据所述对应的隐藏域元素的编号，获取所述对应的隐藏域元素内存储的图片地址。

7.一种实现页面多图切换的网络电视嵌入式浏览器，其特征在于，包括：

触发动作捕捉模块，用于捕捉用户选择页面选择元素的触发动作；

图片地址获取模块，用于根据所述触发动作选择的选择元素的编号，从所述页面对应的隐藏域元素中获取图片地址；

图片更新显示模块，用于通过页面的显示元素下载并更新显示与所述图片地址对应的图片。

8.根据权利要求7所述的网络电视嵌入式浏览器，其特征在于，所述触发动作捕捉模块还用于按照默认触发条件或按照预定触发条件，捕捉用户通过遥控器触发的选择页面选择元素的触发动作。

9.根据权利要求7所述的网络电视嵌入式浏览器，其特征在于，还包括：

设定模块，用于设定与用户的所述触发动作对应的按键模式，作为预定触发条件。

10.根据权利要求7、8或9所述的网络电视嵌入式浏览器，其特征在于，所述图片地址获取模块包括：

第一获取单元，用于根据所述触发动作选择的选择元素的编号，获取对应的隐藏域元素的编号；

第二获取单元，用于根据所述对应的隐藏域元素的编号，获取所述对应的隐藏域元素内存储的图片地址。

Images