CN114675770A - 网页内的iframe元素拖动方法和系统 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

元素(element)拖动是网页(Web)应用中常用的一种与用户交互的手段，即通过鼠标或触控屏触摸等操作，改变元素在网页中的位置，从而实现元素在网页中的拖动。

iframe元素为网页元素的一种，其特殊之处在于iframe元素内部和所在网页之间相对独立，网页无法捕捉到作用在iframe元素内的拖动操作，从而无法将iframe元素从网页的第一个位置拖动到网页的另一个位置。即使在拖动时，尤其拖动速度较快时，也容易意外停止拖动，即：iframe元素在被拖动时易意外中断。

发明内容

本申请实施例的目的是提供一种网页内的iframe元素拖动方法、系统、计算机设备及计算机可读存储介质，用于解决上述问题。

本申请实施例的一个方面提供了一种网页内的iframe元素拖动方法，包括：

获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；

响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

可选的，还包括：

响应于跟随在所述拖动事件之后的释放事件，将所述目标块级元素恢复至初始大小。

可选的，所述iframe元素的框架内包括文档；

所述目标块级元素覆盖所述文档的标题；其中，所述目标块级元素的初始大小与所述标题的大小相适配，且所述初始大小的目标块级元素不覆盖所述文档的交互控件。

可选的，所述获取目标网页中的iframe元素，包括：

获取服务器提供的iframe配置信息，所述iframe配置信息包括iframe容器配置信息、iframe元素配置信息、文档信息，所述文档信息包括标题在所述iframe容器中的位置；

根据所述iframe容器配置信息，在所述目标网页上配置iframe容器；

根据所述iframe元素配置信息，在所述iframe容器中配置所述iframe元素；

根据所述文档信息，在所述iframe元素创建的框架内生成所述文档；

根据所述标题在所述iframe容器中的位置，配置所述目标块级元素；

其中，所述目标块级元素的显示属性为透明，且所述目标块级元素归属于所述目标网页。

可选的，还包括：

在所述文档的标题滚动到所述iframe元素的框架之外时，将所述目标块级元素设置隐藏。

可选的，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：

将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小与所述iframe元素的框架大小相同，所述目标大小的目标块级元素正对所述iframe元素的框架。

可选的，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：

将所述目标块级元素从初始大小扩大到目标大小；

其中，所述目标大小的目标块级元素的上方区域部分伸出所述iframe元素的框架。

本申请实施例的一个方面又提供了一种网页内的iframe元素拖动系统，包括：

获取模块，用于获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；

第一响应模块，用于响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

第二响应模块，用于响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

本申请实施例的一个方面又提供了一种网页内的iframe元素拖动方法，包括：

在目标网页上展示目标直播间的视频直播画面；

接收所述目标直播间在直播过程中提供的交互面板信息；

根据所述交互面板信息，在所述目标网页中展示交互面板；其中，所述交互面板配置在iframe元素的框架中，且所述交互面板部分区域之上配置有目标块级元素；

响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

响应于跟随在所述下压事件之后的拖动事件，拖动所述iframe元素，以使所述交互面板随所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

本申请实施例的一个方面又提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述网页内的iframe元素拖动方法的步骤。

本申请实施例的一个方面又提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器实现如上述网页内的iframe元素拖动方法的步骤。

本申请实施例提供的网页内的iframe元素拖动方法、系统、计算机设备及计算机可读存储介质，可以包括以下技术效果：通过在iframe元素的框架的部分区域之上加载目标块级元素，使得目标网页可以捕捉到针对iframe元素的拖动操作，并在拖动起始放大目标块级元素的大小，使得在拖动过程中，即使拖动速度较大，也能保证目标块级元素不会和用于拖动的鼠标或手指等发生脱离，从而确保iframe元素不会意外停止移动，即：确保iframe元素在被拖动时不会意外中断，提升用户体验。

附图说明

图1示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的应用环境图；

图2示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的流程图；

图3示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的另一流程图；

图4示意性示出了图2或图3中步骤S200的子流程图；

图5示意性示出了目标网页、iframe容器、iframe元素和目标块级元素的分层图；

图6示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的新增步骤图；

图7示意性示出了图2或图3中步骤S202的子流程图；

图8示意性示目标块级元素的大小变化对比图；

图9示意性示出了图2或图3中步骤S202的另一子流程图；

图10示意性示出了根据本申请实施例二的网页内的iframe元素拖动方法的应用环境图；

图11示意性示出了根据本申请实施例二的网页内的iframe元素拖动方法的流程图；

图12示意性示出了一个交互面板；

图13示意性示出了根据本申请实施例三的网页内的iframe元素拖动系统的框图；

图14示意性示出了根据本申请实施例四的网页内的iframe元素拖动系统的框图；

图15示意性示出了根据本申请实施例五的适于实现网页内的iframe元素拖动方法的计算机设备的硬件架构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个申请实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

以下提供本申请涉及的术语解释：

块级元素(block element)：HTML(Hyper Text Markup Language，超文本标记语言)中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素(容器)的整个水平空间，垂直空间等于其内容高度。以下为HTML中涉及的块级元素列表：<address>联系方式信息、<article>、文章内容、<aside>伴随内容、<blockquote>块引用、<dd>定义列表中定义条目描述、<div>文档分区、<dl>定义列表、<fieldset>表单元素分组、<figcaption>图文信息组标题、<figure>图文信息组、<footer>区段尾或页尾、<form>表单、<h1><h2><h3><h4><h5><h6>标题级别1-6、<header>区段头或页头、<hgroup>标题组、<hr>水平分割线、<ol>有序列表、<p>行、<pre>预格式化文本、<section>一个页面区段、<table>表格、<ul>无序列表。

iframe(内联框架)元素，表示嵌套的浏览上下文，用于将另一个HTML页面嵌入到当前页面中。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

iframe元素本身无拖动方法，iframe元素中产生的鼠标事件无法被在当前网页中捕获。实现拖动的方法可以是在iframe元素上添加块级元素，在iframe元素上添加鼠标事件mousedown(鼠标按下)，拖动时发生鼠标事件mousemove(鼠标移动)，根据鼠标事件mousemove发生鼠标位置改变，并据此修改iframe元素位置；发生鼠标事件mouseout(鼠标离开)/mouseleave(鼠标移出)/mouseup(鼠标松开)时，表示停止拖动，停止iframe元素位置的改变。该鼠标事件也指代触控事件。

然而，在鼠标快速移动时，鼠标事件mousemove多次发生，相应的，事件处理函数也多次被调用，造成延迟。延迟之后，iframe元素移动的速度赶不上鼠标移动的速度，可能造成鼠标移出iframe元素的状态，从而触发了鼠标事件mouseout，造成了iframe元素被意外停止移动，即：造成了iframe元素在移动时的意外中断。

有鉴于此，本申请实施例提供了网页内的iframe元素拖动方案，在当前网页增加块级元素覆盖于iframe元素，作为拖动区域；在拖动时，将可拖动区域变大，避免鼠标移出拖动区域导致拖动停止；在拖动停止时将拖动区域变回原大小，避免对其他用户可操作区域产生影响。通过上述方案优化网页的iframe元素拖动。

以下将通过多个实施例介绍网页内的iframe元素拖动方案。

在本申请的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本申请及区别每一步骤，因此不能理解为对本申请的限制。

实施例一

图1示意性示出了根据本申请实施例一的环境应用示意图。

计算机设备10000，可以是诸如智能手机、平板设备、PC(个人电脑)等终端设备。计算机设备10000可以安装有浏览器，用于检索、展示以及传递Web信息。其中，Web信息资源由统一资源标识符(Uniform Resource Identifier，URI)所标记。Web信息可以包括/为网页、图片、视频或者任何在Web上所呈现的各种内容。用户可以借助超级链接(Hyperlinks)，通过浏览器浏览互相关联的信息。

其中，网页由多个元素组成的，这些元素可以通过HTML标签描述，由浏览器解析和显示。为了内容扩展，可以内置有iframe元素，以嵌套方式内置其他文档(网页)。

图2示意性示出了根据本申请实施例一的网页内的iframe元素拖动方法的流程图。如图2所示，该网页内的iframe元素拖动方法可以包括步骤S200～S204，其中：

步骤S200，获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素。

iframe元素用于创建框架(内联框架)，将另一个文档(如网页B)嵌入到目标网页A中。相对于目标网页A，iframe元素中加载的是一个相对独立的网页B，因此需要为该网页B注册专门的事件处理程序，用于监听和响应针对网页B的操作。但是这样会导致：对iframe元素进行拖动时，拖动操作作用在所述iframe元素所在的区域，iframe元素通过专门的事件处理程序监听到拖动动作并产生鼠标事件，然而，由于该鼠标事件在iframe元素中产生，因此无法被目标网页A捕获。

有鉴于此，在所述iframe元素的框架中配置一个归属于所述目标网页的目标块级元素，将该目标块级元素所在区域作为拖动区域。由于所述目标块级元素归属于所述目标网页，因此当拖动操作作用在所述目标块级元素上时，目标网页可以捕获到该拖动操作在所述目标块级元素上产生的鼠标事件，进而实现iframe元素的拖动。在示例性应用中，所述目标块级元素可以是DIV元素或其他元素。

如上文所述，iframe元素用于创建框架(内联框架)，将另一个文档(如网页B)。该文档也可能存在一些和用户交互的控件，因此，为了不妨碍对这些控件的使用，所述目标块级元素配置在所述iframe元素的框架内部分区域上，拖动和控件交互互不干扰。

步骤S202，响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小。

在实际操作中：

①监听在所述目标块级元素上的拖动操作。所述拖动操作可以是用户控制实施，也可以是机器控制实施。所述拖动操作可以通过鼠标、触控屏、触控板或其他感应元件实现。所述拖动操作可以包括连续的下压操作、滑动操作和释放操作。其中：

所述下压操作，可以生成下压事件(mousedown)。

所述滑动操作，指在所述下压操作后，并未抬起的情形下，以下压操作的位置为起始点进行滑动。在本实施例中，所述滑动操作，可以生成拖动事件(mousemove)。

所述释放操作，指在所述滑动操作的终点释放该滑动操作。所述释放形式有多种，如在触控屏上抬起、松开鼠标、将鼠标或手指等移出所述目标网页的边界等。在本实施例中，所述释放操作，可以生成释放事件(mouseout/mousel eave/mouseup)。

②若监听到所述拖动操作触发的下压事件，则对所述目标块级元素的大小临时放大。

放大目标块级元素的大小，即放大拖曳区域的大小。

被放大后的目标块级元素，可以避免iframe元素移动的速度赶不上拖动操作的滑动速度(如鼠标移动的速度)，造成鼠标或手指等与iframe元素脱离的问题，从而确保iframe元素不会意外停止移动，即：确保iframe元素在移动时不会意外中断。

步骤S204，响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

根据所述拖动事件，控制所述iframe元素沿拖动操作的滑动轨迹进行移动。具体的，实时监控拖动操作的当前位置(如鼠标位置)，并据此实时调整iframe元素的位置。

本申请实施例所述的网页内的iframe元素拖动方法，通过在iframe元素的框架的部分区域之上加载目标块级元素，使得目标网页可以捕捉到对iframe元素的拖动操作，并在拖动起始放大目标块级元素的大小，使得在拖动过程中，即使拖动速度较大，也能保证目标块级元素不会和用于拖动的鼠标或手指等发生脱离，从而确保iframe元素不会意外停止移动，即：确保iframe元素在被拖动时不会意外中断。

以下提供几个可选的实施例，以进一步优选iframe元素的拖动体验。

作为可选的实施例，如图3所示，所述方法还包括步骤S206：

步骤S206，响应于跟随在所述拖动事件之后的释放事件，将所述目标块级元素恢复至初始大小。

以触控屏为例，手指在滑动过程中，会遇到多种情况结束上述拖动操作：

第一种情况：手指在抵达触控屏显示器的边缘之前，自动抬起手指；

第二种情况：手指沿某个方向滑动，直至直到目标网页的边缘，被动脱离目标网页。

第三种情况：手指沿某个方向滑动，直到抵达触控屏的边缘，被动脱离触控屏。

上述几种示例性的情况，均可以触发释放事件。

响应于所述释放事件，执行如下操作：

(1)停止移动，并将所述释放事件发生的位置确定为所述iframe元素的终点位置；

(2)将所述目标块级元素恢复至初始大小，覆盖所述iframe元素的框架的所述部分区域上。

在该可选的实施例中，通过所述目标块级元素恢复至初始大小，使得在位置拖动之后，用户仍然可以直接和iframe元素的框架内的文档进行交互，如点击控件、编辑等。

作为可选的实施例，所述iframe元素的框架内包括文档；

所述目标块级元素覆盖所述文档的标题；其中，所述目标块级元素的初始大小与所述标题的大小相适配，且所述初始大小的目标块级元素不覆盖所述文档的交互控件。

举例而言，所述目标块级元素的大小(长、宽)等于或略大于所述标题的大小(长、宽)，且不覆盖所述文档的交互控件，使得所述目标网页可以捕捉到针对所述iframe元素的拖动操作的同时，确保用户和iframe元素的框架内的交互控件的正常使用。

需要说明的是，在标题所在区域之上设置所述目标块级元素，为示例性应用。在其他实施例中，也可以在无交互控件的其他区域之上设置所述目标块级元素。设有所述目标块级元素的区域，还可以设置可拖动标识，以方便用户对iframe元素的拖动。

作为可选的实施例，用于获取iframe元素的iframe配置信息可以随所述目标网页的网页信息同时提供，也可以在所述目标网页的网页信息被提供之后，在后续某个时间点提供。如图4所示，所述步骤S200“所述获取目标网页中的iframe元素”可以包括步骤S400-S408，其中：步骤S400，获取服务器提供的iframe配置信息，所述iframe配置信息包括iframe容器配置信息、iframe元素配置信息、文档信息，所述文档信息包括标题在所述iframe容器中的位置；步骤S402，根据所述iframe容器配置信息，在所述目标网页上配置iframe容器；步骤S404，根据所述iframe元素配置信息，在所述iframe容器中配置所述iframe元素；步骤S406，根据所述文档信息，在所述iframe元素创建的框架内生成所述文档；步骤S408，根据所述标题在所述iframe容器中的位置，配置所述目标块级元素；其中，所述目标块级元素的显示属性为透明，且所述目标块级元素归属于所述目标网页。

如图5所示，在目标网页中加载一个块级元素作为iframe容器，将iframe元素装载在所述iframe容器中，所述iframe元素创建一个框架，然后将文档装载在该框架中，最后，根据文档的标题位置来加载一个目标块级元素并覆盖该标题上。所述目标块级元素和iframe容器均为归属于所述目标网页的元素，因此，当拖动操作作用于所述目标块级元素时，所述目标网页可以捕捉到该拖动操作触发的各个事件，进而根据拖动操作的滑动轨迹移动所述iframe容器。由于所述iframe元素是加载在所述iframe容器中，所述iframe元素会随所述iframe容器的位置变化而变化，即所述iframe元素会随所述iframe容器一起移动。在本可选的实施例中，通过所述目标块级元素和所述iframe容器，可以有效地拖动iframe元素。

在示例性应用中，所述iframe容器配置信息可以包括容器的高度、宽度、透明度、层级以及文档的标题在iframe容器中的位置(如第一行居中)。iframe元素配置信息可以包括iframe元素的高度、宽度、边距、是否显示滚动条、层级等。所述文档信息可以HTML文件。所述iframe容器与所述iframe元素的框架大小可以一致。

作为可选的实施例，如图6所示，所述方法还可以包括：

步骤S600，在所述文档的标题滚动到所述iframe元素的框架之外时，将所述目标块级元素设置隐藏。

举例而言，当所述文档的总高度大于所述iframe总高度，所述文档仅能在iframe元素的框架中展示一部分，此时，可以通过滚动条来控制所述文档的哪部分可见。在正常状态下，所述文档的标题置于所述iframe元素的框架的第一行中间，所述目标块级元素覆盖在该所述iframe元素的框架的第一行中间。由于所述目标块级元素归属于所述目标网页，当所述文档向上滚动时，所述目标块级元素并不会随之滚动。滚动后，所述文档的某个互动控件可能正好滚动到所述iframe元素的框架的第一行中间，为确保用户和该互动控件的交互，将所述目标块级元素设置为隐藏。在所述目标块级元素为隐藏的情况下，使得用户通过鼠标等启动该互动控件。

作为可选的实施例，如图7所示，所述步骤S202“响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小”可以包括：步骤S700，将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小与所述iframe元素的框架大小相同，所述目标大小的目标块级元素正对所述iframe元素的框架。

如图8所示，可以将所述目标块级元素扩大到等于或略大于所述iframe元素的框架，从而有效地防止目标块级元素过小或快速拖动导致iframe元素和手指或鼠标脱离的问题。需要说明的是，将所述目标块级元素扩大到等于或略大于所述iframe元素的框架，且将所述目标大小的目标块级元素正对所述iframe元素的框架，既确保iframe元素在移动中不会意外中断，也不会因为所述目标块级元素的过大或放置位置不当，而妨碍到所述目标网页中的其他元素与用户的交互。

作为可选的实施例，如图9所示，所述步骤S202“响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小”可以包括：步骤S900，将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小的目标块级元素的上方区域部分伸出所述iframe元素的框架。在该可选的实施例中，通过对所述iframe元素上方区域的扩大，可以防止向上快速拖动时iframe元素和手指或鼠标脱离。

实施例二

图10示意性示出了根据本申请实施例二的环境应用示意图。

在直播场景下，主播终端2可以将直播数据实时推送至观众终端(如，4A、4B、…、4N)。

主播终端2，用于实时生成直播数据，并进行直播数据的推流操作。所述直播数据可以包括音频数据或视频数据。主播终端2可以是智能手机、平板电脑等电子设备。

观众终端(如，4A、4B、…、4N)，可以被配置为实时接收主播终端2的直播数据。观众终端(如，4A、4B、…、4N)可以是任意类型的计算设备，诸如智能手机、平板设备、膝上型计算机、智能电视、车载终端等。观众终端(如，4A、4B、…、4N)可以内置浏览器或专门程序，通过浏览器或专门程序接收所述直播数据以向用户输出内容。所述内容可以包括视频，音频，评论，文本数据和/或类似物。

观众终端(如，4A、4B、…、4N)可以包括播放器8。播放器8向用户输出(如，展示，呈现)内容。其中所述内容可以包括视频，音频，评论，文本数据和/或类似物。观众终端(如，4A、4B、…、4N)可以包括接口，该接口可以包括输入元件(触控屏)。例如，输入元件可以被配置为接收用户指令，所述用户指令可以使观众终端(如，4A、4B、…、4N)执行各类操作，如打开或关闭清屏等。

主播终端2和观众终端(如，4A、4B、…、4N)可以通过网络6提供网络服务。作为示例。网络6可以包括各种网络设备，例如路由器、交换机、多路复用器、集线器、调制解调器、网桥、中继器、防火墙和/或代理设备等。网络6可以包括物理链路，例如同轴电缆链路、双绞线电缆链路、光纤链路及其组合和/或类似物。网络6可以包括无线链路，例如蜂窝链路、卫星链路、Wi-Fi链路和/或类似物。

网络6包括服务器。服务器可以分配直播频道(即，直播间)，用于主播终端2和观众终端(如，4A、4B、…、4N)之间的交互，如推流、拉流、互动等。其中，服务器作为直播平台，可以是单个服务器、服务器集群或云计算服务中心。

下面，本申请将以观众终端4A为执行主体，提供网页内的iframe元素拖动方案。

图11示意性示出了根据本申请实施例二的网页内的iframe元素拖动方法的流程图。如图11所示，该网页内的iframe元素拖动方法可以包括步骤S1100～S1108，其中：

步骤S1100，在目标网页上展示目标直播间的视频直播画面。

步骤S1102，接收所述目标直播间在直播过程中提供的交互面板信息。

步骤S1104，根据所述交互面板信息，在所述目标网页中展示交互面板；其中，所述交互面板配置在iframe元素的框架中，且所述交互面板部分区域之上配置有目标块级元素。

步骤S1106，响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小。

步骤S1108，响应于跟随在所述下压事件之后的拖动事件，拖动所述iframe元素，以使所述交互面板随所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

作为可选的实施例中，所述方法还包括：

步骤S1110，响应于跟随在所述拖动事件之后的释放事件，将所述目标块级元素恢复至初始大小。

主播在直播过程中，会为了增加气氛或特定内容推送一些交互面板。

交互面板主动展示到目标网页中，或经用户触发后展示到目标网页中，为不妨碍观看直播内容，有些用户有需求将展示在目标网页中的交互面板拖动到其他位置。

为了能够将交互面板以原样展示出来，所述交互面板嵌入在所述iframe元素的框架中。对目标网页而言，在iframe元素的框架内的交互面板是一个相对独立的文档。为了使得目标网页能够捕捉到针对交互面板的拖动操作，在交互面板部分区域之上配置有目标块级元素。由于所述目标块级元素归属于所述目标网页，因此当拖动操作作用在所述目标块级元素上时，目标网页可以捕获到该拖动操作在所述目标块级元素上产生的鼠标事件，因此可以拖动iframe元素，交互面板随之移动。

所述目标块级元素可以覆盖在所述交互面板部分区域(如标题)上。如图12所示，所述目标块级元素的大小(长、宽)等于或略大于所述标题的大小(长、宽)，不覆盖所述文档的交互控件，使得所述目标网页可以捕捉到针对所述iframe元素的拖动操作的同时，确保用户和iframe元素的框架内的交互控件的正常使用。需要说明的是，所述目标块级元素优选为透明，图示中的框线仅用于方便理解。

在所述目标块级元素上监听到所述拖动操作触发的下压事件后，对所述目标块级元素临时放大。放大目标块级元素的大小，即放大拖曳区域的大小。被放大后的目标块级元素，可以避免iframe元素移动的速度赶不上拖动操作的滑动速度(如鼠标移动的速度)，造成鼠标或手指等与iframe元素脱离的问题，从而确保iframe元素不会意外停止移动，即：确保iframe元素和交互面板在移动时不会意外中断。也就是说，本申请实施例可以优化较小拖动区域快速拖动时的拖动体验。

在可选的实施例中，所述交互面板信息可以包括iframe容器配置信息、iframe元素配置信息、面板配置信息，所述面板配置信息包括标题在所述iframe容器中的位置。其中，步骤S1104可以包括：根据所述iframe容器配置信息，在所述目标网页上配置iframe容器；根据所述iframe元素配置信息，在所述iframe容器中配置所述iframe元素；根据所述面板配置信息，在所述iframe元素创建的框架内生成所述交互面板；根据所述标题在所述iframe容器中的位置，配置所述目标块级元素；其中，所述目标块级元素的显示属性为透明，且所述目标块级元素归属于所述目标网页。在目标网页中加载一个块级元素作为iframe容器，将iframe元素装载在所述iframe容器中，所述iframe元素创建一个框架，然后将交互面板装载在该框架中，最后，根据交互面板的标题位置来加载一个目标块级元素并覆盖该标题上。所述目标块级元素和iframe容器均为归属于所述目标网页的元素，因此，当拖动操作作用于所述目标块级元素时，所述目标网页可以捕捉到该拖动操作触发的各个事件，进而根据拖动操作的滑动轨迹移动所述iframe容器。由于所述iframe元素是加载在所述iframe容器中，所述iframe元素会随所述iframe容器的位置变化而变化，即所述iframe元素会随所述iframe容器一起移动。交互面板内嵌在所述iframe元素的框架中，交互面板也随之移动。

在可选的实施例中，所述步骤S1106可以包括：

将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小与所述iframe元素的框架大小相同，所述目标大小的目标块级元素正对所述iframe元素的框架。

在可选的实施例中，所述步骤S1106还可以包括：

将所述目标块级元素从初始大小扩大到目标大小；

其中，所述目标大小的目标块级元素的上方区域部分伸出所述iframe元素的框架。

在可选的实施例中，所述方法还可以包括：

在所述交互面板的标题滚动到所述iframe元素的框架之外时，将所述目标块级元素设置隐藏。

实施例三

图13示意性示出了根据本申请实施例三的网页内的iframe元素拖动系统的框图，该网页内的iframe元素拖动系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。

如图13所示，该网页内的iframe元素拖动系统1300可以包括获取模块1310、第一响应模块1320、第二响应模块1330，其中：

获取模块1310，用于获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；

第一响应模块1320，用于响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

第二响应模块1330，用于响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

作为可选的实施例，所述系统还包括第三响应模块(未标识)，用于：

响应于跟随在所述拖动事件之后的释放事件，将所述目标块级元素恢复至初始大小。

3.根据权利要求1所述的网页内的iframe元素拖动方法，其特征在于：

所述iframe元素的框架内包括文档；

所述目标块级元素覆盖所述文档的标题；其中，所述目标块级元素的初始大小与所述标题的大小相适配，且所述初始大小的目标块级元素不覆盖所述文档的交互控件。

作为可选的实施例，所述获取模块1310还用于：

获取服务器提供的iframe配置信息，所述iframe配置信息包括iframe容器配置信息、iframe元素配置信息、文档信息，所述文档信息包括标题在所述iframe容器中的位置；

根据所述iframe容器配置信息，在所述目标网页上配置iframe容器；

根据所述iframe元素配置信息，在所述iframe容器中配置所述iframe元素；

根据所述文档信息，在所述iframe元素创建的框架内生成所述文档；

根据所述标题在所述iframe容器中的位置，配置所述目标块级元素；

其中，所述目标块级元素的显示属性为透明，且所述目标块级元素归属于所述目标网页。

作为可选的实施例，所述系统还包括设置(未标识)，用于：

在所述文档的标题滚动到所述iframe元素的框架之外时，将所述目标块级元素设置隐藏。

作为可选的实施例，所述第一响应模块1320还用于：

将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小与所述iframe元素的框架大小相同，所述目标大小的目标块级元素正对所述iframe元素的框架。

作为可选的实施例，所述第一响应模块1320还用于：

将所述目标块级元素从初始大小扩大到目标大小；

其中，所述目标大小的目标块级元素的上方区域部分伸出所述iframe元素的框架。

实施例四

图14示意性示出了根据本申请实施例四的网页内的iframe元素拖动系统的框图，该网页内的iframe元素拖动系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。

如图14所示，该网页内的iframe元素拖动系统1400可以包括第一展示模块1410、接收模块1420、第二展示模块1430、第一响应模块1440，以及第二响应模块1450，其中：

第一展示模块1410，用于在目标网页上展示目标直播间的视频直播画面；

接收模块1420，用于接收所述目标直播间在直播过程中提供的交互面板信息；

第二展示模块1430，用于根据所述交互面板信息，在所述目标网页中展示交互面板；其中，所述交互面板配置在iframe元素的框架中，且所述交互面板部分区域之上配置有目标块级元素；

第一响应模块1440，用于响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

第二响应模块1450，用于响应于跟随在所述下压事件之后的拖动事件，拖动所述iframe元素，以使所述交互面板随所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

实施例五

图15示意性示出了根据本申请实施例五的适于实现网页内的iframe元素拖动方法的计算机设备的硬件架构示意图。本实施例中，计算机设备10000也可以用于作为是观众终端4A或观众终端4A的组成部分。本实施例中，计算机设备10000是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备，例如，智能手机、平板电脑、电脑、车载终端、游戏机、虚拟设备等终端设备。

本实施例中，计算机设备10000是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。如图15所示，计算机设备10000至少包括但不限于：可通过系统总线相互通信链接存储器10010、处理器10020、网络接口10030。其中：

存储器10010至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器10010可以是计算机设备10000的内部存储模块，例如该计算机设备10000的硬盘或内存。在另一些实施例中，存储器10010也可以是计算机设备10000的外部存储设备，例如该计算机设备10000上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器10010还可以既包括计算机设备10000的内部存储模块也包括其外部存储设备。本实施例中，存储器10010通常用于存储安装于计算机设备10000的操作系统和各类应用软件，例如网页内的iframe元素拖动方法的程序代码等。此外，存储器10010还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器10020在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器10020通常用于控制计算机设备10000的总体操作，例如执行与计算机设备10000进行数据交互或者通信相关的控制和处理等。本实施例中，处理器10020用于运行存储器10010中存储的程序代码或者处理数据。

网络接口10030可包括无线网络接口或有线网络接口，该网络接口10030通常用于在计算机设备10000与其他计算机设备之间建立通信链接。例如，网络接口10030用于通过网络将计算机设备10000与外部终端相连，在计算机设备10000与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code Division Multiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图15仅示出了具有部件10010-10030的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器10010中的网页内的iframe元素拖动方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器10020)所执行，以完成本申请。

实施例六

本实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的网页内的iframe元素拖动方法的步骤。

本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中的网页内的iframe元素拖动方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。

显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围之内。

Claims (11)

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元素拖动方法，其特征在于，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：

将所述目标块级元素从初始大小扩大到目标大小；其中，所述目标大小与所述iframe元素的框架大小相同，所述目标大小的目标块级元素正对所述iframe元素的框架。

7.根据权利要求1至5任意一项所述的网页内的iframe元素拖动方法，其特征在于，所述响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小，包括：

将所述目标块级元素从初始大小扩大到目标大小；

其中，所述目标大小的目标块级元素的上方区域部分伸出所述iframe元素的框架。

8.一种网页内的iframe元素拖动系统，其特征在于，包括：

获取模块，用于获取目标网页中的iframe元素，所述iframe元素的框架内部分区域上配置有目标块级元素；

第一响应模块，用于响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

第二响应模块，用于响应于跟随在所述下压事件之后的拖动事件，对所述iframe元素进行拖动操作，以将所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

9.一种网页内的iframe元素拖动方法，其特征在于，包括：

在目标网页上展示目标直播间的视频直播画面；

接收所述目标直播间在直播过程中提供的交互面板信息；

根据所述交互面板信息，在所述目标网页中展示交互面板；其中，所述交互面板配置在iframe元素的框架中，且所述交互面板部分区域之上配置有目标块级元素；

响应于在所述目标块级元素上的下压事件，扩大所述目标块级元素的大小；

响应于跟随在所述下压事件之后的拖动事件，拖动所述iframe元素，以使所述交互面板随所述iframe元素从所述目标网页的第一位置移动到所述目标网页的第二位置。

10.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7或9任一项所述网页内的iframe元素拖动方法的步骤。

11.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行权利要求1至7或9任一项所述网页内的iframe元素拖动方法的步骤。

Images