第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。要想让其他元素可拖动,或者让图像或链接不能拖动,都可以设置这个属性。 例如:
<!-- 让这个图像不可以拖动 -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- 让这个元素可以拖动 -->
<div draggable="true">...</div>
(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. 媒体元素
<audio>和<video>元素：
<!-- 嵌入视频 -->
<video src="conference.mpg" id="myVideo">Video player not available.</video>
<!-- 嵌入音频 -->
<audio src="song.mp3" id="myAudio">Audio player not available.</audio>
(1) 使用这两个元素时,至少要在标签中包含
src 属性,指向要加载的媒体文件。
(2) 还可以设置width 和 height 属性以指定视频播放器的大小,而为poster 属性指定图像的 URI 可以在加载视频内容期间 显示一幅图像。
(3) 另外,如果标签中有controls 属性,则意味着浏览器应该显示 UI 控件,以便用户直 接操作媒体。
(4) 位于开始和结束标签之间的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素 的情况下显示。
(1) 属性
(2)事件
(3) 自定义媒体播放器
<div class="mediaplayer">
<div class="video">
<video id="player" src="movie.mov" poster="mymovie.jpg"
width="300" height="200">
Video player not available.
</video>
</div>
<div class="controls">
<input type="button" value="Play" id="video-btn">
<span id="curtime">0</span>/<span id="duration">0</span>
</div>
</div>
//取得元素的引用
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");
网友评论