2019-11-24

学习JavaScript第十六章

1：跨文档信息传递

跨文档信息传递又被称为XDM,其核心方法是postMessage（）方法。
postMessage（）方法接收两个参数
一条信息和一条表示信息接收方来自哪个域的字符串

2：原生拖放

16.2.1拖动事件

1：拖动某元素时，将依次触发下列事件：

dragstart
drag
dragend
当某个元素被拖动到某个有效的位置目标上时，将依次触发下列事件：
1：dragenter
2：dragover
3：dragleave或drop

16.2.2自定义放置目标

当拖动元素经过不允许放置的目标时，不会发生drop事件。不过你可以重写dragenter和dragover事件的默认行为，把任何元素变成有效的放置元素。

16.2.3dataTransfer对象

dataTransfer（）对象用于从被拖动目标向所放置目标传递字符串格式的数据
dataTransfer（）对象有两种方法：
getData（）和setData（）
getData（）方法可以取得由setData方法保存的值。

16.2.4dropEffect与effectAllowed

通过dropEffect属性可以知道被拖动元素能执行哪种放置行为。
dropEffect属性只有搭配effectAllowed属性才能才能用。effectAllowed元素表示允许拖动元素的哪种dropEffect

16.2.5可拖动

draggable属性可表示元素是否可以拖动

媒体元素

src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

1：使用
2：两个元素都由canPlayType（）方法，该方法接收一种格式/编解码器字符串。返回值是"probably","maybe"或" "（空字符串）。空字符串是false值，因此可这样使用canPlayType（）；

if(audio.cnaPlayType("audio/mpeg")){
//进一步处理
}

"probably"和"maybe"都是真值，因此可在if语句的条件测试中转换为true。

16.4历史状态管理

通过hashchange事件，可以监听URL参数（#后面的字符串）什么时候发生变化。
history.pushState（）方法可接收三个参数：状态对象，新状态的标题和可选的相对URL。