跨文档消息传递
跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息。例如,www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。
XDM的核心是postMessage()方法。在HTML5规范中,除了XDM部分之外的其他部分也会提到这个方法名,但都是为了同一个目的:向另一个地方传递数据。对于XDM而言,“另一个地方”指的是包含在当前页面中的
postMessage()方法接收两个参数:一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。
//注意所有支持XDM的浏览器也支持iframe的contentWindow属性 var iframeWindow = document.getElementById("myframe").contentWindow; iframeWindow.postMessage("A secret","http://www.wrox.com");
最后一行代码尝试向内嵌框架中发送一条消息,并指定框架中的文档必须来源于http:www.wrox.com域。如果来源匹配,消息会传递到内嵌框架中;否则,postMessage()什么也不做。如果传给postMessage()的第二个参数是“*”,则表示可以把消息发送给来自任何域的文档,但我们不推荐这样做。
接收到XDM消息时,会触发window对象的message事件。这个事件是以异步形式触发的,因此,从发送消息到接收消息(触发接收窗口的message事件)可能要经过一段时间的延迟。触发message事件后,传递给onmessage处理程序的事件对象包含以下三方面的重要信息。
- data:作为postMessage()第一个参数传入的字符串数据。
- origin:发送消息的文档所在的域,例如"http://www.wrox.com"。
- source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域,那这个对象就是window。
window.addEventListener("message",function(event){ if(event.origin == 'http://www.wrox.com'){ //处理接收到的数据 processMessage(event.data); //可选:向来源窗口发送回执 event.source.postMessage("Received!","http://p2p.wrox.com"); } },false);
XDM还有一些怪异之处。postMessage()的第一个参数最早是作为“永远都是字符串来实现的”,但后来改变了可以使用任意结构了。并非所有浏览器都支持任意结构,所以最好还是传入字符串,即在要传递数据之前调用JSON.stringify()方法,然后在onmessage事件处理程序中调用JSON.parse()。
原生拖放
拖动事件
拖动某元素时,将依次触发下列事件:
- (1)dragstart
- (2)drag
- (3)dragend
上述三个事件的目标都是被拖动的元素。
当某个元素被拖动到一个有效的放置目标上时,下列事件会依次执行:
(1)dragenter
(2)dragover
(2)dragleave或drop
只要有元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件,而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。如果元素被拖出了放置目标,dragover事件就不再发生,但会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中,则会触发drop事件而不是dragleave事件。上述三个事件的目标都是作为放置目标的元素。
自定义放置目标
在拖动元素经过某些无效放置目标时,可以看到一种特殊的光标(圆环中有一条反斜线),表示不能放置。虽然所有元素都支持放置目标事件,但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论用户如果操作,都不会发生drop事件。不过,你可以把任何元素变成有效的放置目标,方法是重写dragenter和dragover事件的默认行为。例如,假设有一个ID为“droptarget”的
var droptarget = document.getElementById("droptarget"); EventUtil.addHandler(droptarget,"dragover",function(){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"dragenter",function(){ EventUtil.preventDefault(event);
以上代码执行后,你就会发现当拖动着元素移动到放置目标上时,光标变成了允许放置的符号。当然,释放鼠标也会触发drop事件。
在Firefox3.5中,放置事件的默认行为是打开被放到放置目标上的URL。换句话说,如果是把图像拖动到放置目标上,页面就会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误。因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL:
EventUtil.addHandler(droptarget,"drop",function(){ EventUtil.preventDefault(event); });
dataTransfer对象
dataTransfer对象是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。因为他是事件对象的属性,所以只能在拖动事件的事件处理程序中访问dataTransfer对象。
dataTransfer对象有两个主要的方法:getData()和setData()。getData()可以取得由setData()保存的值。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是一个字符串,表示保存的数据类型,取值为“text”或“URL”,如下代码:
//设置和接收文本数据 event.dataTransfer.setData("text","some text"); var text = event.dataTransfer.getData("text"); //设置和接收url event.dataTransfer.setData("URL","http://www.wrox.com/"); var url = event.dataTransfer.getData("URL");
IE只定义了“text”和“URL”两种有效的数据类型,而HTML5则对此加以扩展,允许指定各种MIME类型。考虑到向后兼容,HTML5也支持“text”和“URL”,但这两种类型会被映射为“text/plain”和“text/url-list”。
实际上,dataTransfer对象可以为每种MIME类型都保存一个值。换句话说,同时在这个对象中保存一段文本和一个URL不会有任何问题。不过,保存在dataTransfer对象的数据只能在drop事件处理程序中读取。如果在ondrop处理程序中没有读到数据,那就是dataTransfer对象已经被被销毁了,数据也丢失了。
Firfox在其第五个版本之前不能将"URL"和“text”映射为“text/url-list”和“text/plain”,但却能把“Text”映射为“text/plain”,为了更好的兼容浏览器,可使用如下代码:
var dataTransfer = event.dataTransfer; //读取URL var url = dataTransfer.getData('url') || dataTransfer.getData("text/url-list"); //读取文本 var text = dataTransfer.getData("Text");
注意:一定要把短数据类型放到前面,因为IE10以及之前的版本不支持扩展的MIME类型,而他们在遇到无法识别的数据类型时,会抛出错误。
dropEffect和effectAllowed
其中,通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有4个可能的值。
- none:不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
- move:应该把拖动的元素移动到放置目标。
- copy:应该把拖动的元素复制到放置目标。
- link:表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接,有URL)。
要使用dropEffect属性,必须在ondragenter事件处理程序中针对放置目标来设置它。
dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect。effectAllowed属性有以下可能的值:
- uninitialized:没有给被拖动的元素设置任何放置行为。
- none:被拖动的元素不能有任何行为。
- copy:只允许值为“copy”的dropEffect。
- link:只允许值为“link”的dropEffect。
- move:只允许值为“move”的dropEffect。
- copyLink:只允许值为“copy”和“link”的dropEffect。
- copyMove:只允许值为“copy”和“move”的dropEffect。
- linkMove:只允许值为“link”和“move”的dropEffect。
- all:允许任意的dropEffect。
必须在ondragstart事件处理程序中设置effectAllowed属性。
可拖动
默认情况下,图像、链接、文本是可以拖动的,文本只有在被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动。
让其它元素可以拖动,HTML5为所有的HTML元素规定了一个draggable属性。
<img src="images/avatar.png" draggable="false"/> <div draggable="true">可拖动的元素div>
其它成员
HTML5规范规定dataTransfer对象还有下列属性和方法:
- addElement(element):为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象),不会影响拖动操作时页面元素的外观。
- clearData(format):清除以特定格式保存的数据。
- setDragImage(element,x,y):指定一副图像,当拖动发生时,显示在光标下方。这个方法接收的三个参数分别为要显示的HTML元素和光标在图像中的x、y坐标。其中,HTML元素可以是一副图像,也可以是其它元素。
- types:当前保存的数据类型。这是一个类似数组的集合,以“text”这样的字符串形式保存着数据类型。