JS高级程序设计第十六章.个人学习笔记

HTML脚本编程

1.跨文档消息传递

postMessage（）方法接受两个参数，一个消息和一个表示消息接收方来自哪个域的字符串。

例如：

var iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage('a secret','http://www.wrox.com');

接收到XDM消息时，会触发window对象的message事件。这个事件是以异步形式触发的，因此从发送消息到接收消息（触发接受窗口的message事件）可能要经过一段时间的延迟。触发message事件后，传递给onmessage处理程序的事件对象包含以下三个方面的重要信息。

data：作为postMessage（）第一个参数传入的字符串数据。
origin：发送消息的文档所在的域，例如‘http://www.wrox.com’。
source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage（）方法。如果发送消息的窗口来自同一个域，那这个对象就是window。

接收到消息后验证发送窗口的来源是至关重要的。就像给postMessage（）方法指定第二个参数，以确保浏览器不会把消息发送个未知页面一样，在onmessage处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下：

EventUtil.addHandLer(window,'messgae',function(event){
    //确保发送消息的域是已知的域
    if(event.origin == 'http://www.wrox.com'){
        //处理接收到的数据
        processMessage(event.data);
        //可选：向来源窗口发送回执
        event.source.postMessgae('Reveived!','http://p2p.wrox.com');
    }
});

2.原生拖放

2.1拖放事件

拖动元素时，逐次触发下列事件：

1.dragstart
2.drag
3.dragend

当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：

1.dragenter
2.dragover
3.dragleave 或 drop

三个事件的目标都是作为放置目标的元素。

如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生drop事件

2.3 dataTransfer对象

dataTransfer是对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在对象处理程序中，可以使用这个对象的属性和方法来完善拖放功能。

dataTransfer对象有两个主要方法：getData（）和setData（）。

setData的第一个参数是参数的名字，第二个参数是参数的值
getData只有一个参数 就是参数的名字

dataTransfer有两个属性：dropEffect和effectAllowed

dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。

none：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
move：应该把拖动的元素移动到放置目标
copy：应该把拖动的元素复制到放置目标
link:表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。

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属性

可以在html元素上设置draggable属性为true让元素可以被拖动

addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而相应回调的对象），不会影响拖动操作时页面元素的外观。
clearData(format):清楚以特定个事保存的数据。
setDragImage(element,x,y):指定一副图像，当发生拖动时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素可以是一幅图像，也可以是其他元素。是图像则显示图像，是其他元素则显示渲染后的元素。
types:当前保存的数据类型。这是一个类似数组的集合，以text这样的字符串形式保存着的数据类型。

3.媒体元素

viedeo和audio的属性、介绍、事件在487介绍