《JavaScript高级程序设计》HTML5 脚本编程（学习笔记C16）

简介：为了配合HTML5规范定义了很多新的HTML标记，HTML5 用显著篇幅定义了很多JavaScript API。

使用跨文档消息传递

1. 简称XDM，指的是来自不同域的页面间传递消息。
2. 核心是postMessage()方法
3. postMessage(): 向另一个地方传递数据
4. postMessage(一条消息， 消息接收方来自哪个域的字符串)
5. 例：

    	var iframeWindow = document.getElementById('myframe').contentWindow
    	
    	iframeWindow.postMessage('A secret', 'http:// www.baidu.com')
   

6. contentDocument属性能够以HTML对象来返回iframe中的文档，因为返回的是HTML对象，所以可以通过所有标准的DOM方法来处理被返回的对象。
7. 如果postMessage的第二个参数是“*”，发送的消息可以给任何域。
8. 接收到XDM消息会触发window对象的message事件，onmessage的处理程序事件对象包含以下三方面信息：
   • data: postMessage()的第一个参数传入的字符串数据
   • origin: 发送信息的文档所在域
   • source: 发送消息的文档的window对象的代理
9. 发送时：指定postMessage()第二个参数可以确保浏览器不会把消息发送给未知页面
10. 接收时：onmessage程序中检测消息来源可以确保传入的消息来自已知页面
11. 例：

    	EventUtil.addHandler(window, 'message', function(event){
    		
    		// 确保发送消息是已知域
    		if(event.origin == 'http://www.wrox.com') {
    			
    			// 处理接收到的数据
    			processMessage(event.data)
    			
    			// 向来源窗口发送回执
    			// 只能通过这个代理对象调用postMessage()
    			// 不能访问到widow对象的其他任何信息
    			event.source.postMessage('Received!', 'http://p2p.wrox.com')
    		}
    	})
    

12. postMessage()的第一个参数最早只能是字符串，后来部分浏览器支持其他类型。所以如果想传入结构化数据现在发送时调用JSON.stringify()，接收时调用**JSON.parse()**解析。
13. XDM已经作为一个规范独立出来，现在叫做 Web Messaging 官方页面

原生拖放

1. 拖放网页元素可以在框架间，窗口间甚至在应用间
2. 几乎网页中的任何元素都可以作为放置目标
3. 拖放事件
   拖放某元素时将依次触发下列事件：（这三个事件目标是被拖动的元素）
   • dragstart
   • drag(与mousemove事件类似)
   • dragend
     当元素被拖放到放置目标时触发下列事件：（这些事件的目标是放置目标）
   • dragenter
   • dragover
   • dragleave 或 drop
4. 自定义放置目标
   通过重写dragenter和dragover事件的默认行为，把任何元素变成有效的放置目标

      var droptarget = document.getElementById('droptarget')
      
      EventUtil.addHandler(droptarget, 'dragover', function(event){
    	  EventUtil.preventDefault(event)
      })
      
      EventUtil.addHandler(droptarget, 'dragenter', function(event){
    	  EventUtil.preventDefault(event)
      })
   

5. firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的东西的URL。
   如果把图像拖放到放置目标上，页面会转为图像文件
   如果把文本拖放到放置目标上，会导致无效URL错误
   为解决火狐中的该问题，需取消drop事件默认行为，阻止它打开URL

      EventUtil.addHandler(droptarget, 'drop', function(event)) {
    	  EventUtil.preventDefault(event)
      }
   

6. dataTransfer对象
   • dataTransfer对象：在拖放操作中实现数据交换
     dataTransfer对象的两个主要方法：setData() getData()
     允许指定各种MIME类型，‘text’被映射为’text/plain’，‘URL’被映射为’text/uri-list’

      // 设置和接受文本数据
      event.dataTransfer.setData('text', 'some text')
      var text = event.dataTransfer.getData('text')
      
      // 设置和接收URL
      event.dataTransfer.setData('URL', 'http://www.wrox.com/')
      var url = event.ataTransfer.getData('URL')
   

   • dataTransfer对象：确定被拖动的元素以及作为放置目标的元素能够接收什么操作
     dataTransfer对象的两个属性：dropEffect effectAllowed
     • dropEffect：必须在ondragenter事件处理程序中针对放置，目标来设置它
     • dropEffect：可以知道被拖动的元素能够执行哪种放置操作
       • none
       • move
       • copy
       • link
     • effectAllowed：必须在ondragstart事件处理程序中设置effectAllowed属性
     • effectAllowed：表示允许拖动元素的哪种dropEffect。dropEffect属性必须搭配effectAllowed属性才有用。
       • uninitialized
       • none
       • copy
       • link
       • move
       • copyLink
       • copyMove
       • linkMove
       • all
   • dataTransfer对象的其他成员：
     • addElement(element)：为拖动操作添加一个元素
     • clearData(format)：清除以特定格式保存的数据
     • setDragImage(element, x, y)：指定一幅图像，当拖动发生时，显示在光标下方
     • types：当前保存的数据类型
7. 可拖动
   • HTML5为所有HTML元素规定了一个draggable属性表示元素是否可拖动
   • 图像和链接的draggable默认为true，其他元素默认false
   • 可以设置该属性修改默认值

   	<!-- 让该图像不可拖动 -->
   	<img src="smile.gif" draggable="false" alt="Smiley face">
   	
   	<!-- 让该元素可拖动 -->
   	<div draggable="true">...</div>
   

8. Firefox支持可拖动属性必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存一些信息

音频与视频

1. HTML5 新增 并提供了常用JavaScript API

   	<!-- 嵌入视频 -->
   	<video src="conference.mpg" id="myVideo">Video player not available.	</video>
   	
   	<!-- 嵌入音频 -->
   	<audio src="song.mp3" id="myAudio">Audio not available.</audio>
   

2. 相关属性：

   • src
   • width
   • height
   • poster：加载视频内容期间的展示图像
   • controls：浏览器是否显示UI控件
   • 标签间作为后备内容

3. 指定多个不同媒体来源以防浏览器不支持该格式

   	<!-- 嵌入视频 -->
   	<video id="myVideo">
   		<source src="conference.webm" type="video/webm; codecs='vp8, vorbis'">
   		<source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'">
   		<source src="conference.mpg">
   		Video player not avaliable
   	</video>
   	
   	<!-- 嵌入音频 -->
   	<audio id="myAudio">
   		<source src="song.ogg" type="audio/ogg">
   		<source src="song.mp3" type="audio/mpeg">
   		Audio player not avaliable
   	</audio>
   

4. <video>与<audio>共有的属性
   

5. 媒体元素相关事件
   

6. 自定义播放器

   
   <div class="mediaplayer">
   	<div class="video">
   		<video 
   		id="player" 
   		src="movie.mov" 
   		poster="mymovie.jpg" 
   		width="300" 
   		height="200">
   			Video player not available
   		</video>
   	</div>
   	<div class="controls">
   		<input type="button" value="Play" id="video-btn">
   		<span id="curtime">0</span>/<span id="duration">0</span>
   	</div>
   </div>
   

   	
   	// 取得各元素的引用
   	var player = document.getElementById('player')
   		btn = document.getElementById('video-btn')
   		curtime = document.getElementById('curtime')
   		duration = document.getElementById('duration')
   		
   	// 更新播放时间
   	duration.innerHTML = player.duration
   	
   	// 为按钮添加事件处理程序
   	EventUtil.addHandler(btn, 'click', function(event){
   		if (player.paused) {
   			player.play()
   			btn.value = 'Pause'
   		} else {
   			player.pause()
   			btn.value = 'Play'
   		}
   	})
   	
   	// 定时更新当前时间
   	setInterval(function() {
   		curtime.innerHTML = player.currentTime
   	}, 250)
   

7. 检测编解码器的支持情况

   • <video>与<audio>元素都有canPlayType()元素
   • canPlayType(格式/编解码器字符串)，返回probably,maybe或’ '。

      var audio = document.getElementById('audio-player')
      
      // 很可能是'maybe'
      if (audio.canPlayType('audio/mpeg')) {
    	  // 进一步处理
      }
      
      // 可能是'probably'
      if (audio.canPlayType('audio/ogg; codes=\"vorbis\"')) {
    	  // 进一步处理
      }
   

   • 已得到支持的音频格式和编解码器
     

   • 已得到支持的视频格式和编解码器
     

8. audio构造函数：可以在任何时候播放音频

      var audio = new Audio('sound.mp3')
      EventUtil.addHandler(audio, 'canplaythrough', function(event){
      	audio.play()
      })
   

历史状态管理

问题

• 什么时候需要用到历史状态管理，用历史状态管理有什么好处
• 怎么用历史状态管理

内容

1. 使用hashchange事件 更新history对象为管理历史状态提供方便

2. 通过hashchange事件可以知道URL的参数发生了什么变化

3. 状态管理API能够在不加载新页面的情况下改变浏览器的URL

4. history.pushState(状态对象， 新状态的标题， 可选的相对URL)
   history.pushState({name: "Nicholas"}, "Nicholas's page", "nicholas.html")

   1. 执行 pushState() 方法之后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对URL
   2. 但是，浏览器并不会真的向服务器发送请求
   3. 即使状态改变之后查询 location.href 也会返回与地址栏中相同的地址
   4. 第二个参数到写书为止还没有浏览器实现，可以传空字符串或一个短标题，第一个参数则因尽可能提供初始化页面状态所需的各种信息

5. 此时按下“后退”按钮，会触发window对象的popstate事件。popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象

    	EventUtil.addHandler(window, 'popstate', function(event) {
    		var state = event.state
    		// 第一个页面加载时state为空
    		if (state) {
    			processState(state)
    		}
    	})
   

6. 要更新当前状态，可以调用replaceState().
   调用该方法不会在历史状态栈中创建新状态，只会重写当前状态

    	history.replaceState({name: "Greg"}, "Greg's page")