JS高级程序设计16-HTML5脚本编程

• 跨文档消息传递480

  来自不同域的页面间传递消息（简称XDM）

  //postMessage()方法（向另一个地方传递数据）
  postMessage()方法接受两个参数，第一个参数是要传递的数据，第二个参数是表示数据接收方来自哪个域的字符串
  var iframeWindow=document.getElementById("myframe").contentWindow;
  iframeWindow.postMessage("A secret","http://www.wrox.com");
  
  接收方接收到XDM消息时，会触发接收方window对象的message事件，传给onmessage处理程序的事件对象包含以下三方面的重要信息：
  data--postMessage()第一个参数；
  origin--发送消息的文档所在域；
  source--发送消息的文档的window对象的代理
  
  检测消息来源的模式：
  EventUtil.addHandler(window,"message",function(evwnt){ 
      //确保发送消息的域是已知的域
      if(event.origin=="http://www.wrox.com"){ 
          //处理接受到的数据
          processMessage(event.date);
          //可选：向来源窗口发送回执
          event.source.postMessage("Received!","http://p2p.wrox.com");
      }
  });

• 原生拖放481

  拖放事件

  //拖拽元素时，依次触发三个事件：
  dragstart
  drag
  dragend
  //当元素被拖动到一个有效的放置目标上时，依次触发三个事件：
  dragenter
  dragover
  dragleave/drop

  自定义放置目标

  //将一个元素变为有效的放置目标
  var droptarget=document.getElementById("droptarget");
  EventUtil.addHandler(droptarget,"dragover",function(event){ 
      EventUtil.preventDefault(event);
  });
  EventUtil.addHandler(droptarget,"dragenter",function(event){ 
      EventUtil.preventDefault(event);
  });
  EventUtil.addHandler(droptarget,"drop",function(event){ //针对火狐
      EventUtil.preventDefault(event);
  });

  dataTransfer对象

  dataTransfer对象是拖放事件的属性，所以只能在拖放事件处理程序中访问它
  dataTransfer对象有两个主要方法(在drop事件处理程序中)：getData()和setData()
  //设置和接受文本数据
  event.dataTransfer.setData("text","some text");
  var text=event.dataTransfer.gatData("Text");
  //设置和接受URL
  event.dataTransfer.setData("URL","http://www.wrox.com/");
  var text=event.dataTransfer.gatData("url")||event.dataTransfer.gatData("text/uri-list");

  dropEffect与effectAllowed

  dropEffect与effectAllowed是dataTransfer对象的两个属性
  
  //dropEffect属性（在ondragenter事件处理程序中设置）可以知道被拖动的元素能够执行哪种放置行为：
  "none"--不能把拖动的元素放在这里（这是除文本框之外所有元素的默认值）
  "move"--应该把拖动的元素移动到放置目标
  "copy"--应该把拖动的元素复制到放置目标
  "link"--表示放置目标会打开拖动的元素（拖动的元素必须是一个链接，有URL）
  
  //dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性（在ondragstart事件处理程序中设置）表示允许拖动元素的哪种dropEffect:
  "uninitialized"--没有给被拖动的元素设置任何放置行为
  "none"--被拖动的元素不能有任何行为
  "copy"--只允许“copy”的dropEffect
  "link"--只允许“link”的dropEffect
  "move"--只允许“move”的dropEffect
  "copyLink"--允许“copy”和"link"的dropEffect
  "copyMove"--允许“copy”和"move"的dropEffect
  "linkMove"--允许“link”和"move"的dropEffect
  "all"--允许任意dropEffect

  可拖动

  //draggable属性
  draggable属性表示元素是否可以拖动（默认情况下，图像、链接和文本是可以拖动的）
  <img src="smile.gif" draggable="false" alt="Smiley face"> //使图像不可拖动
  <div draggable="true"></div> //使这个元素可以拖动

  其他成员

  //dataTransfer对象的其他属性和方法：
  addElement(element)--为拖动操作添加一个元素（只添加数据，不影响页面）；
  clearData(format)--清楚以特定格式保存的数据；
  setDragTmage(element,x,y)--指定一副图像（元素），当拖动发生时，显示在光标下方；
  types--当前保存的数据类型。这是一个类似数组的集合，以"text"这样的字符串形式保存着数据类型；

• 媒体元素486

  有video和audio两种媒体元素
  video和audio的属性（487）
  video和audio的事件（488）
  自定义媒体播放器（488）
  检测编解码的支持情况（489）

  Audio类型

  <audio>元素还有一个原生的JS构造函数Audio,可以在任何时候播放音频
  var audio=new Audio("sound.mp3");
  EventUtil.addHandler(audio,"canplaythrough",function(event){ 
      audio.play();
  });

• 历史状态管理491

  解决用户难在不同状态之间切换的问题

  当hashchange事件发生的时候，使用history.pushState()方法；
  
  history.pushState(状态对象，新状态的标题，可选的相对URL) //新的状态信息加入到历史状态栈，浏览器地址栏也会变成新的相对URL；
  
  点击“后退”按钮，会触发window对象的popstate事件，对应的事件对象有一个state属性，包含着当初以第一个参数传递给pushState()的状态对象
  
  更新当前状态，可以调用replaceState()，传入的参数与pushState()的前两个参数相同，会重写当前状态：
  history.replaceState({name:"Greg"},"Greg's page");