学习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属性可表示元素是否可以拖动
媒体元素
<audio>和<video>标签可让开发人员不必依赖任何插件就能在网页中嵌入浏览器的音频和视频内容。
<audio> 标签属性:
src:音乐的URL
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制
<video> 标签属性:
src:视频的URL
poster:视频封面,没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
1:使用<audio>和<video>标签的play()和pause()方法,可手动控制媒体文件的播放
2:两个元素都由canPlayType()方法,该方法接收一种格式/编解码器字符串。返回值是"probably","maybe"或" "(空字符串)。空字符串是false值,因此可这样使用canPlayType();
if(audio.cnaPlayType("audio/mpeg")){
//进一步处理
}
"probably"和"maybe"都是真值,因此可在if语句的条件测试中转换为true。
16.4历史状态管理
通过hashchange事件,可以监听URL参数(#后面的字符串)什么时候发生变化。
history.pushState()方法可接收三个参数:状态对象,新状态的标题和可选的相对URL。