一种用于实现跨域拖动的方法、系统和装置制造方法及图纸

本发明专利技术实施例公开了一种用于实现跨域拖动的方法、系统和装置。该方法包括：内嵌框架(iframe)元素所在域监听拖动该iframe元素的事件，监听到拖动该iframe元素的事件后，向嵌入有该iframe元素的frame所在域发送跨域请求；嵌入有该iframe元素的frame所在域接收到所述跨域请求后，获取该iframe元素的拖动位置信息，根据所述拖动位置信息，执行对所述iframe元素的拖动。应用本发明专利技术能够便于对嵌入在frame中的iframe元素进行拖动。

【技术实现步骤摘要】
一种用于实现跨域拖动的方法、系统和装置
本专利技术涉及计算机
，尤其涉及一种用于实现跨域拖动的方法、系统和装置。
技术介绍
内嵌框架(iframe)元素，也可以称之为文档中的文档，或者浮动的框架(frame)，嵌入在另一frmae中，比如，在页面上显示为嵌在该页面中的框架、或嵌在该页面中的另一页面。在实际应用中，常常需要对嵌入在一frame中的iframe进行拖动，例如，在页面A中嵌入有页面B，通过点击页面B中的内容，希望产生页面B在页面A中整体被拖动的效果。当iframe元素与嵌入有该iframe元素的frame属于同一个域时，可以由该域监听该iframe元素的事件，从而获取到鼠标属性，进而控制iframe元素的窗口位置，从而实现在该frame中拖动该iframe元素。然而，当需要在开放平台中容纳海量的外部应用时，出于安全性的考虑，开放平台页面与外部应用页面常常属于不同的域，换言之，在开放平台中，iframe元素与嵌入有该iframe元素的frame，常常属于不同的域，可以将嵌入有iframe元素的frame所在的域称为主域，将该iframe元素所在的域称为子域。由于权限的限制，在一个域名下执行的命令，无法和另一个域名下的页面产生交互，而iframe与其所在的frame属于不同的域，因此，当用户点击iframe中的内容并执行拖动操作时，由于嵌入有该iframe的frame无法获取到该iframe所在域下的拖动命令，因此无法在frame中对iframe进行拖动，即无法进行跨域拖动。
技术实现思路
有鉴于此，本专利技术提供了一种用于实现跨域拖动的方法、系统和装置，以便对嵌入在frame中的iframe元素进行拖动。本专利技术的技术方案具体是这样实现的：一种用于实现跨域拖动的方法，该方法包括：内嵌框架(iframe)元素所在域监听拖动该iframe元素的事件，监听到拖动该iframe元素的事件后，向嵌入有该iframe元素的frame所在域发送跨域请求；嵌入有该iframe元素的frame所在域接收到所述跨域请求后，获取该iframe元素的拖动位置信息，根据所述拖动位置信息，执行对所述iframe元素的拖动。一种用于实现跨域拖动的系统，该系统包括iframe模块和frame模块，所述iframe模块嵌入在所述frame模块中，所述iframe模块，用于监听拖动该iframe模块的事件，监听到拖动该iframe模块的事件后，向嵌入有该iframe模块的frame模块发送跨域请求；所述frame模块，用于接收到所述跨域请求后，获取所述iframe模块的拖动位置信息，根据所述拖动位置信息，执行对所述iframe模块的拖动。一种用于实现跨域拖动的装置，所述装置包括监听模块和发送模块；所述监听模块，用于监听拖动iframe元素的事件；所述发送模块，用于在所述监听模块监听到拖动iframe元素的事件后，向嵌入有该iframe元素的frame发送跨域请求。一种用于实现跨域拖动的装置，该装置包括接收模块、位置信息获取模块和拖动模块；所述接收模块，用于接收iframe元素被拖动的跨域请求，其中，所述跨域请求由所述iframe元素所在域发送；所述位置信息获取模块，用于先隐藏所述iframe元素，生成透明遮罩，利用所述透明遮罩覆盖所述iframe元素，然后再显示所述iframe元素，接收拖动所述iframe元素的事件响应信息，根据所述事件响应信息获取所述iframe元素的拖动位置信息，将所述拖动位置信息通过参数传递给所述拖动模块；其中，所述透明遮罩的尺寸不小于所述iframe元素的尺寸；所述拖动模块，用于根据所述拖动位置信息，执行对所述iframe元素的拖动。由上述技术方案可见，本专利技术由iframe元素监听自身被拖动的事件，通过跨域请求向嵌入有该iframe元素的frame所在域报告该iframe元素被拖动的事件，嵌入有该iframe元素的frame所在域在接收到所述跨域请求后，获取该iframe元素的拖动位置信息，根据所述拖动位置信息执行对所述iframe元素的拖动。可见，应用本专利技术，便于实现对嵌入在frame中的iframe元素进行拖动。附图说明图1是本专利技术提供的用于实现跨域拖动的方法流程图。图2是本专利技术提供的用于实现跨域拖动的系统组成示意图。图3是本专利技术提供的用于实现跨域拖动的第一装置结构图。图4是本专利技术提供的用于实现跨域拖动的第二装置结构图。具体实施方式图1是本专利技术提供的用于实现跨域拖动的方法流程图。如图1所示，该方法包括：步骤101，iframe元素所在域监听拖动该iframe元素的事件。步骤102，iframe元素所在域监听到拖动该iframe元素的事件后，向嵌入有该iframe元素的frame所在域发送跨域请求。本步骤中，iframe元素所在域通过发送跨域请求向嵌入有该iframe元素的frame所在域报告该iframe元素被拖动的事件。其中，可以采用现有技术发送跨域请求，例如，可以利用html5的postMessage低级浏览器嵌套多层iframe元素的形式发送跨域请求。步骤103，嵌入有该iframe元素的frame所在域接收到所述跨域请求后，获取该iframe元素的拖动位置信息，根据所述拖动位置信息，执行对所述iframe元素的拖动。由于iframe元素与嵌入有该iframe元素的frame属于不同的域，按照目前不同域之间的权限限制，嵌入有该iframe元素的frame无法直接获取到该iframe所在域下的拖动命令，因此，本专利技术针对嵌入有该iframe元素的frame如何获取到iframe元素的拖动位置信息，提供了以下方法：方法一，嵌入有iframe元素的frame所在域，首先隐藏所述iframe元素，生成透明遮罩，利用所述透明遮罩覆盖所述iframe元素，然后再显示所述iframe元素；由于透明遮罩需要覆盖所述iframe元素，因此，所述透明遮罩的尺寸应不小于所述iframe元素的尺寸，通常等于所述iframe元素的尺寸。隐藏iframe元素并利用透明遮罩覆盖所述iframe元素后，在该iframe元素上的鼠标事件或触摸事件就可以顺利出来到嵌入有该iframe元素的frame所在域了，即嵌入有该iframe元素的frame所在域能够接收到该iframe元素上的鼠标事件响应信息或触摸事件响应信息，因此，嵌入有该iframe元素的frame能够根据所述鼠标事件响应信息或触摸事件响应信息获取到所述iframe元素的拖动位置信息。本专利技术通过先隐藏iframe元素，再利用透明遮罩覆盖该iframe元素，然后再显示所述iframe元素，使得用户在视觉上察觉不到对iframe元素的这些操作，这样，当嵌入有iframe元素的frame所在域根据获得的鼠标事件响应信息或触摸事件响应信息对该iframe元素进行拖动时，显示的就是iframe元素整体被拖动的效果。其中，在个人电脑(PC)机上，通常通过鼠标进行跨域拖动，则所述事件响应信息为鼠标事件响应信息，而在手机、手持电脑等移动终端上，通常通过触摸屏进行跨域拖动，则所述事件响应信息为触摸事件响应信息。下面以鼠标事件响应信息为例，对根据事件响应信息获取拖动位置信息的方法进行本文档来自技高网...

【技术保护点】
一种用于实现跨域拖动的方法，其特征在于，该方法包括：内嵌框架(iframe)元素所在域监听拖动该iframe元素的事件，监听到拖动该iframe元素的事件后，向嵌入有该iframe元素的frame所在域发送跨域请求；嵌入有该iframe元素的frame所在域接收到所述跨域请求后，获取该iframe元素的拖动位置信息，根据所述拖动位置信息，执行对所述iframe元素的拖动。

【技术特征摘要】
1.一种用于实现跨域拖动的方法，其特征在于，该方法包括：内嵌框架iframe元素所在域监听拖动该iframe元素的事件，监听到拖动该iframe元素的事件后，向嵌入有该iframe元素的frame所在域发送跨域请求；嵌入有该iframe元素的frame所在域接收到所述跨域请求后，获取该iframe元素的拖动位置信息，根据所述拖动位置信息，执行对所述iframe元素的拖动；所述获取该iframe元素的拖动位置信息包括：先隐藏所述iframe元素，嵌入有所述iframe元素的frame所在域生成透明遮罩，利用所述透明遮罩覆盖所述iframe元素，然后再显示所述iframe元素；嵌入有所述iframe元素的frame所在域接收拖动所述iframe元素的事件响应信息，根据所述事件响应信息获取所述iframe元素的拖动位置信息；其中，所述透明遮罩的尺寸不小于所述iframe元素的尺寸。2.根据权利要求1所述的方法，其特征在于，根据所述事件响应信息获取所述iframe元素的拖动位置信息包括：嵌入有所述iframe元素的frame所在域将首次移动的事件伪造成点击事件，从而获得拖动位置的初始位置信息；根据所述拖动位置信息，执行对所述iframe元素的拖动包括：将拖动位置信息通过参数传递给执行拖动的模块，执行拖动的模块从所述初始位置开始，根据拖动位置信息，执行拖动操作。3.根据权利要求1或2所述的方法，其特征在于，所述事件响应信息包括鼠标事件响应信息、或触摸事件响应信息。4.一种用于实现跨域拖动的系统，其特征在于，该系统包括iframe模块和frame模块，所述iframe模块嵌入在所述frame模块中，所述iframe模块，用于监听拖动该iframe模块的事件，监听到拖动该iframe模块的事件后，向嵌入有该iframe模块的frame模块发送跨域请求；所述frame模块，用于接收到所述跨域请求后，先隐藏所述iframe模块，生成透明遮罩，利用所述透明遮罩覆盖所述iframe模块，然后再显示所述iframe模块，接收拖动所述iframe模块的事件响应信息，根据所述事件响应信息获取所述iframe模块的拖动位置信息，根据所述拖动位置信息，执行对所述iframe模块的拖动；其中，所述透明遮罩...

【专利技术属性】
技术研发人员：林挺，钟雨欢，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：