HTML5脚本编程

2017-07-29 本文已影响43人阿r阿r

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

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

2.5 可拖动

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

2.6 属性整理

DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。

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

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 音频

用法：

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

属性：

多媒体元素属性

事件

多媒体元素事件

自定义播放器

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

<div class="mediaplayer">
    <div class="video">
        <video id="player" 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(状态对象，新状态的标题)：更新当前的状态，不会在历史状态栈中创建新状态，只会重写当前状态。