《JavaScript高级程序设计》笔记:HTML5脚本编程(16)

跨文档消息传递

跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息。例如,www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。

XDM的核心是postMessage()方法。在HTML5规范中,除了XDM部分之外的其他部分也会提到这个方法名,但都是为了同一个目的:向另一个地方传递数据。对于XDM而言,“另一个地方”指的是包含在当前页面中的<iframe>元素,或者由当前页面弹出的窗口。

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”的<div>元素,可以用如下代码将它变成一个放置目标。

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”这样的字符串形式保存着数据类型。

 媒体元素

<audio>和<video>

posted @ 2019-03-05 21:50  风雨后见彩虹  阅读(...)  评论(... 编辑 收藏