跨文档消息传输 cross-document messaging 简称XDM
在不同域的页面间传递消息
核心是postMessage(data,origin)
data最好为字符串 JSON.stringify() 然后事件处理时JSON.parse()
原生拖放
拖放事件
拖动某元素依次发生 dragstart/drag/dragend
某个元素拖放到一个有效的目标是时 依次发生dragenter/dragover/dragleave(drop)
dataTransfer
时间对象的一个属性,用于被拖动的元素向放置目标传递字符串格式的数据,有两个属性getData()/setData()
getData获取由setData保存的值,setData()中的第一个参数也是getData()中的唯一参数,表示存取的数据类型取值为URL或text
dropEffort/effortAllowed
是要访问dataTransfer对象的两个属性,互相搭配才有用
dropEffort属性的四个值none/move/copy/link
effortAllowed属性的值uninitialized/none/copy/link/move/copyLink/copyMove/linkMove/all
可拖动
HTML 5 规定了一个属性draggable
表示元素是否可以拖动,图像和链接的draggable自动被设置为true
媒体元素
并非所有的浏览器支持同一个格式(在媒体元素标签的src数组指定一个类型视频),可以在标签内部添加source元素来添加多中视频类型
video/audio
属性及事件
<audio>
元素有一个原生的JavaScript构造函数Audio,可以在任何时候播放音频
历史状态管理
用户操作不一定打开新的页面,这样前进后退按钮也就失去了作用,导致用户很难切换不同的状态,解决这个问题可以使用hashchange
事件,或者HTML 5中的history对象 history.pushState()
参数为状态对象,新状态的标题和可选的相对的URL,执行后新的状态就添加到历史状态栈中,浏览器地址栏也会变成新的URL,但浏览器不会向服务器去请求,即使状态改变之后查询location.href也会返回与地址栏中相同的地址,另外第二个参数还没有浏览器实现,可以为空或一个段标题,第一个参数则应该提供初始化页面状态的各种信息
因为pushState()会创建新的历史状态,按下后退按钮就会触发window的popstate事件,popstate事件的对象有一个state属性,这个属性包含着第一个参数传递给pushState()的状态对象
replaceState()
和pushState()类型,只不过调用该方法不会再历史状态栈中写入新的额状态,只会重写当前的状态