一种基于插件的浏览器渲染方法及系统的制作方法
【技术领域】
[0001] 本发明涉及计算机应用技术领域，具体涉及一种基于插件的浏览器渲染方法及系 统。
【背景技术】
[0002] 在任何一个项目中弹框不可缺少，页面警告、友好提示、各种协议、页面加载慢时 有缓解的动画等等弹框随处可见。如果每个类型的都写一个弹框也要10多种。同一个类 型重复复制，不但增加了工作量而且代码、demo结构、CSS文件的多处复制给项目造成很多 的代码冗余。
【发明内容】
[0003] 本发明所要解决的技术问题是提供一种基于插件的浏览器渲染方法及系统，能够 解决为每种类型均编写一个弹框而造成的代码冗余的问题。
[0004] 本发明解决上述技术问题的技术方案如下：
[0005] -方面，本发明提供了一种基于插件的浏览器渲染方法，所述方法包括：
[0006] S1、在浏览器页面调用插件时，接收浏览器页面传入所述插件的参数信息；
[0007] S2、提取所述参数信息中的type值，根据所述type值确定对应的弹框类型，并生 成对应弹框类型的demo结构；
[0008] S3、根据所述参数信息中的数据信息，对所述弹框类型的demo结构中添加数据信 息，并将添加有数据信息的demo结构传递给浏览器；
[0009] S4、浏览器根据所述添加有数据信息的demo结构进行对应的弹框的渲染，并将渲 染后的弹框在浏览器页面进行展示。
[0010] 另一方面，本发明提供了一种基于插件的浏览器渲染系统，所述系统包括插件和 浏览器；
[0011] 所述插件包括：
[0012] 参数信息接收模块，用于在浏览器页面调用插件时，接收浏览器页面传入插件的 参数信息；
[0013] 提取模块，用于提取所述参数信息中的type值；
[0014] 弹框类型确定模块，用于根据所述type值确定对应的弹框类型；
[0015] demo结构生成模块，用于生成对应弹框类型的demo结构；
[0016] 数据添加模块，用于根据所述参数信息中的数据信息，向所述弹框类型的demo结 构中添加数据信息；
[0017] 传递模块，用于将添加有数据信息的demo结构传递给浏览器；
[0018] 所述浏览器包括：
[0019] 渲染模块，用于根据所述添加有数据信息的demo结构进行对应弹框的渲染；
[0020] 弹框展示模块，用于将渲染后的弹框在浏览器页面进行展示。
[0021] 本发明提供的一种基于插件的浏览器渲染方法及系统，针对不同的应用项目，浏 览器页面只需要调用插件并向插件传入参数信息，插件可根据浏览器页面传入的参数信息 生成对应类型弹框的demo结构并向demo结构中添加参数信息中的数据信息，浏览器根据 添加有数据信息的demo结构进行对应弹框的渲染，针对不同的应用项目，可通过插件实现 不同类型的弹框，而不需要为每种类型编写一个弹框，解决了代码冗余，节省了开发人员的 工作量。
【附图说明】
[0022] 图1为本发明实施例一的一种基于插件的浏览器渲染方法流程图；
[0023] 图2为本发明实施例一的一种基于插件的浏览器渲染的整个工作流程图；
[0024] 图3为本发明实施例一中弹框为确认框示意图；
[0025] 图4为本发明实施例一中弹框为提示框示意图；
[0026] 图5为本发明实施例一中弹框为协议内容弹框示意图；
[0027] 图6为本发明实施例二的一种基于插件的浏览器渲染系统示意图。
【具体实施方式】
[0028] 以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并 非用于限定本发明的范围。
[0029] 实施例一、一种基于插件的浏览器渲染方法。下面结合图1-图5对本实施例提供 的方法进行详细描述。
[0030] 图1中，S1、在浏览器页面调用插件时，接收浏览器页面传入所述插件的参数信 息。
[0031] 具体的，在很多应用项目中，各种各样的弹框是不可缺少的，例如，页面警告、友好 提示、各种协议（比如，银行协议）以及页面加载速度慢时有缓解的图标动画等都需要用弹 框来实现。现有技术为每种类型均编写一个对应的弹框来展示信息，如果类型很多，则编写 的弹框也会很多；并且不同项目的同一种类型弹框也会重复复制，增加了开发人员的工作 量且编写代码、demo结构、CSS(Cascading Style Sheets，层叠样式表）文件的多处复制给 项目造成很多的代码冗余。因此，本实施例设计了一种基于浏览器的插件，浏览器页面可 以直接调用该插件，在调用该插件时向插件传递必要的参数信息，插件接收该参数信息。其 中，浏览器页面向插件中传递的参数信息至少包括type值（即弹框类型参数值）、数据信 息以及与数据信息对应的样式信息，比如，数据信息中包括文字信息、图标类型信息和按钮 信息，其中文字信息包括弹框的标题信息、弹框的业务功能信息以及文字提示信息，样式信 息包括文字信息的颜色、字体和字号，以及按钮的颜色、按钮中需要显示的文字和文字的颜 色。下面以浏览器页面向插件传入的参数信息中的type值（弹框类型参数值）对应的弹 框类型为提示框为例说明浏览器页面向插件中传入的参数信息代码如下：
[0032] CN 105138324 A 兄明书 3/6 页
})：
[0033] 其中，A、Type: I页面加载进度条
[0034] Type:2弹出确认框
[0035] Type:3 提示框
[0036] Type: 4外部调回后自动关闭进度条、协议内容弹框
[0037] Type: 5改变弹框宽度和高度
[0038] B、info为标题信息
[0039] C、title为业务功能信息
[0040] D、text为提示文字
[0041 ] E、ok为确定按钮上执行的方法
[0042] F、cancle为取消按钮上的方法
[0043] G、tag-zq为成功、cw为失败、tx提示信息、yw为疑问、ywsmall为小兔子图标
[0044] H、btntextl为橘色按钮文字、btntextl为灰色按钮文字
[0045] I、okl只回调函数不执行关闭。
[0046] 需要说明的是，本实施例中浏览器页面在调用插件的过程中，浏览器页面以 HTML (Hypertext Markup Language，超文本标记语言）标签的形式向插件传递参数信息，其 中，传递的参数信息为JSON(JavaScript Object Notation)串参数。本实施例支持IE6(+)， FF3. 6+，0pera9+，Chrome9+360 等主流浏览器。
[0047] S2、提取参数信息中的type值，根据type值确定对应的弹框类型，并生成对应弹 框类型的demo结构。
[0048] 具体的，前述插件接收浏览器页面向插件中传递的参数信息，并从参数信息中提 取type值，根据该type值确定对应的弹框类型。在本实施例中，弹框类型至少包括进度条、 确认框（如图3)、提示框（如图4)、关闭进度条以及协议内容弹框（如图5)。
[0049] 参见图2,参数信息中的每一个弹框类型参数值（即type值）对应一种类型的弹 框，比如，type = 1，进度条，即页面加载；type = 2,确认框；type = 3,提示框；type = 4， 关闭进度条或者协议内容弹框；type = 5,弹框大小可调整；type = 6,纯净版弹框，即弹框 自身没有任何内容。当然，并不限于这些弹框类型，还可以配置其它类型的弹框。
[0050] 随后，插件根据确定的弹框类型，生成对应弹框类型的demo结构，即生成相应类 型的弹框框架结构。
[0051] 需要说明的是，如果浏览器页面向插件传入的参数信息中弹框类型参数值type =4,且确定为弹框为关闭进度条，则关闭该弹框。
[0052] S3、根据所述参数信息中的数据信息，对所述弹框类型的demo结构中添加数据信 息，并将添加有数据信息的demo结构传递给浏览器。
[0053] 具体的，根据插件接收的参数信息中的数据信息，向生成的对应弹框的demo结构 中添加数据信息，形成添加有数据信息的对应弹框的demo结构，并将该具有数据信息的 demo结构传递给浏览器。
[0054] S4、浏览器根据所述添加有数据信息的demo结构进行渲染，并将渲染后的弹框在 浏览器页面进行展示。
[0055] 具体的，浏览器接收到插件传递的具有数据信息的demo结构，根据demo结构对 对应的弹框进行渲染，并将渲染后的弹框在浏览器页面进行展示。具体对弹框进行渲染的 过程为：根据前述参数信息