CN102662600B

CN102662600B - 一种不同域名下文件相互拖拽的方法

Info

Publication number: CN102662600B
Application number: CN2012101292309A
Authority: CN
Inventors: 徐天工; 顾荣胜
Original assignee: YIZHONGYOU INFORMATION TECHNOLOGY Co Ltd BEIJING
Current assignee: YIZHONGYOU INFORMATION TECHNOLOGY Co Ltd BEIJING
Priority date: 2012-04-28
Filing date: 2012-04-28
Publication date: 2013-11-27
Anticipated expiration: 2032-04-28
Also published as: CN102662600A

Abstract

本发明涉及本一种不同域名下文件相互拖拽的方法；该方法通过判断游览器是否支持跨域数据通信，如果支持，则将鼠标按下网页元素绑定的数据传递到目标节点；如果不支持，则通过代理的方式将所述数据传递到目标节点窗口；本发明实现了在游览器中两个不同域名下的文件只要直接拖拽，即可完成相应的数据传递，可以广泛用在各开放平台中，给不同域名下的第三方应用直接提供通讯的技术基础，可以在不同的应用领域直接传递参数，调用函数，大大减少了繁琐的操作步骤，有效的降低了上传下载所消耗的流量带宽，提高了数据传输的效率。本发明可以应用于富客户端的internet应用中，帮助富客户端应用之间减少与服务端直接的通讯成本，从而降低运营成本，提高工作效率。

Description

一种不同域名下文件相互拖拽的方法

技术领域

本发明属于计算机网络信息传输领域，具体涉及一种不同域名下文件相互拖拽的方法；该方法通过跨域文件处理技术实现了在不同域名下文件相互拖拽。

背景技术

在日常的工作生活中，当你需要把几封E-MAIL电子邮件里面的附件经过筛选后，放到一封邮件中发给其他人时，你一般会这样做：打开每一封邮件，把需要发送的附件下载到本地硬盘。根据附件的容量大小，你需要等上几分钟甚至几十分钟才能下载完。然后，你需要新建一封邮件，再要几分甚至几十分钟把附件一一上传上去，然后写上正文后发送出去；带来的问题是时间长、操作复杂度，网络传输的开销大。

发明内容

本发明的目的是针对上述问题提出的一种不同域名下文件相互拖拽的方法技术方案，该方案通过跨域文件处理技术实现了在不同域名下文件相互拖拽。

为了实现上述目的，本发明的技术方案是：一种不同域名下文件相互拖拽的方法,从游览器中打开一个网页主页面窗口，在主页面窗口中至少再打开有一个子窗口，所述网页主页面窗口和子窗口之间不同域名，所述不同域名下文件相互拖拽的方法的步骤包括：

a.在窗口中侦听鼠标针对网页元素的按下事件，当按下事件发生时，记录鼠标按下的坐标位置,鼠标按下标志自动为真；

b.继续侦听鼠标按下窗口中文档的鼠标拖拽移动事件，同时判断鼠标按下标志是否继续为真，当鼠标按下标志不为真时，停止侦听窗口中文档的鼠标拖拽移动事件返回步骤a；

c.当鼠标按下标志继续为真时，判断是否有跨窗口鼠标拖拽事件发生；如果没有发生返回步骤b；

d.如果有发生，在主页面窗口创建一个遮罩，遮罩设置为透明，遮罩遮住主页面窗口中的子窗口，在主页面窗口中创建鼠标拖拽辅助对象；

e.循环判断鼠标拖拽辅助对象是否离开按下窗口进入另一个窗口中；

f.侦听辅助对象在另一窗口中的落入点，确定拖拽的目标节点，并把之前鼠标按下网页元素绑定的数据传递到目标节点；

其中，所述数据传递的过程包括：

g.判断所述游览器是否支持跨域数据通信；

h.如果支持，则将鼠标按下网页元素绑定的数据传递到目标节点；

i.如果不支持，则在所述前一窗口内创建一个代理窗口,所述代理窗口与目标节点窗口同域，将鼠标按下网页元素绑定的数据存放在代理窗口的name属性里，通过javascript变量或函数调用的方式将所述数据直接传递到目标节点窗口。

所述拖拽辅助对象图像表示的是鼠标按下子窗口中的所述鼠标拖拽对象。

所述步骤c中当鼠标按下标志继续为真时，所述方法进一步包括：记录当前鼠标位置坐标，当所述步骤a中鼠标按下的坐标位置与当前鼠标位置距离小于设定值时返回步骤a。

所述设定值是四个像素点或五个像素点或六个像素点。

所述判断所述游览器是否支持跨域数据通信是：判断游览器window.postMessage的值是否为未定义，如果是未定义则不支持跨域数据通信，如果不是未定义则为支持跨域数据通信；当支持跨域数据通信时：数据传递方调用数据接收方的window.postMessage方法传递数据内容。

本发明产生的有益效果是：本发明实现了在游览器中两个不同域名下的文件只要直接拖拽，即可完成相应的数据传递，可以广泛用在各开放平台中，给不同域名下的第三方应用直接提供通讯的技术基础，可以在不同的应用领域直接传递参数，调用函数，大大减少了繁琐的操作步骤，有效的降低了上传下载所消耗的流量带宽，提高了数据传输的效率。本发明还可以应用于富客户端的internet应用中，可以帮助富客户端应用之间减少与服务端直接的通讯成本，从而降低运营成本，提高工作效率。

下面结合附图实施例对本发明作一详细描述。

附图说明

图1为传统两个邮件附件传递方法示意图；

图2为两个不同域窗口示意图；

图3为代理方法数据传递窗口示意图1；

图4为代理方法数据传递窗口示意图2；

图5为消息方式数据传递窗口示意图；

图6为消息方式两个窗口函数传递示意图。

具体实施方式

一种不同域名下文件相互拖拽的方法,所述方法是基于网络游览器而实现的不同域名窗口下文件相互拖拽的方法，该方法首先在游览器中打开一个网页主页面窗口，在主页面窗口中至少再打开有一个子窗口，所述网页主页面窗口和子窗口之间不同域名，所述不同域名下文件相互拖拽的方法的步骤包括：

a.在网页主页面窗口中侦听鼠标针对网页元素的按下事件，当按下事件发生时，记录鼠标按下的坐标位置,鼠标按下标志自动为真；

其中，所述数据传递的过程包括：

g.判断所述游览器是否支持跨域数据通信；

实施例中，所述拖拽辅助对象图像代表了鼠标按下子窗口中的所述鼠标拖拽对象，其形状相同给人个感觉就是鼠标拖拽对象。

实施例中，所述步骤c中当鼠标按下标志继续为真时，所述方法进一步包括：记录当前鼠标位置坐标，当所述步骤a中鼠标按下的坐标位置与当前鼠标位置距离小于设定值时返回步骤a，其中所述设定值是四个像素点或五个像素点或六个像素点。

实施例中，所述判断所述游览器是否支持跨域数据通信是：判断游览器window.postMessage的值是否为未定义，如果是未定义则不支持跨域数据通信，如果不是未定义则为支持跨域数据通信；当支持跨域数据通信时：数据传递方调用数据接收方的window.postMessage方法传递数据内容。

以下是针对上述实施例的详细说明以及具体举例。

通常情况下，一个网页包含一个窗口对象(window)，窗口对象包含一个文档对象(document)，文档对象包含若干个html dom元素(node)。Node元素（也称节点）在某些情况下也嵌套其他window对象，比如frame或iframe节点。

一般的web页中的拖拽是在一个窗口文档内的操作，当需要在两个不同的窗口内拖拽的时候，甚至是两个不同的域名下窗口之间拖拽的时候就满足不了。因为不同的文档之间鼠标事件是没法传播的，其次不同域名下的窗口之间的javascript对象，变量，函数等是禁止互相访问的。如图1所示的两个不同域的窗口1和窗口2中，在窗口1中按下鼠标，拖住node到窗口2中的target时弹起鼠标按键完成拖拽操作。要做到这点，需要克服几个web标准的限制：

1. 不同文档内的dom对象是禁止引用或拷贝的。

2. 不同域名下的窗口都是一个独立的沙箱，里面的javascript变量，函数或对象是禁止访问的。要解决上面两个问题，首要任务接是要先解决掉跨域通信的问题。解决了跨域通信的问题后，就解决了第2点。有了第2点，我们就能以其他形式来替代dom对象的引用或拷贝。目前互联网中跨域通信一般指的是跨域获取远程数据的问题，并不是指跨域的javascript通信。而我们利用现有web标准，做到各个主流浏览器下，各主流版本的javascript跨域通信。

如何实现跨域的javascript通信，如图2所示，假设窗口A里面打开的是http://www.a.com/index.html 这个页面，这个页面下面有一个iframe 窗口B，窗口B里面打开的是 http://www.b.com/index.html 这个页面。很容易看出来，窗口B是作为窗口A的子窗口存在的。Javascript跨域通信要实现的就是，A窗口里面能访问到B窗口中的javascript函数、变量、对象等。B也能够访问到A窗口中的javascript函数、变量、对象等。

如果A和B同属一个域名下，可以直接互相访问，比如，窗口A中的变量var_a，窗口B中的变量var_b，窗口B中访问窗口A中的变量var_a时，可以这样表示：

parent.var_a

A中访问B中的变量var_b时，可以这样表示： frame_B.var_b 或frames[0].var_b

但是不同域名下这样调用的时候，一般会抛出异常：访问对象没有权限。解决这个问题的2种方案：

第一种是代理方式，它兼容所有的浏览器，但是通过代理以后，效率会有损失；第二种是利用窗口消息来通讯，但是他只能用于某些高版本浏览器中。所以在处理跨域通信时，首先判断浏览器是否支持第二种通信方式，如果不支持再用第一种代理模式。

作为代理方式，我们知道，在不同窗口之间，同域名下的窗口直接的变量是可以直接访问的。比如上面提到的 parent.var_a 这样的访问方式。如图3所示，我们现在想通过子窗口A（b.com）调用窗口A（a.com）中的函数，可以通过在B（b.com）窗口里创建一个子窗口C，C里面放的是a.com下的一个代理文件。C里面的javascript是可以直接通过parent.parent.function_1 这样的方式调用A（a.com）里面的函数 function_1 的。我们现在需要做的就是如何告诉C窗口，我们需要调用A窗口的哪个函数，传递哪些参数。

B窗口和C窗口也是属于不同域名下的，它们也没法直接互相访问里面的文档对象。但是，我们发现不管任何域名下，窗口本身的名字是可以互相访问的。所以我们可以通过window.name来传递信息。我们只需要把一定结构的字符串放到创建C窗口的iframe的name里面，在C的文档内，就可以通过window.name获取到iframe的name属性值。上图中，把控制信息X存放在iframe的那么属性里，C窗口的window.name获取到X以后，解开X的内容，里面包含了需要调用哪个窗口的参数target,和调用的函数名fun，参数params等信息。比如：

X= {target:”parent.parent”,fun:”function_1”,params:[“p1”, “p2”]}

窗口C在加载过程中分析X参数，然后根据X来调用指定窗口的指定函数。B窗口控制iframe，当iframe载入完成以后再清除掉C窗口。这样就完成了B窗口调用了A窗口中的函数function_1。

图3中只是调用了窗口A的函数，但是还没法获取到函数执行完的结果。要拿到结果，我们就必须把结果返回给子窗口。我们可以把结果作为窗口A一个参数，传给子窗口里面的函数。

假设窗口B里面的callback函数用来接受处理结果function_1执行的结果result。

如图4所示，A窗口调用B窗口函数过程如下：

首先创建一个跟B窗口同域的iframe窗口C,iframe的src的值设置为代理的url地址http://www.b.com/proxy.html ,iframe的name存放X，X为一个结构化的字符串，包含目标窗口，函数和参数信息，比如：

X= {target:”parent.frame_b”,fun:”callback”,params:[result]}

C窗口在加载过程中从window.name中获取到X值，解析出来target,fun,params等参数。然后通过 parent.frame_b.callback(params[0]) 调用窗口B中的callback函数，并把result传入callback函数中。

A窗口控制C窗口所在的iframe,当C载入完成以后，A窗口清理掉C窗口所在的iframe资源，调用完成。

作为窗口消息方式，某些浏览器可以通过window.postMessage来传递信息。经测试IE8+,firefox3+,opera,google chrome,safari等浏览器的主流版本都支持窗口消息传递技术。如图5所示，消息发送方调用接收窗口的postMessage方法，传递消息。接收窗口通过侦听onMessage事件来处理消息。比如：frame_b.postMessage(msg,’b.com’)；把msg发送给了B窗口。B窗口中侦听onMessage事件： window.onMessage= function(event) {var msg = event.data； //event.data就是消息内容，…}处理函数里面通过event.data就能获取到消息内容。有了这个基础，我们就能从不同的窗口互相调用函数了。

窗口B调用窗口A函数过程，如图6所示：窗口B中封装消息msg_b，其中包含表示函数名的参数fun,表示参数的params等信息，格式如下：

var msg_b = {target:”parent”, fun:”function_a”, params: [p1]}；

msg_b通过调用parent窗口的postMessage发送给窗口A。窗口A在onMessage中处理消息，通过event.data获取到msg_b的内容，解析出来函数名function_a和参数p1，调用A中的 function_a.apply(null, params);结果放到result中。跟第一种方案一样，如果需要返回参数给子窗口，则需要调用子窗口中的接收处理结果的函数。

窗口A调用窗口B过程：假设处理结果为result，A窗口需要调用B窗口中的function_b来返回刚才的处理结果。所以我们同样要封装类似的消息msg_a:var msg_a = { fun:”function_b”,params:[result]}

msg_a通过调用窗口B的postMessage方法发送给窗口B。B窗口在onMessage中处理消息，通过event.data获取到msg_a的内容，解析出来函数名 function_b和参数result。调用窗口B中的 function_b执行:function_b.apply(null, [result])。调用完成。

以下是一个具体实施例：

假设A窗口(主页面窗口)下打开有两个窗口B，C（两个子窗口），现在我们需要把B窗口里面的node1，拖拽出窗口B，放置到窗口C里面node2节点上。把窗口B中node1节点所绑定的数据传递到窗口C中的node2上。侦听窗口B中的node1节点的鼠标按下事件，当鼠标在node1按下时，记录按下的鼠标位置pos1(x1,y2)和鼠标按下的标记clickdown=true。侦听窗口B中document的鼠标移动事件，当鼠标按下时，在鼠标移动事件里计算当前鼠标位置pos2(x2,y2)跟鼠标按下的位置的距离，超出一个设定的值distance时，认为产生了拖拽事件,设定这个distance是为了防止鼠标点击的时候也当做拖拽事件来处理。同一个窗口内产生拖拽事件以后，我们应该产生一个辅助显示的对象，然后移动到目标节点上。这里如果在窗口B里创建辅助对象，是没法拖出窗口B的。所以我们只能在A窗口里模拟出辅助对象。这里我们首先需要通过窗口跨域通信技术来调用A窗口的startDraging函数来告诉A窗口已经产生拖拽事件了，需要创建辅助显示对象。我们还需要让辅助对象跟着鼠标移动，这时，需要侦听A窗口中document的鼠标移动事件。为了防止鼠标在B窗口移动时A窗口也能捕获到鼠标移动事件，我们还需要在A窗口创建透明的div遮罩。其步骤总结如下：

1. B窗口中侦听node1的mousedown事件，记录鼠标位置pos1,并设置标志clickdown=true；继续步骤2；

2. 侦听B窗口中document的mousemove事件，事件处理函数中，判断clickdown变量，当clickdown为false时，终止程序，当clickdown为true时，获取当前鼠标的位置pos2(x2,y2)，继续步骤3；

3. 计算pos2到pos1的距离l，判断l是否大于设定的distance,如果l小于distance，则终止程序，如果l大于distance，则继续步骤4；（其中的distance可以设定为几个像素点）

4. 利用窗口通信技术，通知A窗口产生跨窗口拖拽事件，并传递node1中绑定的拖拽数据，A窗口创建一个遮罩div，设置为透明，位置和大小盖住A整个窗口，这样鼠标怎么移动都满足在A窗口内，A窗口内创建拖拽辅助对象node2。继续步骤5；

5. 侦听A窗口中document的mousemove函数，在mousemove处理函数内，设置node2的位置，使其跟随鼠标。判断鼠标位置，是否落在某一个窗口内，比如C窗口内。如果没有落在窗口C内，则继续步骤10。如果落在窗口C内，记下当前窗口，currentWindow=C继续步骤6；

6. 用JAVASCRIPT跨域通信技术，通知C窗口当前的鼠标位置和需要找的目标，C窗口内根据鼠标位置，寻找能接受本次拖拽的目标节点target，这里我们判断鼠标的位置是在目标target的位置内，当鼠标位置在target范围内，我们标记当前的currentNode = target。鼠标移开target后，标记currentNode=null。当currentNode是null的时候，则继续步骤10，当currentNode不为null时，继续步骤7。

7. 侦听A窗口中document的mouseup事件，在mouseup处理事件内，如果currentWindow为空，则继续步骤10。如果currentWindow不为空，通知currentWindow标记的窗口C产生了mouseup事件，并把之前传入A窗口中的绑定数据data传入C窗口中，继续步骤8；

8. C窗口中，判断currentNode是否为空，如果currentNode为空，则继续步骤10。如果currentNode不会空，则通知A窗口，产生了drop事件，继续步骤9；

9. 处理C窗口中的drop事件，把绑定的拖拽数据传给自定义drop事件里，继续步骤10；

10.清理各窗口内各种之前设置的标记，变量，之前创建的拖拽辅助对象和遮罩层等等。

其中的JAVASCRIPT跨域通信实现原理是：假设网页窗口A里面打开了a域下的页面PageA，PageA中有一个帧(iframe或frame)B，B里面打开了b域下的页面PageB，B是作为A的子窗口存在的；Javascritp的跨域通信要实现的是：窗口A和窗口B中的javascript变量能够互相访问，如果A和B在同一个域名下，是可以直接访问的。不同域名下，一般会直接跑出异常：访问对象没有权限。

下面简要阐述下跨域通信的原理。

1. 通过游览器的window.postMessage来判断浏览器是否支持窗口消息通信，如果window.postMessage的值已经定义(不为undefined)，则进行步骤2，否则跳转到步骤5；

2. 浏览器支持窗口消息，消息接收方侦听窗口的onMessage事件;

3. 消息发送方调用消息接收方的window.postMessage方法传递消息内容；

4. 消息接收方的onMessage会被浏览器触发，在onMessage处理函数中获取传来的消息内容，消息传递过程结束;

5. 如果浏览器不支持窗口消息，则需要借助一个代理来转发消息，消息发送方在自己的窗口内创建一个临时的帧（iframe或frame）,这个帧页面打开一个跟接收方窗口同域的页面，利用这个页面来做代理转发消息给接收方；

6. 把要传递的消息存放在临时创建的代理帧的name属性里(<iframe name=”msg” …);

7. 代理帧窗口侦听窗口的onload事件；

8. 代理帧窗口加载完成时，触发onload事件，在onload事件处理过程中，通过window.name获取到要转发的消息，（由于代理帧和接收方窗口是同域的，所以它是可以直接访问接收方的任何变量）;

9. 代理帧把消息通过javascript变量或函数调用的方式直接传递给接收方窗口；

10. 删除掉临时创建的代理帧，消息传递结束。

通过以上的处理，我们就可以处理跨域的javascript函数调用了。

A调用B窗口函数，需要A把参数和函数名传递给B，B执行完结果，再把结果传回给A。

Claims

1.一种不同域名下文件相互拖拽的方法,从游览器中打开一个网页主页面窗口，在主页面窗口中至少再打开有一个子窗口，所述网页主页面窗口和子窗口之间不同域名，其特征在于，所述不同域名下文件相互拖拽的方法的步骤包括：

其中，所述数据传递的过程包括：

g.判断所述游览器是否支持跨域数据通信；

i.如果不支持，则在前一窗口内创建一个代理窗口,所述代理窗口与目标节点窗口同域，将鼠标按下网页元素绑定的数据存放在代理窗口的name属性里，通过javascript变量或函数调用的方式将所述数据直接传递到目标节点窗口；

2.根据权利要求1所述的一种不同域名下文件相互拖拽的方法，其特征在于，所述拖拽辅助对象图像表示的是鼠标按下子窗口中的所述鼠标拖拽对象。

3.根据权利要求1所述的一种不同域名下文件相互拖拽的方法，其特征在于，所述步骤c中当鼠标按下标志继续为真时，所述方法进一步包括：记录当前鼠标位置坐标，当所述步骤a中鼠标按下的坐标位置与当前鼠标位置距离小于设定值时返回步骤a。

4.根据权利要求3所述的一种不同域名下文件相互拖拽的方法，其特征在于，所述设定值是四个像素点或五个像素点或六个像素点。