HTML5脚本编程

跨文档消息传递(XDM)

  • 跨文档消息传递指的是来自不同域的页面间传递消息
  • XDM的核心是 postMessage() 方法:接收两个参数,一条消息和一个表示消息接收方来自哪个域的字符串
  • 尝试向内嵌框架中发送一条消息,并指定框架中文档的来源
    var iframeWindow = document.getElementById("myfram").contentWindow;
    iframeWindow.postMessage("A secret", "http://www.wrox.com");
    
  • 尝试检测消息
    EventUtil.addHandler(window, "message", function (event) {
      if(event.origin == "http://www.wrox.com") {
        processMessage(event.data);
        event.source.postMessage("Recevied!", "http://p2p.wrox.com");
      }
    })
    

原生拖放

  • 拖放事件

    • 拖动元素触发事件:dragstartdragdragend
    • 拖放到有效位置触发事件:dragenterdragoverdragleaveordrop
  • 自定义放置目标:把元素变成有效放置目标

    var droptarget = document.getElementById("droptarget");
    EventUtil.addHandler(droptarget, "dragover", function (event) {
      EventUtil.preventDefault(event);
    });
    EventUtil.addHandler(droptarget, "dragenter", function (event) {
      EventUtil.preventDefault(event);
    })
    
  • dataTransfer对象

    • 事件对象的一个属性,用于从被拖放元素向放置目标传递字符串格式的数据;只能在拖放时间的事件处理程序中访问该对象
    • setData():两个参数,第一个表示保存的数据类型text/URL
    • getData():取得setData保存的值
    • 在拖动文本框中的文本或者拖放链接或图像是,浏览器会调用setData()方法;当元素被拖放到目标位置时,就可以通过getData()调用数据
    • 例子:

      var dataTransfer = event.dataTransfer;
      var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
      var text = dataTransfer.getData("Text");
      
    • dropEffect属性

      • 可能的值:
        • “none”:不能把拖放的元素放在这里
        • “move”:应该把拖放的元素移动到放置目标
        • “copy”:应该把拖放的元素复制到放置位置
        • “link”:表示放置目标会打开拖放元素,但拖动元素必须是一个链接
    • effectAllowed属性:必须在ondragstart事件处理程序中设置effectAllowed属性

      • “uninitialized”:没有给被拖放元素设置任何放置行为
      • “none”:被拖放元素不能有任何行为
      • “copy”:允许值为”copy”的dropEffect
      • “link”:允许值为”link”的dropEffect
      • “move”:允许值为”move”的dropEffect
      • “copyLink”:允许值为”copy”和”link”的dropEffect
      • “copyMove”:允许值为”copy”和”move”的dropEffect
      • “linkMove”:允许值为”move”和”link”的dropEffect
      • “all”:允许任意dropEffect
    • 其他成员
      • addElement(element):为拖动操作添加一个元素
      • clearData(format):清除以特定格式保存的数据
      • setDragImage(element, x, y):指定一幅图像,当拖动发生是,显示在光标下方
      • types:当前保存的数据类型
  • 可拖动

    • 默认情况下,图像、链接和文本是可拖动的,也就是说不用额外编写代码,用户就可以拖动它们。文本只有被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动
    • 设置属性
      <img src="smile.gif" draggable="false" alt="Smiley face"></img>
      <div draggable="true"></div>
      

读取拖放的文件并上传

var droptarget = document.getElementById("droptarget");
function handleEvent(event) {
  var info = "",
      output = document.getElementById("output"),
      data, xhr,
      files, i, len;
  EventUtil.preventDefault(event);
  if(event.type == "drop") {
    data = new FormData();
    files = event.dataTransfer.files;
    i = 0;
    len = files.length;
    while (i < len) {
      data.append("file" + i, files[i]);
      i++;
    }
    xhr = new XMLHttpRequest();
    xhr.open("post", "FileAPIExample.php", true);
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4) {
        console.log(xhr.responseText);
      }
    }
    xhr.send(data);
  }
}

媒体元素

  • <video>视频元素
    <video id="myVideo">
      <source src="conference.webm" type="video/webm; codecs = 'vp8, vorbis'"></source>
      <source src="conference.ogv" type="video/ogg; codecs = 'theora, vorbis'"></source>
      <source src="conference.mpg"></source>
      Video Player not available.
    </video>
    
  • <audio>音频元素
    <audio id="myAudio">
      <source src="song.ogg" type="audio/ogg"></source>
      <source src="song.mp3" type="audio/mpeg"></source>
      Audio Player not available.
    </audio>
    

  转载请注明: Blog HTML5脚本编程

  目录