JavaScript高级程序设计-第三版（HTML5脚本编程）

十六、HTML5脚本编程

16.1 跨文档消息传递

• XDM (cross-document messaging)
  • 来自不同域的页面间传递消息
• postMessage(message, URL)
• message事件
  • event
    • data
    • origin 发送消息的文档所在的域
    • source
      • 发送消息的文档的window对象的代理
      • 发送方提供出来的供其它文档调用，作用是给发送方返回消息
• 给内嵌框架中的页面发送消息
  • iframe.contentWindow
    • 拿到内嵌框架提供出来的供其它文档调用的window对象
    • 作用是给内嵌框架发送消息

16.2 原生拖放

16.2.1 拖放事件

• 在被拖动元素上触发
  • dragstart
  • drag
  • dragend
• 在放置目标上触发
  • dragenter
  • dragover
  • dragleave或drop
    • 在放置目标中放下则触发drop
    • 在放置目标上移动后移出则触发dragleave

16.2.2 自定义放置目标

• 所有元素都支持放置目标事件
• 元素默认为不允许放置，不会触发drop事件
• 通过重写dragenter和dragover事件可以将元素变成可放置
  • preventDefault()

16.2.3 dataTransfer对象

• dataTransfer
  • 作用：在拖动操作中实现数据交换
  • event对象的属性，保存的数据只能在drop事件中读取到
  • 实例方法
    • getData()
    • setData(mimeType, str)
      • mimeType一般为text或URL
      • 拖动文本浏览器会自动调用setData(text, str)
      • 拖动图片浏览器自动调用setData(url, str)
      • 也可在dragstart事件中手动保存数据

16.2.4 dropEffect与effectAllowed

• dataTransfer
  • 属性
    • dropEffect
      • 表示在放置目标上被拖动的元素能够执行哪种放置行为
        • none
        • copy
        • move
        • link：打开拖动元素
      • 在dragenter中设置
      • 设置的值只影响光标的样式，具体操作需要自己实现
    • effectAllowed
      • 允许被拖动元素的哪种dropEffect
        • none
        • copy
        • link
        • move
        • …
      • 在dragstart中设置

16.2.5 可拖动

• 图像和链接任何时候都可拖动
• 选中的文本默认可以拖动
• 设置元素的HTML属性draggable为true则可拖动

16.2.6 其他成员

• dataTransfer
  • addElement()：添加元素，只影响数据
  • clearData(format) ：清除某种格式的数据
  • setDragImage(element, x, y)：拖动时在光标下方显示element
  • types：保存数据类型的数组

16.3 媒体元素

• <video src=’ ’ width=’ ’ height=’ controls poster=’ '>not support video element</video>
  • poster：在加载视频内容期间显示一副图像
  • controls：显示UI控件
• <audio>
• <source>
  • 当不清楚浏览器支持的媒体格式时，可以指定多个格式的源

<video>
	<source src='.ogv' type='' codes='' />
	<source src='.mpg' type='' codes='' />
	not support video element
</video>

16.3.1 属性

属性	数据类型	说明
autoplay	布尔值	取得或设置autoplay标志
buffered	时间范围	表示已下载的缓冲的时间范围的对象
…	…	…

16.3.2 事件

事件	触发时机
abort	下载中断
canplay	可以播放时；readystate值为2
…	…

16.3.3 自定义媒体播放器

• 利用<video>和<audio>提供的属性、事件和方法自定义控制器

16.3.4 检测编解码器的支持情况

• canPlayType()
  • 接收参数：“视频格式;编码格式”
  • 返回值
    • “”
    • “maybe”
    • “probably”

16.3.5 Audio类型

• new Audio(‘src’)
• 创建实例后不需要再添加进document

16.4 历史状态管理

• ajax的使用，页面不一定会刷新，前进后退按钮不起作用
• 解决方法
  • hashchange事件
    • 首先改变location.hash（ajax请求后），会生成一条历史记录，但仅仅是记录
    • 前进、后退，hashchange事件被触发，根据hash值再执行相应的页面操作
  • HTML5更新history对象
    • history.pushState()
      • 作用：将状态信息加入历史状态栈（ajax请求后），生成假的URL，location.href也会返回地址栏
      • 传入参数
        • 状态对象
        • 新状态的标题
        • 相对URL
    • 前进、后退触发popstate事件
      • 手动将页面重置为状态对象中的数据表示的状态
    • history.replaceState() 可以重写当前状态
    • 刷新页面，如果服务器没有对应地址的内容会报错404