本文对在JS中涉及到的HTML5脚本做了简单整理。最近比较忙,不是特别细致,以后补充。
1.跨文档消息传递
跨文档消息传送(cross-document messaging),有时候也简称为XDM。
指的是在来自不同域的页面间传递消息。
在XDM机制出现之前,更稳妥地实现这种通信需要花很多功夫。XDM把这种机制规范化,让我们能既稳妥有简单地实现跨文档通信。
核心:postMessage()方法。
目的:向另一个地方传递数据。
另一个地方:指的是包含在当前页面中的元素,或者由当前页面弹出的窗口。
接收两个参数:一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。
主要语句
var iframeWindow = document.getElementById(“myframe”).contentWindow;
iframeWindow.postMessage(“A secret” , ”http://www.wrox.com”);
最后一行代码尝试向内嵌框架中发送一条消息,并指定框架中的文档必须来源于“http://www.wrox.com”域。
如果来源匹配,消息会传递到内嵌框架中;否则,postMessage()什么也不做。
这一限制可以避免窗口中的位置在你不知道的情况下发生改变。
如果传给postMessage()的第二个参数是“*”,则表示可以把消息发送给来自任何域的文档,但我们不推荐这样做。
接收到XDM消息时,会触发window对象的message事件。
这个事件是以异步形式触发的,因此从发送消息到接受消息(触发接受窗口的message事件)可能要经过一段时间的延迟。
触发message事件后,传递给onmessage处理程序的事件对象包含以下三方面的重要信息。
data:作为postMessage()第一个参数传入的字符串数据。
origin:发送消息的文档所在的域,例如“https://www.w3cmm.com”。
source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域,那这个对象就是window。
接受到消息后验证发送窗口的来源是至关重要的。
就像给postMessage()方法指定第二个参数,以确保浏览器不会把消息发送给未知页面一样,在onmessage处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下例:msg.html是id为iframe内嵌框架中的页面。
2.原生拖放
2.1拖放事件
针对被拖放元素
dragstart
drag
dragend
针对放置目标的元素
dragenter
dragover
dragleave或drag
2.3 dataTransfer对象
两个主要方法:
getData(类型)
setData(类型,具体值)
2.4 dropEffect和effectAllowed
1.effectAllowed属性表示允许拖放元素的哪种dropEffect。
dropEffect 也是 dataTransfer的一种属性。
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为(当拖到目的地时)。这个属性有下列4个可能的值。
“none”:不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”:应该把拖动的元素移动到放置目标。
“copy”:应该把拖动的元素复制到放置目标。
“link”:表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接,有URL)。
2.dt.effectAllowed = 'all':即说被拖动元素在放置到目的地时,可以上面的任意一种效果来处理。
- 必须在ondraggstart事件处理程序中设置effectAllowed属性。
2.5 可拖动
draggable属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
2.6 属性整理
- DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
- draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
列表1- ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
- ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
- ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
- ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
- ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
- Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
- Event.effectAllowed 属性:就是拖拽的效果。
在这里推荐大家阅读这篇博客,配合实例练习http://blog.csdn.net/baidu_25343343/article/details/53215193
3.媒体元素
video 视频
audio 音频
用法:
属性:
事件
自定义播放器
主要使用:play() 、pause()
DOM部分:
0/0
js部分:
var player = document.getElementById("player"),
btn = document.getElementById("video-btn"),
curtime = document.getElementById("curtime"),
duration = document.getElementById("duration");
btn.onclick = function() {
if (player.paused) {
player.play();
btn.value = "Pause";
duration.innerHTML = player.duration;
} else {
player.pause();
btn.value = "Play";
}
};
player.onended = function() {
btn.value = "Play";
};
var x = setTimeout(function timing() {
curtime.innerHTML = player.currentTime;
var y = setTimeout(timing, 100);
y = null;
}, 100);
x = null;
检测编码器是否支持
canPlayType():该方法接收一种格式/编解码器字符串,返回"probably"、"maybe"或""( 空字符串)。
if (audio.canPlayType("audio/mpeg")){
//进一步处理
}
canPlayType()传入了一种MIME类型,则返回值很可能是"maybe"或空字符串。
这是因为媒体文件本身只不过是音频或视频的一个容器,而真正决定文件能否播放的还是编码的格式。在同时传入MIME类型和编解码器的情况下,可能性就会增加,返回的字符串会变成"probably"。下面来看几个例子。
var audio = document.getElementById("audio-player");
//只传入MIME类型,很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
//进一步处理
}
//同时传入编解码器,可能是"probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
//进一步处理
}
4.历史状态管理
hashchange:可以知道URL的参数在什么时候发生变化,也就是什么时候该有所反应。
history.pushState(状态对象,新状态的标题,可选的相对URL):将新的状态信息加载到历史状态中。
popstate:按下后退键之后触发,使状态对象(event.state)是当前状态。
popstate的state属性:包含当初以第一个参数传递给pushState()的状态对象。得到这个对象后,要把页面重置为状态对象中的数据表示状态。
注意:浏览器的第一个页面没有状态,因此单击后退键之后,浏览器返回第一个页面,event.state=null。
replaceState(状态对象,新状态的标题):更新当前的状态,不会在历史状态栈中创建新状态,只会重写当前状态。