首页 > 代码库 > js-JavaScript高级程序设计学习笔记14

js-JavaScript高级程序设计学习笔记14

第十六章 HTML5脚本编程

1、跨文档消息传递。简称XDM,指的是来自不同域的页面间传递消息。

XDM的核心是postMessage()方法,接收两个参数,一条消息和消息接收方来自哪个域的字符串。

接收到XDM消息时,会触发window对象的message事件,异步触发

为保险起见,第一个参数传递字符串。在传入结构化的数据时调用JSON.stringify(),然后在onmessage事件处理程序中调用JSON.parse()。

2、原生拖放

1、拖放事件。拖动元素时,将依次触发dragstart/drag/dragend。当某个元素被拖动到一个有效的放置目标上时,会依次出发dragenter/dragover/dragleave或drop。

2、自定义放置目标。在拖动元素经过某些无效的放置目标时,可以看到一种特殊的光标,表示不能放置。所有元素支持放置目标,但是默认是禁止的,可以把dragenter和dragover事件的默认行为阻止,变成有效的放置目标。

3、dataTransfer对象。这个对象中的数据只能在drop事件处理程序中读取

4、dropEffect和effectAllowed。是dataTransfer对象的两个属性。前者可以知道被拖动的元素能够执行哪种放置行为:none/move/copy/link。dropEffect只有搭配effectAllowed才有用,effectAllowed表示允许拖动元素的哪种dropEffect。

5、可拖动。默认情况下,图像/链接和文本是可以拖动的。其他元素也可以拖动——draggable属性。

6、其他成员。HTML5规定的datatransfer中包含的其他属性和方法P485.

3、媒体元素

<audio> <video>

poster属性是在加载视频内容期间显示一幅图。

如果标签中有controls属性,表示应显示UI控件。

嵌入source标签指定多个不同的媒体来源。

1、属性。P487

2、事件。

3、自定义媒体播放器。使用play()和pause()方法,可以手工控制媒体文件的播放。

4、检测编解码器的支持情况。canPlayType()方法。

5、Audio类型。可以在任何时候播放音乐。

4、历史状态管理。P491

js-JavaScript高级程序设计学习笔记14