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="400px;height:400px;border:1px solid red;"></div> <div id='source' style="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>