HTML5 脚本

浏览数：37 / 时间：2015年06月09日

1.跨文本消息传递

跨文本消息传递是指来自不同的域之间的页面相互传递消息，他的核心是postMessage()方法，即向另一个地方传递数据。对于psotMessage而言，另一个地方可以是页面中的iframe或者由当前页面弹出的窗口。它接受两个参数，一个消息和一个表示消息接收方来自哪个域，如下代码：

1 var iframeWin = document.getElementById(‘myFrame‘).contentWindow;
2 iframeWin.postMessage(‘some message‘,‘http://www.cy.com‘);

这里尝试着向页面中的框架传输消息，消息的内容为some message ，而且框架的文档必须来自于http://www.cy.com，不然postMessage什么都不会做。第二个参数可以设置为*，这样就可以向任何来源的框架发送消息。

在myFrame中，接受到message后，会激发window的message事件，通过对onmessage处理程序进行设置，就可以操作传递过来的message了，onmessage的事件对象主要包含三个重要信息，分别如下：

data：作为postMessage第一个参数传入的字符串数据

origin：发送消息的文档所在的域

source：发送消息的文档的window对象的代理

接受消息后首先应该验证消息来源的准确性，即判断origin是否是安全的，再根据传递过来的消息进行改变页面。

1 window.addEventListener(‘message‘,function(event){
2     if(event.origin == ‘http://www.cy.com‘){
3         console.log(event.data);
4         event.source.postMessage(‘received!‘,‘http://www.cy1.com‘);
5     }
6 },false);

这样，有了跨文档消息传递后，就可以安全的向iframe中传递信息了。

2.原生拖放

HTML5以IE实例为基础制定了拖放的规范，firefox，safari和chrome都实现了拖放的支持。对于拖放这个行为，只要从被拖放元素和防止目标两方面进行考虑

2.1 被拖放元素

在拖放元素师，被拖放元素会发生一系列事件，这些事件依次发生，触发事件如下：

dragstart

drag

dragend

在鼠标按住被拖放元素并移动时，触发dragstart事件，在拖放过程中，会不断触发drag事件，这个就像是mouseover一样，在拖动停止时，即放掉按住的左键，就会触发dragend事件。同时，要使元素可以被拖动，要对元素设置一个draggable属性，表示元素是否可以拖动。对其设置为ture，就可以支持拖动了。另外，要使firefox支持可拖动属性，必须添加一个dragstart事件处理，并在dataTransfer对象中保存一些信息。

2.2 放置目标

当拖动元素到某个有效的放置目标上时，下列事件会依次发生：

dragenter

dragover

dragleave或drop

只要拖动元素进入放置目标区域时，就会激发dragenter事件，在放置目标内部移动时，就会不断激发dragover，类似mouseover，最后在目标中放下被拖动元素时，激发drop事件，拖动元素离开放置目标时，激发dragleave。

所有元素都可成为放置目标区域，当时默认设置都是不可放置区域，所以元素拖动时会产生一个不可放置的光标。要想一个区域成为可放置的目标区域，就必须重写dragenter和dragover，示例如下：

 1 var target = document.getElementById(‘target‘);
 2 target.addEventListener(‘dragenter‘,function(event){
 3       console.log(‘enter‘);
 4       event.dataTransfer.dropEffect = ‘move‘;
 5       event.preventDefault();
 6 },false);
 7 target.addEventListener(‘dragover‘,function(event){
 8       console.log(‘over‘);
 9       event.preventDefault();
10 },false);

通过重写，就可以发现光标变成了可放置的形状。

对于event.preventDefault()，是因为有些浏览器中对于拖放的默认行为时打开放置目标上的URL，即拖放图片时会使页面转向图片。所以通过event.preventDefault()来阻止其发生，所以同时还要取消drop中的默认行为，阻止打开URL。

1 target.addEventListener(‘drop‘,function(event){
2        console.log(‘drop‘);
3        event.preventDefault();
4 },false);

3.媒体元素

这里指的媒体元素就是video和audio了，通过这两个标签，可以快速的插入要播放的媒体，同时可以用js进行快捷的控制。由于浏览器并不是支持所有的播放格式，所以可以用source标签，让浏览器自主选择可播放的格式。

<video id="myVideo">
        <source src=‘./conference.webm‘ type="video.webm;codecs=‘vp8, vorbis‘">
        <source src=‘conference.mpg‘>
</video>

video和audio都提供了一系列js接口，并有许多有用的方法，特别是play(),pause()，他们可以快捷的控制video和audio的播放和暂停。

在js中，有一个原生的构造函数Audio，可以在任何时候播放音频。Audio和Image很相似，但是Audio可以在未插入到dom时就可以播放，只要传入音频文件就可以了。

1 var audio = new Audio(‘http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/110083207/110076181219600128.mp3?xcode=7bac81081ab4c774f241b9edd617bbdba38a0832de3e1534&song_id=110076181‘);
2 audio.addEventListener(‘canplaythrough‘,function(){
3     audio.play();
4 },false);

4.历史状态管理

HTML5通过更新history对象为历史状态管理提供了方便，通过history.pushState()方法，可以在不加载新页面的情况下改变浏览器的URL，并将新的状态信息加入历史状态栈。它需要传入三个参数，分别是状态对象，新状态标题和可选的相对URL。

history.pushState({foo:‘bar‘},‘canvas‘,‘canvas.html‘)

同时，要更新当前状态，可以使用replaceState，传入的参数和pushState相同，它可以重写当前状态，而不会新增状态。

以下是以上几个例子的综合，最后一个历史状态管理在本地运行时由于无法验证origin，会报错无法运行，要放到某个域下跑才可以

<html>
<head>
    <script type="text/javascript" id="sc">
        window.onload = function(){
            var target = document.getElementById(‘target‘);
            target.addEventListener(‘dragenter‘,function(event){
                console.log(‘enter‘);
                event.dataTransfer.dropEffect = ‘move‘;
                event.preventDefault();
            },false);
            target.addEventListener(‘dragover‘,function(event){
                console.log(‘over‘);
                event.preventDefault();
            },false);
            target.addEventListener(‘dragleave‘,function(event){
                console.log(‘dragleave‘);
            },false);
            target.addEventListener(‘drop‘,function(event){
                console.log(‘drop‘);
                console.log(event.dataTransfer.getData(‘text‘))
                event.preventDefault();
            },false);
            var source = document.getElementById(‘source‘);
            source.addEventListener(‘dragstart‘,function(event){
                console.log(‘dragstart‘);
                event.dataTransfer.setData(‘text‘,‘www.baidu.com‘);
                event.dataTransfer.effectAllowed = ‘all‘;
            },false);
            source.addEventListener(‘dragend‘,function(event){
                console.log(‘dragend‘);
            },false);
            var audio = new Audio(‘http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/110083207/110076181219600128.mp3?xcode=7bac81081ab4c774f241b9edd617bbdba38a0832de3e1534&song_id=110076181‘);
            audio.addEventListener(‘canplaythrough‘,function(){
                audio.play();
            },false);
        }
        function openWindow(){
            var win = window.open();
            win.document.body.innerHTML = document.body.innerHTML;
            win.document.head.title = ‘a‘;
            var script = win.document.createElement(‘script‘);
            script.type = "text/javascript";
            script.text = "var audio = new Audio(‘http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/110083207/110076181219600128.mp3?xcode=7bac81081ab4c774f241b9edd617bbdba38a0832de3e1534&song_id=110076181‘);audio.addEventListener(‘canplaythrough‘,function(){audio.play();},false);";
            win.document.head.appendChild(script);
        }
        function hisPush(){
            history.pushState({foo:‘bar‘},‘canvas‘,‘canvas.html‘)
        }
    </script>
</head>
<body>
    <div id="target" style="width:400px;height:400px;border:1px solid red;"></div>
    <div id=‘source‘ style="width:50px;height:50px;background:red;" draggable=true></div>
    <input type="button" value="open new window" onclick="openWindow()"/>
    <input type="button" value="history" onclick="hisPush()"/>
</body>
</html>