《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(eve