网页内的iframe元素拖动方法和系统技术方案

本申请实施例公开了一种网页内的iframe元素拖动方法，包括：获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。本申请实施例公开了一种网页内的iframe元素拖动系统、计算机设备和计算机存储介质。本申请实施例提供的技术方案可以确保iframe元素不会意外停止移动。保iframe元素不会意外停止移动。保iframe元素不会意外停止移动。

【技术实现步骤摘要】
网页内的iframe元素拖动方法和系统


[0001]本申请涉及网页处理技术，尤其涉及一种网页内的iframe元素拖动方法、系统、计算机设备及计算机可读存储介质。

技术介绍

[0002]元素(element)拖动是网页(Web)应用中常用的一种与用户交互的手段，即通过鼠标或触控屏触摸等操作，改变元素在网页中的位置，从而实现元素在网页中的拖动。
[0003]iframe元素为网页元素的一种，其特殊之处在于iframe元素内部和所在网页之间相对独立，网页无法捕捉到作用在iframe元素内的拖动操作，从而无法将iframe元素从网页的第一个位置拖动到网页的另一个位置。即使在拖动时，尤其拖动速度较快时，也容易意外停止拖动，即：iframe元素在被拖动时易意外中断。

技术实现思路

[0004]本申请实施例的目的是提供一种网页内的iframe元素拖动方法、系统、计算机设备及计算机可读存储介质，用于解决上述问题。
[0005]本申请实施例的一个方面提供了一种网页内的iframe元素拖动方法，包括：
[0006]获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；
[0007]响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；
[0008]响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。
[0009]可选的，还包括：
[0010]响应于跟随在所述拖动事件之后的释放事件，将所述目标块级元素恢复至初始大小。
[0011]可选的，所述iframe元素的框架内包括文档；
[0012]所述目标块级元素覆盖所述文档的标题；其中，所述目标块级元素的初始大小与所述标题的大小相适配，且所述初始大小的目标块级元素不覆盖所述文档的交互控件。
[0013]可选的，所述获取目标网页中的iframe元素，包括：
[0014]获取服务器提供的iframe配置信息，所述iframe配置信息包括iframe容器配置信息、iframe元素配置信息、文档信息，所述文档信息包括标题在所述iframe容器中的位置；
[0015]根据所述iframe容器配置信息，在所述目标网页上配置iframe容器；
[0016]根据所述iframe元素配置信息，在所述iframe容器中配置所述iframe元素；
[0017]根据所述文档信息，在所述iframe元素创建的框架内生成所述文档；
[0018]根据所述标题在所述iframe容器中的位置，配置所述目标块级元素；
[0019]其中，所述目标块级元素的显示属性为透明，且所述目标块级元素归属于所述目标网页。
[0020]可选的，还包括：
[0021]在所述文档的标题滚动到所述iframe元素的框架之外时，将所述目标块级元素设置隐藏。
[0022]可选的，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：
[0023]将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小与所述iframe元素的框架大小相同，所述目标大小的目标块级元素正对所述iframe元素的框架。
[0024]可选的，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：
[0025]将所述目标块级元素从初始大小扩大到目标大小；
[0026]其中，所述目标大小的目标块级元素的上方区域部分伸出所述iframe元素的框架。
[0027]本申请实施例的一个方面又提供了一种网页内的iframe元素拖动系统，包括：
[0028]获取模块，用于获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；
[0029]第一响应模块，用于响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；
[0030]第二响应模块，用于响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。
[0031]本申请实施例的一个方面又提供了一种网页内的iframe元素拖动方法，包括：
[0032]在目标网页上展示目标直播间的视频直播画面；
[0033]接收所述目标直播间在直播过程中提供的交互面板信息；
[0034]根据所述交互面板信息，在所述目标网页中展示交互面板；其中，所述交互面板配置在iframe元素的框架中，且所述交互面板部分区域之上配置有目标块级元素；
[0035]响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；
[0036]响应于跟随在所述下压事件之后的拖动事件，拖动所述iframe元素，以使所述交互面板随所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。
[0037]本申请实施例的一个方面又提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述网页内的iframe元素拖动方法的步骤。
[0038]本申请实施例的一个方面又提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器实现如上述网页内的iframe元素拖动方法的步骤。
[0039]本申请实施例提供的网页内的iframe元素拖动方法、系统、计算机设备及计算机可读存储介质，可以包括以下技术效果：通过在iframe元素的框架的部分区域之上加载目标块级元素，使得目标网页可以捕捉到针对iframe元素的拖动操作，并在拖动起始放大目标块级元素的大小，使得在拖动过程中，即使拖动速度较大，也能保证目标块级元素不会和用于拖动的鼠标或手指等发生脱离，从而确保iframe元素不会意外停止移动，即：确保
iframe元素在被拖动时不会意外中断，提升用户体验。
附图说明
[0040]图1示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的应用环境图；
[0041]图2示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的流程图；
[0042]图3示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的另一流程图；
[0043]图4示意性示出了图2或图3中步骤S200的子流程图；
[0044]图5示意性示出了目标网页、iframe容器、iframe元素和目标块级元素的分层图；
[0045]图6示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的新增步骤图；
[0046]图7示意性示出了图2或图3中步骤S202的子流程图；<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页内的iframe元素拖动方法，其特征在于，包括：获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。2.根据权利要求1所述的网页内的iframe元素拖动方法，其特征在于，还包括：响应于跟随在所述拖动事件之后的释放事件，将所述目标块级元素恢复至初始大小。3.根据权利要求1所述的网页内的iframe元素拖动方法，其特征在于：所述iframe元素的框架内包括文档；所述目标块级元素覆盖所述文档的标题；其中，所述目标块级元素的初始大小与所述标题的大小相适配，且所述初始大小的目标块级元素不覆盖所述文档的交互控件。4.根据权利要求3所述的网页内的iframe元素拖动方法，其特征在于,所述获取目标网页中的iframe元素，包括：获取服务器提供的iframe配置信息，所述iframe配置信息包括iframe容器配置信息、iframe元素配置信息、文档信息，所述文档信息包括标题在所述iframe容器中的位置；根据所述iframe容器配置信息，在所述目标网页上配置iframe容器；根据所述iframe元素配置信息，在所述iframe容器中配置所述iframe元素；根据所述文档信息，在所述iframe元素创建的框架内生成所述文档；根据所述标题在所述iframe容器中的位置，配置所述目标块级元素；其中，所述目标块级元素的显示属性为透明，且所述目标块级元素归属于所述目标网页。5.根据权利要求4所述的网页内的iframe元素拖动方法，其特征在于,还包括：在所述文档的标题滚动到所述iframe元素的框架之外时，将所述目标块级元素设置隐藏。6.根据权利要求1至5任意一项所述的网页内的iframe元素拖动方法，其特征在于，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：将所述目标块级元素从初始大小扩大到目标大小；...

【专利技术属性】
技术研发人员：杨高尚，
申请(专利权)人：上海哔哩哔哩科技有限公司，
类型：发明
国别省市：