一种实现弹窗交互事件的方法、装置及计算机设备
技术领域
本发明属于建站平台开发的技术领域,尤其涉及一种实现弹窗交互事件的方法、装置及计算机设备。
背景技术
随着互联网的发展,门户网站、电子商务网站、直播网站等各类网站层出不穷,各类公司业务的迅速发展,随之产生了大量活动网页的需求用于吸引用户,因此产生了自助式的建站平台。
在自助式建站平台中,组件开发人员向平台提供工具(模板或组件)。活动网页开发人员可根据提供的工具(模板或组件),快速的开发出质量较高的活动网页。但是当活动网页遇到带有弹窗交互的设计时,因为涉及到事件的交互,传统的建站平台没有此功能,只能让开发人员重新编写代码,通过代码的方式来嵌入实现事件交互。
但是,若开发人员重新编写代码的话则会导致网页开发的时间成本增加,进而降低了网页的构建速度。
发明内容
针对现有技术存在的问题,本发明实施例提供了一种实现弹窗交互事件的方法、装置及计算机设备,用于解决现有技术中在自助式建站平台实现弹窗事件的交互功能时,只能通过重新编写代码的方式实现,导致网页开发的时间成本增加,进而降低了网页构建速度的技术问题。
本发明提供一种实现弹窗交互事件的方法,应用于建站平台中,所述方法包括:
在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件推送至少一个弹窗组件元素,形成弹窗;
基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;
判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发所述弹窗显示。
上述方案中,所述基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素,包括:
将所述暴露钩子设置为唯一的标识字符串M;
将各弹窗组件元素设置为与对应弹窗进行交互的各按钮;
在当前按钮被触发点击的情况下,利用获取函数document.querySelector(M)获取当前被点击的所述当前弹窗组件元素。
上述方案中,所述基于预设的弹窗交互规则,获取所述当前弹窗组件元素对应的当前点击事件,包括:
构建弹窗监听器;
在所述当前按钮被触发点击的情况下,利用所述弹窗监听器,通过监听函数addEventListen获取所述当前弹窗组件元素对应的当前点击事件。
上述方案中,所述若所述待链接地址与所述暴露钩子不匹配,还包括:执行所述当前弹窗组件元素的默认事件操作。
上述方案中,若所述待链接地址与所述暴露钩子匹配,则触发所述弹窗显示后,包括:
调用阻止函数preventDefault,取消所述当前弹窗组件元素的默认事件操作。
上述方案中,若所述待链接地址与所述暴露钩子匹配,则触发所述弹窗显示后,还包括:
利用监听函数addEventListen监听点击事件;
判断所述点击事件的点击对象是否为所述弹窗组件元素,若所述点击对象不是所述弹窗组件元素,则隐藏所述弹窗。
上述方案中,所述利用监听函数addEventListen监听点击事件后,还包括:
判断所述点击事件的跳转链接地址是否能与预设的所述弹窗容器组件的关闭交互钩子匹配,若所述跳转链接地址能与所述关闭交互钩子匹配,则隐藏所述弹窗。
本发明还提供一种实现弹窗交互事件的装置,应用于建站平台中,所述装置包括:
构建单元,用于在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件中推送至少一个弹窗组件元素,形成弹窗;
获取单元,用于基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;
判断单元,用于判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发所述弹窗显示。
本发明还提供一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现以下步骤:
在建站平台中构建弹窗容器组件,向所述弹窗容器组件中推送至少一个弹窗组件元素,形成弹窗;
基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;
判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发所述弹窗显示。
本发明还提供一种实现弹窗交互事件的计算机设备,包括:
至少一个处理器;以及
与所述处理器通信连接的至少一个存储器,其中,
所述存储器存储有可被所述处理器执行的程序指令,所述处理器调用所述程序指令能够执行如上述任一所述的方法。
本发明提供了一种实现弹窗交互事件的方法、装置及计算机设备,应用于建站平台中,所述方法包括:在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件中推送至少一个弹窗组件元素,形成弹窗;基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发所述弹窗显示;如此,预先构建一个弹窗容器组件,可以将各种类型的弹窗容器组件元素推送至所述弹窗组件中,当某个弹窗容器组件元素与弹窗进行交互时,当获取到当前弹窗组件元素的当前点击事件后,若点击事件待链接地址能与所述暴露钩子匹配成功,则触发对应的弹窗显示;这样就无需开发人员通过重新编码进行嵌入来实现弹窗交互,进而减少了网页开发的时间,提高了网页的构建速度。
附图说明
图1为本发明实施例一提供的实现弹窗交互事件的方法流程示意图;
图2为本发明实施例二提供的实现弹窗交互事件的装置结构示意图;
图3为本发明实施例三提供的实现弹窗交互事件的计算机设备的整体结构示意图。
具体实施方式
为了解决现有技术中在自助式建站平台实现弹窗事件的交互功能时,只能通过重新编写代码的方式实现,导致网页开发的时间成本增加,进而降低了网页构建速度的技术问题,本发明提供了一种实现弹窗交互事件的方法、装置及计算机设备,应用于建站平台中,所述方法包括:在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件推送至少一个弹窗组件元素,形成弹窗;基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发对应的弹窗显示。
下面通过附图及具体实施例对本发明的技术方案做进一步的详细说明。
实施例一
本实施例提供一种实现弹窗交互事件的方法,应用于建站平台中,如图1所示,所述方法包括:
S101,在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件推送至少一个弹窗组件元素,形成弹窗;
本步骤中,在所述建站平台中构建弹窗容器组件时,需要创建一个模块,然后将通过建站平台的核心库,将模块整合成弹窗容器组件。其中,所述模块包括:超文本标记语言(HTML,HyperText Markup Language)文件,层叠样式表(CSS,Cascading Style Sheets)文件及脚本文件(JS,Java Script)。
然后向所述弹窗容器组件推送至少一个弹窗组件元素,形成弹窗;所述弹窗容器组件中包括至少一个弹窗组件元素;所述弹窗组件元素可以包括:功能组件元素,图片组件元素,文字组件元素、热链接组件元素及CSS渲染组件元素等。
构建好弹窗容器组件后,为了方便开发人员识别,还可以利用CSS渲染组件元素设置弹窗组件高亮边框居中显示,并且可以任意拖动,隐藏。
S102,基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;
本步骤中,预先建立弹窗交互规则,比如:将弹窗容器组件的暴露钩子设置为唯一的标记字符串M;并可以将各弹窗组件元素设置为与对应弹窗进行交互的各按钮。
在当前按钮被触发点击的情况下,基于所述按钮,可以获取函数document.querySelector(M)获取当前被点击的所述当前弹窗组件元素。其中,所述暴露钩子可以是所述弹窗容器组件的预留的一个唯一的标识(ID,Identity)值。
获取到当前弹窗组件元素后,构建弹窗监听器;在所述当前按钮被触发点击的情况下,利用所述弹窗监听器,通过监听函数addEventListen获取所述当前弹窗组件元素的当前点击事件。
S103,判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发对应的弹窗显示。
获取到当前弹窗组件元素的当前点击事件后,判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,说明待链接地址并不是一个纯链接地址,则触发对应的弹窗显示。
对应的弹窗显示后,调用阻止函数preventDefault,取消所述当前弹窗组件元素的默认事件操作,一般来说,若当前弹窗组件元素为图片组件元素或者文字组件元素时,所述当前弹窗组件元素的默认事件操作为当前弹窗组件元素被点击后,没有任何显示内容及显示效果。若当前弹窗组件元素为热链接组件元素时,且热链接存在的情况下,默认事件操作为跳转页面。
进一步地,所述若所述待链接地址与所述暴露钩子不匹配,还包括:执行所述当前弹窗组件元素的默认事件操作。
另外,对应的弹窗显示后,还需要利用监听函数addEventListen监听点击事件;判断所述点击事件的点击对象是否为所述弹窗组件元素,若所述点击对象不是所述弹窗组件元素,则隐藏所述弹窗。
判断所述点击事件的点击对象是否为所述关闭交互组件元素,若所述点击对象是所述关闭交互组件元素,则隐藏所述弹窗。
并且,还要同时判断所述点击事件的跳转链接地址是否能与预设的所述弹窗容器组件的关闭交互钩子匹配,若所述跳转链接地址能与所述关闭交互钩子匹配,则隐藏所述弹窗。其中,所述关闭交互钩子可以为预设的跳转链接close_pop。
实施例二
相应于实施例一,本实施例还提供一种实现弹窗交互事件的装置,如图2所示,所述装置包括:构建单元21、获取单元22及判断单元23;其中,
所述构建单元21用于在所述建站平台中构建弹窗容器组件,在所述建站平台中构建弹窗容器组件时,需要创建一个模块,然后将通过建站平台的核心库,将模块整合成弹窗容器组件。其中,所述模块包括:HTML文件,CSS文件及JS文件。然后向所述弹窗容器组件推送至少一个弹窗组件元素,形成弹窗;所述弹窗组件元素可以包括:功能组件元素,图片组件元素,文字组件元素、热链接组件元素及CSS渲染组件元素等。
构建好弹窗容器组件后,为了方便开发人员识别,所述构建单元21还可以利用CSS渲染组件元素设置弹窗组件高亮边框居中显示,并且可以任意拖动,隐藏。
在获取单元22基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素;获取所述当前弹窗组件元素的当前点击事件之前,所述构建单元21还要建立弹窗交互规则,比如:将弹窗容器组件的暴露钩子设置为唯一的标记字符串M;并可以将各弹窗组件元素设置为与对应弹窗进行交互的各按钮。
在当前按钮被触发点击的情况下,所述获取单元22用于基于所述按钮,可以获取函数document.querySelector(M)获取当前被点击的所述当前弹窗组件元素。其中,所述暴露钩子可以是所述弹窗容器组件的预留的一个唯一的标识(ID,Identity)值。
获取到当前弹窗组件元素后,所述构建单元21还需构建弹窗监听器;在所述当前按钮被触发点击的情况下,所述获取单元22还用于利用所述弹窗监听器,通过监听函数addEventListen获取所述当前弹窗组件元素对应的当前点击事件。
获取到当前弹窗组件元素的当前点击事件后,所述判断单元23用于判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,说明待链接地址并不是一个纯链接地址,则触发所述弹窗显示。
对应的弹窗显示后,所述判断单元23还需调用阻止函数preventDefault,取消所述当前弹窗组件元素的默认事件操作,一般来说,若当前弹窗组件元素为图片组件元素或者文字组件元素时,所述当前弹窗组件元素的默认事件操作为当前弹窗组件元素被点击后,没有任何显示内容及显示效果。若当前弹窗组件元素为热链接组件元素时,且热链接存在的情况下,默认事件操作为跳转页面。
进一步地,所述若所述待链接地址与所述暴露钩子不匹配,所述判断单元23还用于:执行所述当前弹窗组件元素的默认事件操作。
另外,对应的弹窗显示后,所述获取单元22还需要利用监听函数addEventListen监听点击事件;所述判断单元23还需判断所述点击事件的点击对象是否为所述弹窗组件元素,若所述点击对象不是所述弹窗组件元素,则隐藏所述弹窗。判断所述点击事件的点击对象是否为所述关闭交互组件元素,若所述点击对象是所述关闭交互组件元素,也则隐藏所述弹窗。
并且,所述判断单元23还要同时判断所述点击事件的跳转链接地址是否能与预设的所述弹窗容器组件的关闭交互钩子匹配,若所述跳转链接地址能与所述关闭交互钩子匹配,则隐藏所述弹窗。其中,所述关闭交互钩子可以为预设的跳转链接close_pop。
实施例三
本实施例还提供一种实现弹窗交互事件的计算机设备,如图3所示,所述计算机设备包括:射频(Radio Frequency,RF)电路310、存储器320、输入单元330、显示单元340、音频电路350、WiFi模块360、处理器370、以及电源380等部件。本领域技术人员可以理解,图3中示出的计算机设备结构并不构成对计算机设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
下面结合图3对计算机设备的各个构成部件进行具体的介绍:
RF电路310可用于信号的接收和发送,特别地,将基站的下行信息接收后,给处理器350处理。通常,RF电路310包括但不限于至少一个放大器、收发信机、耦合器、低噪声放大器(Low Noise Amplifier,LNA)、双工器等。
存储器320可用于存储软件程序以及模块,处理器350通过运行存储在存储器320的软件程序以及模块,从而执行计算机设备的各种功能应用以及数据处理。存储器320可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序等;存储数据区可存储根据计算机设备的使用所创建的数据等。此外,存储器320可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
输入单元330可用于接收输入的数字或字符信息,以及产生与计算机设备的用户设置以及功能控制有关的键信号输入。具体地,输入单元330可包括键盘331以及其他输入设备332。键盘331,可收集用户在其上的输入操作,并根据预先设定的程式驱动相应的连接装置。键盘331采集到输出信息后再送给处理器350。除了键盘331,输入单元330还可以包括其他输入设备332。具体地,其他输入设备332可以包括但不限于触控面板、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
显示单元340可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种菜单。显示单元340可包括显示面板341,可选的,可以采用液晶显示器(LiquidCrystal Display,LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板341。进一步的,键盘331可覆盖显示面板341,当键盘331检测到在其上或附近的触摸操作后,传送给处理器350以确定触摸事件的类型,随后处理器350根据输入事件的类型在显示面板341上提供相应的视觉输出。虽然在图3中键盘331与显示面板341是作为两个独立的部件来实现计算机设备的输入和输入功能,但是在某些实施例中,可以将键盘331与显示面板341集成而实现计算机设备的输入和输出功能。
音频电路350、扬声器351,传声器352可提供用户与计算机设备之间的音频接口。音频电路350可将接收到的音频数据转换后的电信号,传输到扬声器351,由扬声器351转换为声音信号输出;
WiFi属于短距离无线传输技术,计算机设备通过WiFi模块360可以帮助用户收发电子邮件、浏览网页和访问流式媒体等,它为用户提供了无线的宽带互联网访问。虽然图3示出了WiFi模块360,但是可以理解的是,其并不属于计算机设备的必须构成,完全可以根据需要在不改变发明的本质的范围内而省略。
处理器370是计算机设备的控制中心,利用各种接口和线路连接整个计算机设备的各个部分,通过运行或执行存储在存储器320内的软件程序和/或模块,以及调用存储在存储器320内的数据,执行计算机设备的各种功能和处理数据,从而对计算机设备进行整体监控。可选的,处理器370可包括一个或多个处理单元;优选的,处理器370可集成应用处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等。
计算机设备还包括给各个部件供电的电源380(比如电源适配器),优选的,电源可以通过电源管理系统与处理器370逻辑相连。
本发明提供的实现弹窗交互事件的方法方法、装置及计算机设备能带来的有益效果至少是:
本发明提供的一种实现弹窗交互事件的方法方法、装置及计算机设备,所述方法包括:在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件中推送至少一个弹窗组件元素,形成弹窗;基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发所述弹窗显示;如此,预先构建一个弹窗容器组件,可以将各种类型的弹窗容器组件元素推送至所述弹窗组件中,当某个弹窗容器组件元素与弹窗进行交互时,当获取到当前弹窗组件元素的当前点击事件后,若点击事件待链接地址能与所述暴露钩子匹配成功,则触发对应的弹窗显示;这样就无需开发人员通过重新编码进行嵌入来实现弹窗交互,进而减少了网页开发的时间,提高了网页的构建速度。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本发明也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本发明的内容,并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本公开并帮助理解各个发明方面中的一个或多个,在上面对本发明的示例性实施例的描述中,本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP,Digital Signal Processing)来实现根据本发明实施例的网关、代理服务器、系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读存储介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供;该程序被处理器执行时实现以下步骤:在所述建站平台中构建弹窗容器组件,向所述弹窗容器组件中推送至少一个弹窗组件元素,形成弹窗;基于预设的弹窗交互规则,获取当前被点击的当前弹窗组件元素及所述当前弹窗组件元素对应的当前点击事件;判断所述当前点击事件的待链接地址是否能与所述弹窗容器组件的暴露钩子匹配成功,若所述待链接地址能与所述暴露钩子匹配成功,则触发所述弹窗显示。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
以上所述,仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围,凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等,均应包含在本发明的保护范围之内。