000
000
7月前 · 4 人阅读

本文对在JS中涉及到的HTML5脚本做了简单整理。最近比较忙,不是特别细致,以后补充。

1.跨文档消息传递


跨文档消息传送(cross-document messaging),有时候也简称为XDM

指的是在来自不同域页面间传递消息。

在XDM机制出现之前,更稳妥地实现这种通信需要花很多功夫。XDM把这种机制规范化,让我们能既稳妥有简单地实现跨文档通信。

核心postMessage()方法
目的:向另一个地方传递数据。
另一个地方:指的是包含在当前页面中的<iframe>元素,或者由当前页面弹出的窗口。
接收两个参数:一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。

主要语句

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':即说被拖动元素在放置到目的地时,可以上面的任意一种效果来处理。

  1. 必须在ondraggstart事件处理程序中设置effectAllowed属性。

2.5 可拖动

draggable属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
<div title="拖拽我" draggable="true">列表1</div>

2.6 属性整理

  1. DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
  2. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
    <div title="拖拽我" draggable="true">列表1</div>
  3. ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
  4. ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
  5. ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
  6. ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
  7. ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
  8. Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
  9. Event.effectAllowed 属性:就是拖拽的效果。

在这里推荐大家阅读这篇博客,配合实例练习http://blog.csdn.net/baidu_25343343/article/details/53215193

3.媒体元素


video 视频
audio 音频

用法:
<audio id="player" data-src="trailer.ogg" poster="universal.gif" controls>不支持音频</audio>
<video id="player" data-src="trailer.ogg" poster="universal.jpg" width="300" height="200">不支持视频</video>

属性:
事件

自定义播放器

主要使用:play() 、pause()
DOM部分:

<div class="mediaplayer">
    <div class="video">
        <video id="player" data-src="opening.mp4" poster="opening.png" 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>

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(状态对象,新状态的标题):更新当前的状态,不会在历史状态栈中创建新状态,只会重写当前状态。

收藏 0
元素 player 事件 audio div documen
评论 ( 0 )