HTML5脚本编程

一,跨文档消息传递
  Cross-document message(XDM)
  postMessage()方法,向另一个地方传递数据,接收两个参数,一条消息和一个表示接收方来自哪个域的字符串,
  接收到XDM消息时,会触发window的message事件,事件是以异步形式触发的,
  触发message事件后,传递给onmessage处理程序的事件对象包含三方面的重要信息
    data:作为postMessage()第一个参数传人的字符串数据
    origin:发送消息的文档所在的域
    source:发送消息的文档的window对象的代理
  在onmessage处理程序中检测消息来源可以确保传入的消息来自已经的页面

    EventUtil.addHandler(window."message",function(){
      if(event.origin == "http://www.wrow.com"){
        //处理接收到的数据
        processMessage(event.data);
        //可选:向来源窗口发送回执
        event.source.postMessage("recevied!","http://p2p.wrow.com");
      }
    });

 

  第一个参数一般为字符串,在结构化数据时,先调用JSON.stringify(),在onmessage处理程序中调用JSON.parse()
二,原生拖放
1,拖放事件
  拖动某元素时,触发dragstart事件,drag事件,dragend事件
    dragstart事件:按下鼠标并开始移动鼠标时,在被拖放的元素上触发dragstart事件,通过ondragstart处理程序来运行javascript代码
    drag事件:触发dragstart事件后,就会触发drag事件,在元素被拖动期间会持续触发该事件
    dragend事件:当停止拖放时,就会触发dragend事件
  当某个元素被拖动到有效的放置目标上时,就会触发dragenter事件,dragover事件,dragleave或drop事件
    dragenter:只要元素被拖动到放置的目标上,就会触发dragenter事件
    dragover:被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件,超出了范围dragover就不会发生
    dragleave:元素被拖出了放置目标,就会触发dragleave事件
    drop:如果元素被放到了放置目标中,会触发drop事件
2,自定义放置目标
  重写dragenter和dragover事件,可以把任何元素变成有效的放置目标

  var droptarget = document.getElementById("droptarget");
  EventUtil.addHendler(droptarget,"dragover",function(){
    EventUtil.preventDefault(event);
  });
  EventUtil.addHandler(droptarget,"dragenter",function(){
    EventUti.preventDefault(event);
  });

  放置事件的默认行为是打开被放置目标上的URL,取消默认行为

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

3,dataTransfer对象
  是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据,
  有两个方法setData(),getData(),setData的第一个参数就是getData唯一的参数,是一个字符串,表示保存数据类型,取值为text或url
  保存在dataTransfer中的数据,在drop事件处理程序中读取
  在拖动文本框中的文本时,浏览器调用setData()方法,将拖动的文本保存在其中,数据不会得到处理
  在拖动链接或图像时,浏览器会调用setData()方法,将URL保存在其中,把它放置在另一个浏览器窗口中会打开该链接
  为了实践兼容性
  var url = dataTransfer.getData("url") || dataTransfer.getData("text/url-list");
  var text = dataTransfer.getData("text");
4,dropEffect与effectAllowed
  dataTransfer对象还有两个属性,确定被拖动元素以及作为放置目标的元素能够接收什么操作
  dropEffect属性:可以知道被拖动的元素能够执行哪种放置行为,有四个值,必须在ondragenter事件处理程序中针对放置目标设置它
    none:不能把拖动元素放在这里
    move:应该把拖动的元素移动到放置目标
    copy:应该把拖动的元素复制到放置目标
    link:表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接)
  effectAllowed属性:表示允许拖动元素的哪种dropEffect,属性如下
    uninitialized:没有给被拖动的元素设置任何放置行为
    node:被拖动的元素不能有任何行为
    copy:只允许值为copy的dropEffect
    link:只允许值为link的dropEffect
    move:只允许值为move的dropEffect
    copyLink:允许值为copy和link的dropEffect
    copyMove:允许值为copy和move的dropEffect
    linkMove:允许值为link和move的dropEffect
    all:允许任意的dropEffect
  在ondragstart事件处理程序中设置effectAllowed属性
5,可拖放
  draggable属性,true为可拖放,false为不可拖放
6,其他成员
  dataTransfer对象还包含下列方法和属性
  addElement(element):为拖动添加了一个元素,添加这个元素只影响数据,firefox3.5实现
  clearData(format):清除以特定格式保存的数据
  setDragImage(element,x,y):指定一副图像,当拖动发生时,显示在光标下方,三个参数分别为要显示的HTML元素和光标在图像中的x,y坐标
  types:当前保存的数据类型
三,媒体元素
<video id="myVideo">
<scoure src="conference.webm" type="video/webm;codecs=‘vp8,vorbis‘">
<scoure src="conference.ogv" type="video/ogg;codecs=‘theroa,vorbis‘">
<scoure src="conference.mpg">
Video pleyer not available
</video>
1,属性
  controls:取得或设置control属性,用于显示或隐藏浏览器内置的控件
  currentLoop:媒体文件已经循环的次数
  buffered:时间范围,表示已下载的缓冲的时间范围的对象
  duration:媒体的总播放时间
2,事件
  abort:下载中断
  enptied:网络连接中断
  error:下载期间发生网络错误
  seeked:搜索结束
  waiting:播放暂停,等待下载更多数据
3,自定义媒体播放器
  使用play(),pause(),两个方法可以手工控制媒体文件的播放
4,检测编解码器的支持情况
  canPlayType()方法,接受一种格式/编解码字符串,返回probably,maybe,空字符串
  probably和maybe都是真值
5,Audio类型
  audio元素还有一个原生的javascript构造函数,可以在任何时候播放音频

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

四,历史状态管理
  hashchange事件,可以知道URL的参数什么时候发生了变化,
  HTML5通过更新history对象管理历史状态,能够在不加载该页面的情况下改变浏览器的URL
  history.pushState(状态对象,新状态的标题,可选的相对URL),第二参数还没有实现,一般传入null
    history.pushState({name:"Nicholas"},"Nicholas‘page","nicholas.html");
  使用pushState()方法后,新的状态信息会被加入历史状态栏,浏览器的地址栏也会变成相应的URL,location.href也会返回新的URL,但是不会真的 向服务   器请求
  pushState()方法会创建新的历史状态,后退按钮可用,按下会触发window对的popstate事件,
  popState事件有一个state属性,包含着当初以第一个参数传递给pushState()的状态对象

    EventUtil.addHandler(window,"popState",function(){
      var state = event.state;
      if(state){ processState(state); }
    });

  要更新当前状态,调用replaceState(),传入的参数与pushState()的前两个参数相同,调用这个方法不会在历史状态栈中创建新状态,只会重写当前状态
    history.replaceState({name:"Greg"},"Greg‘s page");

HTML5脚本编程,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。