第16章 HTML5 脚本编程

1.跨文档消息传递

跨文档消息传送(cross-document messaging),有时候简称为 XDM,指的是在来自不同域的页面间传递消息。

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

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

(2) 接收到 XDM 消息时,会触发 window 对象的 message 事件。这个事件是以异步形式触发的,因此从发送消息到接收消息(触发接收窗口的 message 事件)可能要经过一段时间的延迟。

(3) 触发 message 事件后,传递给 onmessage 处理程序的事件对象包含以下三方面的重要信息。

data:作为 postMessage()第一个参数传入的字符串数据。

origin:发送消息的文档所在的域,例如"http://www.wrox.com"。

source:发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage()方法。如果发送消息的窗口来自同一个域,那这个对象就是 window。

EventUtil.addHandler(window, "message", function(event){
//确保发送消息的域是已知的域
if (event.origin == "http://www.wrox.com"){
//处理接收到的数据
 processMessage(event.data);
////可选:向来源窗口发送回执
event.source.postMessage("Received!", "http://p2p.wrox.com");
}
})

2. 原生拖放

(1) 拖放事件

拖动某元素时,将依次触发下列事件:
(1) dragstart
(2) drag
(3) dragend

(1) 按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发 dragstart 事件。此时光标变成“不能放”符号(圆环中有一条反斜线),表示不能把元素放到自己上面。拖动开始时,可以通过 ondragstart 事件处理程序来运行 JavaScript 代码。
(2) 触发 dragstart 事件后,随即会触发 drag 事件,而且在元素被拖动期间会持续触发该事件。这个事件与 mousemove 事件相似,在鼠标移动过程中,mousemove 事件也会持续发生。
(3) 当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发 dragend 事件。
上述三个事件的目标都是被拖动的元素。

当某个元素被拖动到一个有效的放置目标上时,下列事件会依次发生:
(1) dragenter
(2) dragover
(3) dragleave 或 drop

(1) 只要有元素被拖动到放置目标上,就会触发 dragenter 事件(类似于 mouseover 事件)。
(2) 紧随其后的是 dragover 事件,而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。
(3) 如果元素被拖出了放置目标,dragover 事件不再发生,但会触发 dragleave 事件(类似于 mouseout 事件)。如果元素被放到了放置目标中,则会触发 drop 事件而不是 dragleave 事件。
上述三个事件的目标都是作为放置目标的元素。

(2) 自定义放置目标

重写 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);
});

(3) dataTransfer对象

dataTransfer 对象,它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。

dataTransfer 对象有两个主要方法:getData()和 setData()。

//设置和接收文本数据 
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text"); 

//设置和接收 URL
event.dataTransfer.setData("URL", "http://www.wrox.com/"); 
var url = event.dataTransfer.getData("URL");

保存在 dataTransfer 对象中的数据只能在drop 事件处理程序中读取。如果在 ondrop 处理程序中没有读到数据,那就是 dataTransfer 对象已经被销毁,数据也丢失了。

(4) dropEffect与effectAllowed

dataTransfer 对象的两个属性:dropEffect 和 effectAllowed。

1.dropEffect 属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列 4 个可能的值。

"none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。

"move":应该把拖动的元素移动到放置目标。

"copy":应该把拖动的元素复制到放置目标。

"link":表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接,有 URL)。
要使用 dropEffect 属性,必须在 ondragenter 事件处理程序中针对放置目标来设置它。

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。
必须在 ondragstart 事件处理程序中设置 effectAllowed 属性。

(5) 可拖动

draggable 属性,表示元素是否可以拖动。图像和链接的 draggable 属性自动被设置成了 true,而其他元素这个属性的默认值都是 false。要想让其他元素可拖动,或者让图像或链接不能拖动,都可以设置这个属性。例如:

...

(6) 其他成员

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

addElement(element):为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象),不会影响拖动操作时页面元素的外观。在写作本书时,只有 Firefox 3.5+实现了这个方法。

clearData(format):清除以特定格式保存的数据。实现这个方法的浏览器有 IE、Fireforx 3.5+、Chrome 和 Safari 4+。

setDragImage(element, x, y):指定一幅图像,当拖动发生时,显示在光标下方。这个方法接收的三个参数分别是要显示的 HTML 元素和光标在图像中的 x、y 坐标。其中,HTML 元素可以是一幅图像,也可以是其他元素。是图像则显示图像,是其他元素则显示渲染后的元素。实现这个方法的浏览器有 Firefox 3.5+、Safari 4+和 Chrome。

types:当前保存的数据类型。这是一个类似数组的集合,以"text"这样的字符串形式保存着数据类型。实现这个属性的浏览器有 IE10+、Firefox 3.5+和 Chrome。

3. 媒体元素

元素：

(1) 使用这两个元素时,至少要在标签中包含 src 属性,指向要加载的媒体文件。
(2) 还可以设置 width 和 height 属性以指定视频播放器的大小,而为 poster 属性指定图像的 URI 可以在加载视频内容期间显示一幅图像。
(3) 另外,如果标签中有 controls 属性,则意味着浏览器应该显示 UI 控件,以便用户直接操作媒体。
(4) 位于开始和结束标签之间的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素的情况下显示。

(1) 属性

(2)事件

(3) 自定义媒体播放器

0/0

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

(4) 检测编解码器的支持情况

这两个媒体元素都有一个 canPlayType()方法,该方法接收一种格式/编解码器字符串,返回 "probably"、"maybe"或""( 空字符串)。

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

(5) Audio类型

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

4. 历史状态管理

HTML5 通过更新 history 对象为管理历史状态提供了方便。

1.history.pushState()方法,该方法可以接收三个参数:状态对象、新状态的标题和可选的相对 URL。

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

(1) 执行 pushState()方法后,新的状态信息就会被加入历史状态栈,而浏览器地址栏也会变成新的相对 URL。但是,浏览器并不会真的向服务器发送请求,即使状态改变之后查询 location.href 也会返回与地址栏中相同的地址。
(2) 按下“后退” 按钮,会触发 window 对象的 popstate 事件。popstate 事件的事件对象有一个 state 属性,这个属性就包含着当初以第一个参数传递给 pushState()的状态对象。

EventUtil.addHandler(window, "popstate", function(event){
var state = event.state;
if (state){ //第一个页面加载时 state 为空
        processState(state);
    }
});

要更新当前状态,可以调用 replaceState(),传入的参数与 pushState()的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态,只会重写当前状态。

history.replaceState({name:"Greg"}, "Greg's page");

JavaScript 高级程序设计(第16章 HTML5 脚本编程)