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

Posted 2020-08-22 ZhangCui

第十六章 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