CN111158686A - 网页弹框生成方法及装置、电子设备、存储介质 - Google Patents

Abstract

本发明提供了一种网页弹框生成方法及装置、电子设备、存储介质，涉及计算机技术领域。该网页弹框生成方法包括：在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。本发明实施例的技术方案可以降低网页弹框开发成本，提高网页弹框加载效率。

Description

网页弹框生成方法及装置、电子设备、存储介质

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种网页弹框生成方法、网页弹框生成装置、电子设备以及计算机可读存储介质。

背景技术

随着互联网技术的发展，通过浏览器浏览网页的形式已经成为人们获取信息的重要方式。在开发浏览器中的网页时，经常会出现需要用弹框提示用户或用弹框让用户做选择交互的场景。

目前，相关网页弹框生成方案中，要么重新从头编写一个网页弹框的完整代码，要么从之前类似的项目中将相关代码复制过来进行使用。但是这两种方案中，从头编写网页弹框的完整代码会浪费大量的人力物力，且开发效率较低；从之前类似的项目中将相关代码复制过来进行使用，需要重新修改代码以适应新的项目，而且在维护时需要对网页弹框的样式、显示隐藏动画、生成逻辑、点击事件等地方进行修改、测试或者维护，工作量较大，维护较为困难。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本发明实施例的目的在于提供一种网页弹框生成方法、网页弹框生成装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服相关生成网页弹框的方案中网页弹框开发成本较高、弹框加载效率较低的问题。

本发明的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本发明的实践而习得。

根据本发明实施例的第一方面，提供了一种网页弹框生成方法，包括：在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

在本发明的一些示例实施例中，基于前述方案，所述方法还包括：若确定所述目标网页弹框对应的所述层叠样式表未加载完成，则通过所述弹框组件在所述目标网页弹框配置显示加载动画任务；将所述显示加载动画任务添加到执行队列中并在所述层叠样式表加载完成时执行。

在本发明的一些示例实施例中，基于前述方案，所述界面参数包括尺寸数据；所述加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预定义目标网页弹框包括：加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的尺寸数据预配置所述目标网页弹框对应的弹框尺寸数据以及字号数据。

在本发明的一些示例实施例中，基于前述方案，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预定义目标网页弹框，还包括：根据所述弹框组件预定义所述目标网页弹框对应的弹框类；其中所述弹框类包括网页弹框参数以及所述目标网页弹框对外提供的方法。

在本发明的一些示例实施例中，基于前述方案，在通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成之前，所述方法还包括：基于所述弹框组件，通过动态创建链接标签的方式动态加载所述目标网页弹框对应的层叠样式表以实现对所述层叠样式表的异步加载。

在本发明的一些示例实施例中，基于前述方案，在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框之后，所述方法还包括：响应触发所述目标网页弹框上提供的触发按钮，通过所述弹框组件执行所述触发按钮对应的逻辑事件并关闭所述目标网页弹框；以及调用所述触发按钮对应的回调函数通知调用者以结束所述弹框组件的生命周期。

在本发明的一些示例实施例中，基于前述方案，在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框，包括：基于所述弹框组件判断所述浏览器页面是否支持目标加载框架；若所述浏览器页面支持所述目标加载框架，则通过目标加载框架在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框；若所述浏览器页面不支持所述目标加载框架，则通过全局对象方式在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

根据本发明实施例的第二方面，提供了一种网页弹框生成装置，包括：目标网页弹框配置模块，用于在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；样式表加载判断模块，用于响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；目标网页弹框显示模块，用于若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框显示模块还包括显示加载动画任务配置单元，所述显示加载动画任务配置单元还被配置为：若确定所述目标网页弹框对应的所述层叠样式表未加载完成，则通过所述弹框组件在所述目标网页弹框配置显示加载动画任务；将所述显示加载动画任务添加到执行队列中并在所述层叠样式表加载完成时执行。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框配置模块还包括弹框尺寸配置单元，所述弹框尺寸配置单元被配置为：加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的尺寸数据预配置所述目标网页弹框对应的弹框尺寸数据以及字号数据。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框配置模块还包括弹框类定义单元，所述弹框类定义单元被配置为：根据所述弹框组件预定义所述目标网页弹框对应的弹框类；其中所述弹框类包括网页弹框参数以及所述目标网页弹框对外提供的方法。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框配置模块还包括层叠样式表加载单元，所述层叠样式表加载单元被配置为：基于所述弹框组件，通过动态创建链接标签的方式动态加载所述目标网页弹框对应的层叠样式表以实现对所述层叠样式表的异步加载。

在本发明的一种示例性实施例中，基于前述方案，所述网页弹框生成装置还包括弹框组件结束单元，所述弹框组件结束单元被配置为：响应触发所述目标网页弹框上提供的触发按钮，通过所述弹框组件执行所述触发按钮对应的逻辑事件并关闭所述目标网页弹框；以及调用所述触发按钮对应的回调函数通知调用者以结束所述弹框组件的生命周期。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框显示模块还被配置为：基于所述弹框组件判断所述浏览器页面是否支持目标加载框架；若所述浏览器页面支持所述目标加载框架，则通过目标加载框架在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框；若所述浏览器页面不支持所述目标加载框架，则通过全局对象方式在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

根据本发明实施例的第三方面，提供了一种电子设备，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现上述任意一项所述的网页弹框生成方法。

根据本发明实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据上述任意一项所述的网页弹框生成方法。

本发明实施例提供的技术方案可以包括以下有益效果：

本发明的示例实施例中的网页弹框生成方法，在进入浏览器页面时，加载预构建的弹框组件以使弹框组件根据图形用户界面的界面参数预配置目标网页弹框；响应显示所述目标网页弹框的指令，在确定目标网页弹框对应的层叠样式表加载完成，则在图形用户界面显示与界面参数适配的目标网页弹框。一方面，通过预构建的弹框组件根据图形用户界面的界面参数预配置目标网页弹框，能够根据图形用户界面的不同自动配置适配图形用户界面的目标网页弹框，在需要生成不同的目标网页弹框时仅需要加载弹框组件即可，降低目标网页弹框的开发成本；另一方面，通过预构建的弹框组件根据图形用户界面的界面参数预配置目标网页弹框，并在层叠样式表加载完成时将目标网页弹框显示在图形用户界面，能够有效提升目标网页弹框的加载效率，降低用户等待的时间，提升用户的使用体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示意性示出了根据本发明的一些实施例的网页弹框生成方法的流程示意图；

图2示意性示出了根据本发明的一些实施例的显示目标网页弹框的流程示意图；

图3示意性示出了根据本发明的一些实施例的生成的目标网页弹框的结构示意图；

图4示意性示出了根据本发明的一些实施例的通过弹框组件生成目标网页弹框的流程示意图；

图5示意性示出了根据本发明的一些实施例的网页弹框生成装置的示意图；

图6示意性示出了根据本发明的一些实施例的电子设备的计算机系统的结构示意图；

图7示意性示出了根据本发明的一些实施例的计算机可读存储介质的示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本发明将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本发明的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。

此外，附图仅为示意性图解，并非一定是按比例绘制。附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在本示例实施例中，首先提供了一种网页弹框生成方法，该网页弹框生成方法可以应用于终端设备。图1示意性示出了根据本发明的一些实施例的网页弹框生成方法流程的示意图。参考图1所示，该网页弹框生成方法可以包括以下步骤：

步骤S110，在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；

步骤S120，响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；

步骤S130，若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

根据本示例实施例中的网页弹框生成方法，一方面，通过预构建的弹框组件根据图形用户界面的界面参数预配置目标网页弹框，能够根据图形用户界面的不同自动配置适配图形用户界面的目标网页弹框，在需要生成不同的目标网页弹框时仅需要加载弹框组件即可，降低目标网页弹框的开发成本；另一方面，通过预构建的弹框组件根据图形用户界面的界面参数预配置目标网页弹框，并在层叠样式表加载完成时将目标网页弹框显示在图形用户界面，能够有效提升目标网页弹框的加载效率，降低用户等待的时间，提升用户的使用体验。

下面，将对本示例实施例中的网页弹框生成方法进行进一步的说明。

在步骤S110中，在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框。

在本发明的一个示例实施例中，浏览器页面可以是指用户通过终端设备访问的HTML(HyperText Markup Language，超级文本标记语言)页面，例如，浏览器页面可以是用户通过终端设备中的浏览器应用程序(Web APP，如Google Chrome等)，也可以是应用程序中的网页视图Webview打开的网络页面，终端设备可以是电脑，也可以是移动终端(如智能手机等)，本示例实施例对此不做特殊限定。

另外，弹框组件可以是指预先构建的、由生成网页弹框所需要的参数或者逻辑封装成的JavaScript(JS，一种脚本编程语言)文件。

另外，界面参数可以是指用以显示浏览器页面的图形用户界面对应的参数，例如界面参数可以包括图形用户界面对应的长度数据、宽度数据，也可以是图形用户界面中显示像素对应的数据，当然，还可以是其他用于生成与图形用户界面适配的网页弹框的数据，本示例实施例对此不做特殊限定。

具体的，可以通过以下步骤对目标网页弹框进行预配置：

加载预构建的弹框组件以使弹框组件根据图形用户界面的尺寸数据预配置目标网页弹框对应的弹框尺寸数据以及字号数据。通过图形用户界面的尺寸数据预配置目标网页弹框对应的弹框尺寸数据以及字号数据，使生成的目标网页弹框

其中，尺寸数据可以是指能够计算不同形状的图形用户界面对应的尺寸的数据，例如，若图形用户界面的形状为圆形，则该图形用户界面对应的尺寸数据可以是图形用户界面的半径或者周长；若图形用户界面的形状为矩形，则该图形用户界面对应的尺寸数据可以是图形用户界面的长度和宽度；若图形用户界面的形状为三角形，则该图形用户界面对应的尺寸数据可以是图形用户界面的底长和高；当然，此处仅是示意性举例说明，本示例实施例对此不做特殊限定。

另外，目标网页弹框可以是指通过弹框组件配置并生成的与图形用户界面适配的网页弹框。

弹框尺寸数据可以是指根据图形用户界面的尺寸数据适配的目标网页弹框对应的尺寸数据，例如，若图形用户界面为矩形，对应的尺寸数据为长30cm，宽20cm，则目标网页弹框对应的弹框尺寸数据为长9cm，宽6cm；若图形用户界面对应的尺寸数据为长100cm，宽50cm，则目标网页弹框对应的弹框尺寸数据为长20cm，宽10cm，当然，此处仅是示意性举例说明，并不应对本示例实施例造成任何特殊限定。

字号数据可以是指根据图形用户界面的尺寸数据适配的目标网页弹框中显示字体对应的尺寸数据，具体的，可以选择相对长度单位em确定目标网页弹框的字号数据，相对于当前对象(浏览器页面)内文本的字体尺寸。

进一步的，还可以通过以下步骤对目标网页弹框进行进一步的预配置：

根据弹框组件预定义目标网页弹框对应的弹框类。

其中，弹框类可以是指用于定义目标网页弹框具体显示内容的数据，弹框类可以包括网页弹框参数以及目标网页弹框对外提供的方法，例如，弹框类中网页弹框参数可以包括：

title：目标网页弹框的标题，例如目标网页弹框的标题可以是“警告信息”；

content：目标网页弹框中弹框内容，例如“警告信息”弹框中的具体警告信息(如服务器无响应，错误类型为404)；

showClose：是否显示目标网页弹框右上角的关闭按钮；

btnType：目标网页弹框的按钮类型，默认“normal”，为普通的按钮；“line”是吸底(吸附到底部)的按钮；

btnText：目标网页弹框中的按钮文案，可以配置为一个、两个或三个字符串，用来控制按钮的个数，btnType为“normal”时，最多配置两个值；

btnClass：目标网页弹框中的按钮样式，可以给按钮配置不同的自定义或内置CSS类，来控制按钮背景色、文字颜色、文字大小等样式；

btnFn：按钮点击的回调函数，不配置默认动作为关闭弹框；

例如，弹框类中对外提供的方法可以包括：

show：显示目标网页弹框；

close：关闭目标网页弹框；

当然，以上仅是示意性举例说明，目标网页弹框对应的弹框类还可以是其他配置数据，本示例实施例对此不作不作特殊限定。

在步骤S120中，响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成。

在本发明的一个示例实施例中，响应显示目标网页弹框的指令可以是指在符合某条件时需要弹出提示网页弹框或者引导网页弹框的指令，例如该指令可以是指在用户请求显示浏览器页面时，服务器没有获取到该浏览器页面对应的数据时发出的指令，此时在图形用户界面弹出“警告信息”的提示网页弹框，网页弹框中的内容可以是“服务器无响应，错误类型为404”，当然，响应显示目标网页弹框的指令还可以是在让用户进行选择或者其他需要进行交互的场景下发出的指令，本示例实施例对此不做特殊限定。

另外，层叠样式表(Cascading Style Sheets，CSS)可以是指用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言，层叠样式表不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，能够对网页中元素位置的排版进行像素级精确控制，支持大多数的字体字号样式，拥有对网页对象和模型样式编辑的能力。

具体的，在通过弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成之前，通过以下步骤实现层叠样式表的异步加载：

基于弹框组件通过动态创建链接标签的方式动态加载目标网页弹框对应的层叠样式表以实现对层叠样式表的异步加载。

其中，本示例实施例中的链接标签可以是link标签，link标签可以是指支持浏览器与外部资源的文件，通过动态创建link标签的方式动态加载目标网页弹框对应的层叠样式表。

通过动态创建link标签的方式动态加载目标网页弹框对应的层叠样式表是为了引用方便，传统引用方式是在页面中引用CSS和JavaScript两个文件，引用过程较为繁杂且不易维护；采用动态加载CSS的方式，就不需要使用者在HTML中显式引用CSS，浏览器页面只需维护一个JavaScript的引用地址，减少了引用、维护的成本。

另一方面，动态创建link标签引入CSS文件，这种方式在浏览器或Webview中是异步加载的，因为异步加载不会阻塞浏览器页面的渲染和其他JavaScript代码的执行，CSS加载过程中，浏览器页面有可能调用了弹框组件中网页弹框的显示方法，但是这时候网页弹框没有CSS样式，不能展示给用户，需要把显示方法放到弹框组件的任务队列中等待执行，当CSS加载完成时，检查任务队列，如果任务队列中有任务，则执行该任务，否则等待使用者调用。

在步骤S130中，若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

在本发明的一个示例实施例中，若确定目标网页弹框对应的层叠样式表CSS加载完成，则认为此时符合在图像用户界面显示目标网页弹框的条件，因此在图形用户界面显示与界面参数适配的目标网页弹框。

可选的，在判定目标网页弹框对应的层叠样式表未加载完成，可以继续执行以下步骤：

若确定目标网页弹框对应的层叠样式表未加载完成，则通过弹框组件在目标网页弹框配置显示加载动画任务；将显示加载动画任务添加到执行队列中并在层叠样式表加载完成时执行。

其中，加载动画任务可以是指目标网页弹框在显示或者隐藏时，搭配CSS添加的、呈现给用户的loading效果。具体的，通过CSS中的transition监听需要做的加载动画的属性，然后通过修改弹框容器CSS样式中的transform属性来实现加载动画效果，例如动画效果可以是从浏览器页面的中间的位置、最小化、透明度为0(完全透明)的状态，放大显示到浏览器页面中间的位置，放大过程中，透明度也逐渐变大，最终变为1(完全不透明)的状态，当然，此处仅是示意性举例说明，并不应对本示例实施例造成任何特殊限定。

进一步的，可以通过图2中的步骤将目标网页弹框显示到图形用户界面上以呈现给用户：

图2示意性示出了根据本发明的一些实施例的显示目标网页弹框的流程示意图。

参考图2所示，步骤S210，基于弹框组件判断浏览器页面是否支持目标加载框架；

步骤S220，若浏览器页面支持目标加载框架，则通过目标加载框架在图形用户界面显示与界面参数适配的目标网页弹框；

步骤S230，若浏览器页面不支持目标加载框架，则通过全局对象方式在图形用户界面显示与界面参数适配的目标网页弹框。

其中，目标加载框架可以是指用于实现JavaScript的模块化开发以及加载机制的框架，例如目标加载框架可以包括但不限于SeaJS。将目标网页弹框引入浏览器页面时，先判断浏览器页面是否支持SeaJS，如果支持，就以SeaJS方式对外提供弹框类，SeaJS方式是将弹框组件内部代码当做一个模块，只返回弹框类，不会污染全局变量，减少使用者的维护成本；如果不支持SeaJS，就以全局对象的方式对外提供弹框类。

在本发明的一个示例实施例中，浏览器页面的功能代码中，根据弹框组件预设的参数，通过弹框类来创建弹框对象；可直接通过“new对象”的方式创建，此时，开始执行弹框组件的内部代码；弹框组件内部将使用者传过来的参数存起来，以供后面使用。

具体的，可以通过以下步骤结束弹框组件的生命周期，完成一次目标网页弹框的显示与结束的过程：

响应触发目标网页弹框上提供的触发按钮，通过弹框组件执行触发按钮对应的逻辑事件并关闭目标网页弹框；以及

调用触发按钮对应的回调函数通知调用者以结束弹框组件的生命周期。

其中，触发按钮可以是指用户在目标网页弹框上提供的多个按钮控件中选择并触发的按钮，例如，在“警告信息”的网页弹框中，可以提供“查看”以及“退出”的按钮，用户选择触发的“查看”按钮则为触发按钮。触发按钮对应的逻辑事件可以是指触发按钮对应的接口或者链接地址，例如在“警告信息”的网页弹框中，触发按钮是“查看”按钮时，逻辑事件可以是调取与“查看”按钮关联的链接地址以打开详细的错误报告并呈现给用户的事件，当然，此处仅是示意性举例说明，本示例实施例对此不做特殊限定。

在执行完触发按钮对应的逻辑事件，则认为目标网页弹框的任务已经完成，此时关闭目标网页弹框，调用触发按钮对应的回调函数通知调用者，然后在用户离开浏览器页面时，结束弹框组件的生命周期。

图3示意性示出了根据本发明的一些实施例的生成的目标网页弹框的结构示意图。

参考图3所示，用户通过图形用户界面301进入浏览器界面302时，弹框组件根据图形用户界面301的界面参数生成适配图形用户界面301的目标网页弹框303，其中，目标网页弹框303可以包括弹框标题304、弹框内容305以及触发按钮306。

图4示意性示出了根据本发明的一些实施例的通过弹框组件生成目标网页弹框的流程示意图。

参考图4所示，步骤401，用户通过浏览器或者应用程序中的WebView进行浏览器页面；

步骤402，加载弹框组件401(对应的JS文件)；

步骤403，弹框组件401根据图形用户界面的尺寸数据做适配，初始化网页弹框的尺寸、字号；

步骤404，通过动态创建link标签的方式动态加载网页弹框对应的层叠样式表CSS；

步骤405，在CSS加载完成时，判断任务队列中是否有任务需要执行，若判定任务队列中有任务需要执行，则执行步骤S406，否则执行步骤S407；

步骤406，执行任务队列中的任务；

步骤407，等待用户的调用；

步骤408，弹框组件401根据预设数据定义网页弹框的弹框类(包括参数配置和对外提供的方法)；

步骤409，终端设备继续加载浏览器页面对应的其他功能(功能对应的JS代码)；

步骤410，其他功能加载完成，开始初始化网页弹框，并将回调等参数发送给弹框组件401；

步骤411，弹框组件401将调用者传过来的参数进行存储；

步骤412，用户在浏览器页面上进行操作，使浏览器页面显示网页弹框；

步骤413，弹框组件401判断网页弹框对应的CSS是否加载完成，若判定网页弹框对应的CSS已加载完成，则执行步骤S414，否则执行步骤S415；

步骤414，弹框组件401对外显示网页弹框；

步骤415，弹框组件401搭配CSS生成显示加载效果，并将显示加载效果加入任务队列，返回继续执行步骤S405；

步骤416，用户的操作点击网页弹框中的触发按钮；

步骤417，弹框组件401关闭弹框组件，并调用触发按钮的回调函数以通知调用者；

步骤418，用户继续其他操作；

步骤419，在用户离开浏览器页面时，结束弹框组件401的生命周期，完成本次网页弹框的生成的任务。

需要说明的是，尽管在附图中以特定顺序描述了本发明中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种网页弹框生成装置。参照图5所示，该网页弹框生成装置500包括：目标网页弹框配置模块510、样式表加载判断模块520以及目标网页弹框显示模块530。其中，目标网页弹框配置模块510用于在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；样式表加载判断模块520用于响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；目标网页弹框显示模块530用于若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框显示模块530还被配置为：

若确定所述目标网页弹框对应的所述层叠样式表未加载完成，则通过所述弹框组件在所述目标网页弹框配置显示加载动画任务；

将所述显示加载动画任务添加到执行队列中并在所述层叠样式表加载完成时执行。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框配置模块510还包括弹框尺寸配置单元，所述弹框尺寸配置单元被配置为：

加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的尺寸数据预配置所述目标网页弹框对应的弹框尺寸数据以及字号数据。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框配置模块510还包括弹框类定义单元，所述弹框类定义单元被配置为：

根据所述弹框组件预定义所述目标网页弹框对应的弹框类；其中所述弹框类包括网页弹框参数以及所述目标网页弹框对外提供的方法。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框配置模块510还包括层叠样式表加载单元，所述层叠样式表加载单元被配置为：

基于所述弹框组件，通过动态创建链接标签的方式动态加载所述目标网页弹框对应的层叠样式表以实现对所述层叠样式表的异步加载。

在本发明的一种示例性实施例中，基于前述方案，所述网页弹框生成装置500还包括弹框组件结束单元，所述弹框组件结束单元被配置为：

响应触发所述目标网页弹框上提供的触发按钮，通过所述弹框组件执行所述触发按钮对应的逻辑事件并关闭所述目标网页弹框；以及

调用所述触发按钮对应的回调函数通知调用者以结束所述弹框组件的生命周期。

在本发明的一种示例性实施例中，基于前述方案，所述目标网页弹框显示模块530还被配置为：

基于所述弹框组件判断所述浏览器页面是否支持目标加载框架；

若所述浏览器页面支持所述目标加载框架，则通过目标加载框架在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框；

若所述浏览器页面不支持所述目标加载框架，则通过全局对象方式在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

上述中网页弹框生成装置各模块的具体细节已经在对应的网页弹框生成方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了网页弹框生成装置的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述网页弹框生成方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例(包括固件、微代码等)，或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“系统”。

下面参照图6来描述根据本发明的这种实施例的电子设备600。图6所示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：上述至少一个处理单元610、上述至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。例如，所述处理单元610可以执行如图1中所示的步骤S110，在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；步骤S120，响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；步骤S130，若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)621和/或高速缓存存储单元622，还可以进一步包括只读存储单元(ROM)623。

存储单元620还可以包括具有一组(至少一个)程序模块625的程序/实用工具624，这样的程序模块625包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备670(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器660通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。

参考图7所示，描述了根据本发明的实施例的用于实现上述网页弹框生成方法的程序产品700，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施例的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种网页弹框生成方法，其特征在于，应用于带有图形用户界面的移动终端，所述方法包括：

在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；

响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；

若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

2.根据权利要求1所述的网页弹框生成方法，其特征在于，所述方法还包括：

若确定所述目标网页弹框对应的所述层叠样式表未加载完成，则通过所述弹框组件在所述目标网页弹框配置显示加载动画任务；

将所述显示加载动画任务添加到执行队列中并在所述层叠样式表加载完成时执行。

3.根据权利要求1所述的网页弹框生成方法，其特征在于，所述界面参数包括尺寸数据；

所述加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预定义目标网页弹框包括：

加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的尺寸数据预配置所述目标网页弹框对应的弹框尺寸数据以及字号数据。

4.根据权利要求3所述的网页弹框生成方法，其特征在于，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框，还包括：

根据所述弹框组件预定义所述目标网页弹框对应的弹框类；其中所述弹框类包括网页弹框参数以及所述目标网页弹框对外提供的方法。

5.根据权利要求3所述的网页弹框生成方法，其特征在于，在通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成之前，所述方法还包括：

基于所述弹框组件，通过动态创建链接标签的方式动态加载所述目标网页弹框对应的层叠样式表以实现对所述层叠样式表的异步加载。

6.根据权利要求1所述的网页弹框生成方法，其特征在于，在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框之后，所述方法还包括：

响应触发所述目标网页弹框上提供的触发按钮，通过所述弹框组件执行所述触发按钮对应的逻辑事件并关闭所述目标网页弹框；以及

调用所述触发按钮对应的回调函数通知调用者以结束所述弹框组件的生命周期。

7.根据权利要求1所述的网页弹框生成方法，其特征在于，在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框，包括：

基于所述弹框组件判断所述浏览器页面是否支持目标加载框架；

若所述浏览器页面支持所述目标加载框架，则通过目标加载框架在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框；

若所述浏览器页面不支持所述目标加载框架，则通过全局对象方式在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

8.一种网页弹框生成装置，其特征在于，包括：

目标网页弹框配置模块，用于在进入浏览器页面时，加载预构建的弹框组件以使所述弹框组件根据所述图形用户界面的界面参数预配置目标网页弹框；

样式表加载判断模块，用于响应显示所述目标网页弹框的指令，通过所述弹框组件判断所述目标网页弹框对应的层叠样式表是否加载完成；

目标网页弹框显示模块，用于若确定所述目标网页弹框对应的所述层叠样式表加载完成，则在所述图形用户界面显示与所述界面参数适配的所述目标网页弹框。

9.一种电子设备，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如权利要求1至7中任一项所述的网页弹框生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的网页弹框生成方法。

Images