HTML5脚本编程

本章感觉有点没见过

跨文档消息传递（XDM）

指在来自不同页面间的传递消息，如www.baidu.com和www.taobao.com这两个不同页面间。

postMessage()方法为XDM的核心方法，表示的是向另一个地方传递消息，就是说在本页中的< iframe > 元素中，或由当前页面弹出的窗口。

postMessage() 接收两参数，一条消息和一个来自哪儿的字符串。

例子：
let iframeWin = document.getElementById('myframe').contentWindow;
iframeWin.postMessage('hello','www.zheli.com');

第二个参数可为：*，表示可以把消息发给来自任何域的文档，不推荐使用。

接收XDM消息时，会触发window对象的message事件（异步触发）

我们必须保证浏览器不会把消息发给未知页面，所以我们要写一个检测模式：

EventUtil.addHandler(window,'message',(event)=>{
	//onmessage事件内...
	//保证发送消息的域是已知的域
	if(event.origin == 'www.zheli.com'){
		//处理收到数据
		processMessage(event.data);
		//向来源页面发送回馈
		event.soure.postMessage('received','www.zheli.com');
	}
})

注：
postMessage()的第一参数最早是只能传字符串的，但是现在有些浏览器实现了可传任何数据结构，但是还是有些浏览器没有实现，我们可以通过JSON.stringify()先转为字符串，然后再onmessage事件中用JSON.parse()处理过来。

原生拖放

首先托放时，它会触发拖放事件，比如说拖放某个元素时，会依次触发的事件为：（1）dragstart（2）drag（3）dragend

细节：
1、按下鼠标并开始移动鼠标时，会在被拖放的元素上触发dragstart事件，我们可以通过ondragstart事件来处理拖动开始时有哪些事要做。
2、触发dragstart事件后，随即会触发drag事件，而且在移动过程中会持续触发。
3、当拖动停止时会触发dragend事件，这里的停止包含有效的放置位置和无效的放置位置

拖放到有效位置时会发生什么呢？

会触发3事件
1、dragenter ----------- 只要有元素被拖动到放置目标上，就会触发。
2、dragover ----------- 当触发dragenter事件紧随其后执行该事件。只要在目标范围内就会持续执行。
3、dragleave --------- 只要出来目标范围dragover不触发，但会触发该事件，注：如果元素被放到了目标中，则会触发drop事件而不是dragleave事件。

但是有些时候会遇到元素默认不允许放置的情况，这时候我们可以重写dragenter和dragover事件的默认行为。

let target = document....
EventUtil.addHandler(target,'dragover',event=>{
	EventUtil.preventDefault(event);
});
EventUtil.addHandler(target,'dragenter'event=>{
	EventUtil.preventDefault(event);
})

有些时候默认行为是打开目标上的URL，那么我们还要取消drop事件，阻止打开URL

EventUtil.addHandler(target,'drop',event=>{
	EventUtil.preventDefault(event);
})

假如我们要在拖放时传数据咋办呢？有了

dataTransfer对象
主要有两方法：getData()、setData()
在HTML5努力下支持了各种MIME类型。

不过保存在dataTransfer对象中的数据只能在drop事件中读取，如果没有读取到，说明已经销毁或数据丢失。
可以很简单想到，当我们通过拖动文本时，会调用setData()方法，文本以“text”格式保存在dataTransfer对象中，拖动图片时也是一样的，把URL保存，我们可以在getData（）中得到并进行处理。

//使用例子：
event.dataTransfer.setData('text','some text');
let text = event.dataTransfer.getData('text');

那我们咋个知道在拖放过程中拖放的元素做了什么操作呢？

我们可以访问dataTransfer对象中的dropeffect 和 effectAllowed。

那咋个让元素变为可拖动元素？

<div draggable="true">...</div>  
//ok

哎呀！我老是记不住这两个元素

< video > 视频 和 < audio > 音频

我们一般在写网页时都会自定义这两个播放器，很少使用自带的。

说一下触发事件：

事件	触发时机
abort	下载中断
canplay	可以播放时；readyState值为2
canplaythrough	播放可继续，且不会中断，readyState === 3
canshowcurrentframe	当前贴已经下载完成；readyState === 1
dataunavailable	因为没有数据而不能播放；readyState=== 0
durationchange	duration属性的值的改变
emptied	网络连接关闭
empty	发生错误阻止了媒体下载
ended	媒体已播放到末尾，播放停止
pause	播放已停止
play	开始播放
progress	正在下载
ratechange	播放媒体的速度改变
seeked	搜索结果
stalled	浏览器尝试下载，但未接收到数据
timeupdate	currentTime被以不合理或意外方式更新
volumechange	volume属性值或muted属性值已改变
waiting	播放暂停，等待下载更多数据

over~