页面多图切换实现方法及网络电视嵌入式浏览器 【技术领域】
本发明涉及 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(java server 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 脚本功能， 捕捉用户点击和选中的动作 ； 引入隐藏域元素， 把 图片地址储存到隐藏域元素中， 浏览器不用主动下载该图片， 当需要时才获取图片， 使得请 求响应快， 加载页面小， 以请求次数最少， 页面最小的方式， 高效的实现了多图切换的功能， 进而使得页面美观、 动感、 交互性强， 解决了现有技术中需要多次请求且页面过大的问题。
以上所述仅为本发明的优选实施例， 并非因此限制本发明的专利范围， 凡是利用 本发明说明书及附图内容所作的等效结构或流程变换， 或直接或间接运用在其它相关的技 术领域， 均同理包括在本发明的专利保护范围内。