HTML5脚本编程

跨文档消息传递

• 跨文档消息传送，简称为XMD，指的是来自不同域的页面间传递消息
• XMD的核心是postMessage()方法，在HTML5规范中，除了XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的，向另一个地方传递参数。对于XDM而言，另个地方指的是包含当前页面中的<iframe>元素，或者由当前页面弹出的窗口

• postMessage()方法接收两个参数，一条消息和一个表示消息接收方来自哪个域的字符串

  //所有支持XDM的浏览器也支持iframe的contentWindow属性
  var iframeWindow=document.getElementById("myframe").contentWindow;
  iframeWindow.postMessage("A secret","http://www.wwrox.com")

• 接收到XDM消息时，会触发window对象的message事件，传递给onmessage处理程序的事件对象包含三方面的重要信息

  • data，作为postMessage()第一个参数 传入的字符串数据
  • origin，发送消息的文档所在的域
  • source，发送消息的文档的window对象的dialing，这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法，如果发送消息的窗口来自同一个域，那么这个对象就是window

原生拖放

拖放事件

• 拖动元素时，依次触发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);
  });

data Transfer对象

• 是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。因为是事件对象的属性，所以只能在拖放事件的处理程序中访问dataTransfer对象

• dataTransfer对象有两个主要方法，getData()和setData()，getData()可以取得由setData()保存的值，setData()方法的第一个参数，也是getData()方法唯一的一个参数，是一个字符串，表示保存的数据类型

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

dropEffect与effectAllowed

• 通过dropEffect属性可以知道被拖动元素能够执行哪种放置行为

  • none，不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值。
  • move，应该把拖动的元素移动到放置目标
  • copy，应该把拖动的元素复制到放置目标
  • link，表示放置目标会打开拖动的元素，但拖动的元素必须是一个链接，有URL

• dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性表示允许拖动元素的哪种dropEffect，effectAllowed属性可能的值如下

  • 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

可拖动

• HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动，图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false

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

其他成员

• HTML5规范规定dataTransfer对象还应该包含下列方法和属性

  • addElement，为拖动操作添加一个元素，添加这个元素只影响数据，不会影响拖动操作时页面元素的外观
  • clearData，清除以特定格式保存的数据
  • setDragImage，指定一副图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标
  • types，当前保存的数据类型，是一个类似数组的集合

媒体元素

• 不用再标签中指定src属性，而是像下面这样使用一个或多个<source>元素

  <!-- 嵌入视频 -->
  <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 available.
  </video>
  <!-- 嵌入音频 -->
  <audio id="myAudio">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
    Audio player not available.
  </audio>

属性

事件

自定义媒体播放器

• <audio>和<video>元素的play()和pause()方法，可以手工控制媒体文件的播放

  //取得元素的引用
  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);

检测编码器的支持情况

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

历史状态管理

• 通过 hashchange 事件，可以知道 URL 的参数什么时候发生了变化，即什么时候该有所反应。而通过状态管理 API，能够在不加载新页面的情况下改变浏览器的 URL。为此，需要使用history.pushState() 方法，该方法可以接收三个参数：状态对象、新状态的标题和可选的相对 URL。

  history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");
  EventUtil.addHandler(window, "popstate", function(event){
    var state = event.state;
    if (state){ //第一个页面加载时 state 为空
      processState(state);
    }
  });