一种弹窗页面生成方法、装置、浏览器及存储介质与流程

文档序号:13943256阅读:129来源:国知局

本发明涉及web前端页面加载技术领域,尤其涉及一种弹窗页面生成方法、装置、浏览器及存储介质。



背景技术:

对于web前端开发弹窗功能,一般采用的方法有:

1、弹出提示框方法。此方法介于不同浏览器大致可以分为三种方式:

(a)使用浏览器自带的window.alert()功能,该方法可用于大多数浏览器,可以写在javascript代码中,其样式在不同的浏览器下会有一些差别,功能性也有一些小的区别。比如在火狐浏览器中只有一个确定按钮,在谷歌、ie、360等浏览器会有一个关闭按钮和确定按钮。但是其用法大多一致,即在弹窗中弹出所需要的一些数据参数信息,点击确认后,弹窗会消失。该方法是浏览器内置对象的方法,具有阻断程序执行的功能,大多用于测试以及提示信息等功能。

(b)使用浏览器的window.confirm()功能,该方法也是可以在网页中弹出一段提示,该提示的样式、内容和性质等与(a)window.alert()方法类似,但是,在功能上赋予了新的意义,除了在弹窗中有确定和取消按钮,在语义和逻辑上,window.confirm()更加丰富,在点击了确认按钮后,程序和逻辑进入到confirm返回值为true的序列,在点击了取消后,程序和逻辑进入confirm返回值为false的序列。

(c)使用浏览器的window.prompt()功能,该方法也可以弹出提示信息,与前述两种方法不同之处在于:弹出的窗口需要用户输入验证信息,如果输入的验证信息与设置的逻辑相同,则程序向window.prompt()返回值为true的方向走,如果输入的验证信息与设置的逻辑不同,则向window.prompt()返回值为false的方向走,该方法也是浏览器自带的方法,在各个浏览器上显示的样式会有差别。

2、浏览器打开新窗口的方法。url(uniformresourcelocator,统一资源定位符)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的url,它包含的信息指出文件的位置以及浏览器应该怎么处理它。传统的打开新窗口的方法有location.reload(new_url),以及其内置对象的locarion.replace(new_url)方法和window.location.href="new_url";此三种方法也是浏览器的window对象内置方法。其效果是在原有页面的基础上打开一个新的页面,该页面需要请求url信息,然后调配资源并加载在页面中。图1是现有技术中传统打开新窗口的方法的流程图,参见图1,在主页面1下,若要打开页面21,需要先向服务器2发送页面21的url请求信息,服务器2将对应页面的url信息返回到客户端的主页面1下,进行渲染显示相应的页面。各个页面(如页面21、22以及其他页面)之间的跳转以及信息传输需要服务器的资源分配,代用url达到效果。这样的打开新窗口的方法中的请求页面及加载页面方式耗时、耗力。

3、浏览器打开新的网页资源window.open()方法,该方法也是浏览器window对象内置方法。其效果与以上window对象方法类似,即请求url,浏览器解析地址进行页面渲染。

以上所述的弹窗页面的生成方法在实际开发生产中大多用于测试和研发,在实际的运营中,不同的浏览器在功能和样式上会有很大的差异,且样式单一固定,往往达不到设计师的需求。而如果直接利用浏览器的内置对象location.reload(new_url)、locarion.replace(new_url)和window.location.href="new_url"进行弹窗页面显示,需要频繁地发生资源请求与分配,对服务器性能有很高的要求,同时会对网页的加载速度产生很大的消耗。



技术实现要素:

本发明提供一种弹窗页面生成方法、装置、浏览器及存储介质,解决了弹窗页面显示过程中需要频繁地发生资源请求与分配,导致对服务器性能要求较高且网页的加载速度慢的问题。

第一方面,本发明实施例提供了一种弹窗页面生成方法,包括:

在主页面下接收触发弹窗页面的输入指令;

根据所述输入指令利用ajax(asynchronousjavascriptandxml,异步javascript和xml(extensiblemarkuplanguage,可扩展标记语言))异步请求页面信息;

接收服务器返回的页面信息;

根据所述页面信息及预设的弹窗配置信息加载弹窗页面。

进一步的,所述弹窗配置信息包括所述服务器对应的各弹窗页面的主体标签;

根据所述页面信息及预设的弹窗配置信息加载弹窗页面,包括:

从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签;

根据所述主体标签对所述页面信息进行渲染处理,加载得到所述弹窗页面。

进一步的,所述弹窗配置信息还包括弹窗页面的样式信息;

根据所述页面信息及预设的弹窗配置信息加载弹窗页面,包括:

从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签和样式信息;

根据所述主体标签和所述样式信息对所述页面信息进行渲染处理,加载得到所述弹窗页面。

进一步的,在根据所述页面信息及预设的弹窗配置信息加载弹窗页面之前,所述方法还包括:

从所述服务器预先存储的配置文件中获取所述弹窗配置信息;或者,从本地缓存中获取所述弹窗配置信息。

进一步的,所述页面信息是text或者html(hypertextmarkuplanguage,超文本标记语言)类型的数据。

第二方面,本发明实施例还提供了一种弹窗页面生成装置,该装置包括:

指令接收模块,用于在主页面下接收触发弹窗页面的输入指令;

信息请求模块,用于根据所述输入指令利用ajax异步请求页面信息;

信息接收模块,用于接收服务器返回的页面信息;

页面加载模块,用于根据所述页面信息及预设的弹窗配置信息加载弹窗页面。

进一步的,所述弹窗配置信息包括所述服务器对应的各弹窗页面的主体标签;

所述页面加载模块,包括:

主体标签获取单元,用于从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签;

第一页面渲染单元,用于根据所述主体标签对所述页面信息进行渲染处理,加载得到所述弹窗页面。

进一步的,所述弹窗配置信息还包括弹窗页面的样式信息;

所述页面加载模块,还包括:

样式获取单元,用于从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签和样式信息;

第二页面渲染单元,用于根据所述主体标签和所述样式信息对所述页面信息进行渲染处理,加载得到所述弹窗页面。

第三方面,本发明实施例还提供了一种浏览器,该浏览器包括:

一个或多个处理器;

存储装置,用于存储一个或多个程序;

当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明任意实施例所述的弹窗页面生成方法。

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

本发明通过ajax异步请求页面信息,根据获取的页面信息及预设的弹窗配置信息加载弹窗页面,解决了弹窗页面显示过程中需要频繁地发生资源请求与分配,导致对服务器性能要求较高且网页的加载速度慢的问题,利用ajax异步加载技术传递页面信息而不加载页面实体,无需频繁进行服务器的url资源调配,即可实现网页制作过程中的弹窗功能,降低加载页面请求负荷,对服务器性能要求低,提高页面加载速度,支持多浏览器兼容性,并且能够极大的提高性能,减少浏览器压力,降低能耗,使用过程便捷、轻松。

附图说明

图1是现有技术中传统打开新窗口的方法的流程图;

图2是本发明实施例一中的弹窗页面生成方法的流程图;

图3是本发明实施例二中的弹窗页面生成方法的流程图;

图4是本发明实施例三中的弹窗页面生成装置的结构示意图;

图5是本发明实施例四中的浏览器的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图2是本发明实施例一中的弹窗页面生成方法的流程图,本实施例可适用于弹窗页面生成的情况,该弹窗页面包括:弹出提示框、浏览器打开的新窗口以及浏览器打开的新网页资源等,该弹窗页面生成方法可以由弹窗页面生成装置来执行,该装置可以通过硬件和/或软件实现,该装置可集成在浏览器中。如图2所示,该方法具体包括如下步骤:

步骤210、在主页面下接收触发弹窗页面的输入指令。

其中,输入指令是指用户在当前主页面下进行操作(如点击或触摸等)而产生的用于触发弹窗页面的指令。在当前的主页面下,接收到输入指令,使得所请求的弹窗页面对应的触发函数运行,产生触发弹窗页面出现的效果。该输入指令可以根据不同的浏览器或者不同的弹窗页面有所不同。

步骤220、根据所述输入指令利用ajax异步请求页面信息。

其中,在接收触发相应弹窗页面的输入指令后,客户端会向服务器发送当前所要请求的弹窗页面请求信息。ajax是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页。通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页页面。此过程采用ajax异步加载方式,浏览器在下载执行当前代码的同时,还会继续进行后续页面的处理。本发明实施例中可以利用jquery.ajax()技术将请求页面的url参数设置为所请求的弹窗页面地址,将此url请求信息发送至服务器。

步骤230、接收服务器返回的页面信息。

其中,服务器接收到页面请求信息后,经过jquery.ajax()技术处理将页面信息返回,浏览器接收返回的页面信息。该页面信息包括text或html类型的源数据,并非文件对象实体,其数据源所占系统内存远远小于物理内存,并且此时的信息尚未被渲染。

步骤240、根据所述页面信息及预设的弹窗配置信息加载弹窗页面。

其中,弹窗配置信息是生成弹窗页面所需的相关配置信息,例如,固有配置以及自定义的特殊需求等。在接收到页面信息后,对信息数据进行编辑,即对页面信息进行修改,具体是根据弹窗配置信息中设置的处理方式进行数据处理。对页面信息进行处理后,加载得到对应的弹窗页面,进一步可以在显示屏上显示弹窗页面。

在步骤240之前,可以通过以下方式获取弹窗配置信息:从所述服务器预先存储的配置文件中获取所述弹窗配置信息;或者,从本地缓存中获取所述弹窗配置信息。

浏览器第一次请求服务器的弹窗页面时,从该服务器预先存储的配置文件中获取弹窗配置信息,以进行弹窗页面的加载,并将获取的弹窗配置信息缓存在浏览器本地。当后续请求弹窗页面时,直接从本地缓存获取弹窗配置信息,以进行弹窗页面的加载。此外,可以定时对浏览器本地缓存的弹窗配置信息进行更新。

每个网站服务器均可以设置并存储对应的配置文件,配置文件可以存放在工程项目的web项目目录下,配置文件中存储有预设的弹窗配置信息。弹窗配置信息可以包括服务器对应的各弹窗页面的主体标签。

可选的,在上述实施例的基础上,在步骤210之前,所述方法还包括:服务器分别提取服务器网站对应的各弹窗页面的主体标签,作为弹窗配置信息,存储到所述配置文件中。各个弹窗页面的html信息包括主体标签(以<body>开始,以</body>结束的html标签)的内容和头标签(以<head>开始以</head>结束的html标签)的内容等。在本发明实施例中提取的是各个弹窗页面的主体标签,并将主体标签存储到配置文件中,也就是说配置文件中不包括头标签等一些冗杂的基础标签,大大的节约了资源。主体标签,即dom(documentobjectmodel,文档对象模型)树节点。另外,在弹窗页面的加载过程中,使用物理html配置文件作为编辑dom载体,单独存放,这样模块化操作避免主页面的代码混乱,减轻代码负荷,避免了页面代码的冗杂以及调试的无序,进而后期代码优化及维护时将会轻松便捷。

可选的,步骤240包括:从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签;根据所述主体标签对所述页面信息进行渲染处理,加载得到所述弹窗页面。

其中,从弹窗配置信息中获取所请求的弹窗页面对应的主体标签,即获取弹窗页面的<body></body>标签,在加载弹窗页面时,各个弹窗页面和主页面可以共用一套基础根节点,结合获取的主体标签节点,从而大大的减少了代码量,减少了页面信息请求能耗,减少了页面加载的能耗,缩短了页面加载时间,在一些需要频繁页面信息请求和弹窗的功能性页面中起到了优化性能的作用。

渲染处理是指根据封装渲染函数进行页面渲染,包括:样式的定义与修改、数据的嵌套等。

利用ajax异步加载技术传递页面信息而不加载页面实体,不发生服务器的url资源调配,只在ajax中调取页面信息进行页面信息的提取和渲染,进一步在当前页面中使用dom节点挂载页面信息,从而实现弹窗功能。此种加载方式解决了现如今流行的b/s架构中加载页面的请求负荷大,页面加载缓慢,页面信息无法及时渲染等状况及问题。

在现有技术的弹窗页面信息请求过程中,物理传递的页面可能会存在跨域请求,为了规避这一难题,本发明实施例中采用向主页面推送dom主体标签的方法,使用dom节点挂载页面信息,也就是说,整个弹窗的内容其实是经过ajax页面信息请求后,加载在当前页面,进一步通过自定义的样式定位,达到需求的弹窗效果。在此过程中不存在跨域行为,解决实际生产中网页制作的很多问题,用户将会更加轻松地进行数据传输与使用,避免了不必要的技术难题,实现数据的价值体验。

本发明实施例通过ajax异步请求页面信息,根据获取的页面信息及预设的弹窗配置信息加载弹窗页面,解决了弹窗页面显示过程中需要频繁地发生资源请求与分配,导致对服务器性能要求较高且网页的加载速度慢的问题,利用ajax异步加载技术传递页面信息而不加载页面实体,无需频繁进行服务器的url资源调配,降低加载页面请求负荷,对服务器性能要求低,提高页面加载速度,在满足弹窗需求的同时提高性能和效率,减轻对浏览器以及服务器的性能损耗,提高了用户体验。在网页开发过程中起到了良好的促进作用,方法本身代码量较少,可支持大型及小型的页面弹窗功能,同时模块化代码便于后期管理。

实施例二

本实施例对上述实施例一的弹窗页面生成方法进行了优化,弹窗配置信息中还包括弹窗页面的样式信息,该样式信息在不同的浏览器下产生的渲染效果是一致的,通过调用预设的弹窗配置信息可以对弹窗的功能和样式进行统一,使得不同浏览器的弹窗样式统一,满足各个浏览器的兼容性需求。

图3是本发明实施例二中的弹窗页面生成方法的流程图,如图3所示,该方法包括:

步骤310、在主页面下接收触发弹窗页面的输入指令。

步骤320、根据所述输入指令利用ajax异步请求页面信息。

步骤330、接收服务器返回的页面信息。

步骤340、从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签和样式信息。

其中,弹窗页面的样式信息包括:弹窗页面的功能、大小、布局、颜色、显示位置等,该样式信息可以由网站工作人员进行自定义设置并存储到配置文件中。当浏览器加载弹窗页面时,从弹窗配置信息中读取样式信息,并按照该样式信息配置弹窗页面,使得不同浏览器得到的弹窗页面可以在功能和样式上进行统一。

网站工作人员完全可以自定义属于自己网站的独有弹窗样式,使得网站内容更加独特充实。自定义的弹窗样式在不同的浏览器下产生的渲染效果是一致的,通过调用预设的弹窗配置信息就可以对弹窗的功能和样式进行统一,此功能解决了不同浏览器的样式统一性问题。同时,使用自定义样式可以满足各个浏览器的兼容性需求,解决兼容性带来的问题。

步骤350、根据所述主体标签和所述样式信息对所述页面信息进行渲染处理,加载得到所述弹窗页面。

其中,利用获取到的所请求的弹窗页面对应的主体标签和样式信息,以及方法和函数等对页面信息进行渲染处理,最终加载得到与浏览器兼容且符合业务需求的弹窗页面。

本发明实施例通过ajax异步请求页面信息,根据获取的页面信息及预设的弹窗配置信息加载弹窗页面,解决了弹窗页面显示过程中需要频繁地发生资源请求与分配,导致对服务器性能要求较高且网页的加载速度慢的问题,在满足弹窗需求的同时提高性能和效率,减轻对浏览器以及服务器的性能损耗,提高了用户体验。在网页开发过程中起到了良好的促进作用,方法本身代码量较少,可支持大型及小型的页面弹窗功能,同时模块化代码便于后期管理。进一步的,根据节点和统一的样式信息对页面信息进行处理,实现页面加载效果,能够满足不同浏览器的格式兼容需求,提高了用户体验。

实施例三

图4是本发明实施例三中的弹窗页面生成装置的结构示意图,参见图4,本实施例提供了一种弹窗页面生成装置,该装置包括:

指令接收模块410,用于在主页面下接收触发弹窗页面的输入指令;

信息请求模块420,用于根据所述输入指令利用ajax异步请求页面信息;

信息接收模块430,用于接收服务器返回的页面信息;

页面加载模块440,用于根据所述页面信息及预设的弹窗配置信息加载弹窗页面。

可选的,所述弹窗配置信息包括所述服务器对应的各弹窗页面的主体标签;

所述页面加载模块440包括:

主体标签获取单元,用于从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签;

第一页面渲染单元,用于根据所述主体标签对所述页面信息进行渲染处理,加载得到所述弹窗页面。

可选的,所述弹窗配置信息还包括弹窗页面的样式信息;

所述页面加载模块440还包括:

样式获取单元,用于从所述弹窗配置信息中获取所请求的弹窗页面对应的主体标签和样式信息;

第二页面渲染单元,用于根据所述主体标签和所述样式信息对所述页面信息进行渲染处理,加载得到所述弹窗页面。

可选的,所述装置还包括:配置信息获取模块,用于在根据所述页面信息及预设的弹窗配置信息加载弹窗页面之前,从所述服务器预先存储的配置文件中获取所述弹窗配置信息;或者,从本地缓存中获取所述弹窗配置信息。

进一步的,所述页面信息是text或者html类型的数据。

上述装置可执行本发明任意实施例所提供的弹窗页面生成方法,具备执行该弹窗页面生成方法的相应的功能模块和有益效果。

值得注意的是,上述弹窗页面生成装置的实施例中,所包括的各个模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能模块的具体名称也只是为了便于相互区分,并不用于限制本发明的保护范围。

实施例四

本发明实施例提供一种浏览器,该浏览器包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明任意实施例所述的弹窗页面生成方法。

图5所示为本发明实施例四提供的浏览器的结构示意图,参见图5,该浏览器包括处理器510和存储器520;浏览器中处理器510的数量可以是一个或多个,图5中以一个处理器510为例;浏览器中的处理器510和存储器520可以通过总线或其他方式连接,图5中以通过总线连接为例。

存储器520作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块,如本发明实施例中的弹窗页面生成方法对应的程序指令/模块(例如,弹窗页面生成装置中的指令接收模块410、信息请求模块420、信息接收模块430和页面加载模块440)。处理器510通过运行存储在存储器520中的软件程序、指令以及模块,从而执行服务器的各种功能应用以及弹窗页面生成,即实现上述的弹窗页面生成方法。

存储器520可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据终端的使用所创建的数据等。此外,存储器520可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储器520可进一步包括相对于处理器510远程设置的存储器,这些远程存储器可以通过网络连接至浏览器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本发明实施例提供的浏览器不仅可以执行并实现本发明任意实施例提供的弹窗页面生成方法,还可以根据业务具体要求,执行其他程序或者方法。

实施例五

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

本实施例提供的计算机可读存储介质存储的计算机程序,除了被处理器执行时实现本发明任意实施例中所述的弹窗页面生成方法,还可以包括其他程序,以实现具体的业务需求。

通过以上关于实施方式的描述,所属领域的技术人员可以清楚地了解到,本发明可借助软件及必需的通用硬件来实现,当然也可以通过硬件实现,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如计算机的软盘、只读存储器(read-onlymemory,rom)、随机存取存储器(randomaccessmemory,ram)、闪存(flash)、硬盘或光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。

注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1