一、跨文档消息传递（XDM）
1.发送消息
postMessage(msg,domain)用于发送跨文档消息。第一个参数是要传递的消息内容，第二个参数表示接收方来自哪个域。第二个参数有助于提高安全性，如果发现域不匹配则不会进行操作。
2.接收消息
接收到消息时，会触发window对象的message事件。传递给onmessage事件处理程序的对象主要包含三个信息：
- data:对应postMessage()第一个参数传入的内容；
- origin：发送消息的文档所在域。接收到消息后，检测消息来源是非常重要的步骤。
- source：发送消息的文档的window对象代理。
实例：
outer.html：
inner.html：
//接收外层主窗体发送的消息 EventUtil.addHandler(window, 'message', function (event) { msg.innerHTML = event.data; }); var submit=document.getElementById("submit"); //向外层主窗体发送消息 EventUtil.addHandler(submit,'click',function(event){ if (parent.postMessage) { var input = document.getElementById('input').value; parent.postMessage(input, '*'); } else { alert('do not support postMessage'); } }); 二、拖放
1. 拖放事件
被拖动元素会依次触发以下事件：
- dragstart：按下鼠标键并开始移动时触发；
- drag：在元素被拖动期间会持续触发该事件；
- dragend：拖动停止时触发。
当元素拖动到一个目标元素时，会依次触发以下事件：
- dragenter：元素被拖动到目标元素上时触发。
- dragover:被拖动的元素在目标元素范围内移动时会持续触发。
- dragleave或drop:当被拖动元素离开目标元素时触发dragleave。如果元素放到了目标元素中，则触发drop而不在触发dragleave。
虽然大多数元素支持拖放的目标元素事件，但是这些元素默认是不允许放置的。所以要使用preventDefault()取消这些元素的默认事件。
2.dataTransfer对象
dataTransfer对象是事件对象的一个属性，用于从被拖动的元素向目标元素传递字符串类型的数据。保存在dataTransfer对象中的数据只能在ondrop事件中读取。几个常用方法：
- setData(type,value)：设置用来设置数据。第一个参数是“Text”或者“url”，第二个参数是字符串类型的数据。text和url类型还是略有区别的，如果将数据保存为url，那么浏览器会把它当作网页中的链接。如果将其拖放到浏览器窗口中，浏览器就会打开该链接。
- getData(type)：参数type是"Text"或“url”，与set中的设置保持一致。
- setDragImage(target,x,y)：指定一幅图像，当拖动发生时，显示在光标下方。
3.可拖放
默认情况下，图像、文本等是可以拖动的，大多数其他元素不能拖动。如果想让某个元素可拖动，只需设置draggable=true即可。
三、媒体元素
1.音频和视频控件
2.常用属性
autoplay:布尔型，设置是否自动播放。
controls：布尔型，用来设置浏览器中的自带控件是否显示。
currentSrc：当前播放的媒体文件url。
duration：媒体的总播放时间。
currentTime：当前已经播放的秒数。
loop：布尔型，媒体是否自动循环播放。
plaused：媒体播放器是否暂停。
src：媒体文件的来源。
0/ 0
3.Audio类型
<audio>元素有对应的构造函数Audio。其实不必将Audio插入到文档中，在创建Audio实例后就开始下载指定文件，下载完成后，调用play()方法就可以开始播放。