最后一部分介紹HTML5其他新技術。
1. 地理位置
HTML5地理定位功能由navigator.geolocation對象提供，API方法有三個：
- getCurrentPosition： 獲取當前位置信息，包含經緯度挤巡，海拔慷垮，精度绵患。
navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
- watchPosition：定期輪詢設備位置信息，函數入參和getCurrentPosition相同账胧。
var watchID = navigator.geolocation.watchPosition(successCallback, [errorCallback] , [positionOptions]);
- clearWatch：配合watchPosition()使用竞慢，停止輪詢
clearWatch(watchID);
瀏覽器在加載位置信息時，會開啟詢問窗口治泥，需要用戶確定后才允許網站訪問該數據筹煮。
查找坐標的方法是異步的，不會立刻返回數據居夹，所以需要回調函數來處理成功或失敗消息败潦。下面是一個簡單的例子，點擊“l(fā)ocation”按鈕訪問位置信息：
<body>
<button onclick="getPosition()">Location!</button>
<div id="info"></div>
<script>
var infoElt = document.getElementById("info");
function getPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geolocationSuccess,
geolocationFailure,
{
enableHighAccuracy: true, // 用高精度GPS位置檢測
timeout: 100000, // 等待位置數據返回的最大時間
maximunAge: 300000 // 緩存位置數據時間
})
}
else {
infoElt.textContent = "Do not support navigator.geolocation!";
}
}
// 成功時的回調函數
function geolocationSuccess(position) {
infoElt.textContent = "Location: " + position.coords.latitude + ";" + position.coords.longitude;
}
// 失敗時的回調函數
function geolocationFailure(error) {
infoElt.textContent = "Error: code is " + error.code + "; message is " + error.message;
}
</script>
</body>
小貼士
navigator是JavaScript中一個比較特殊的對象准脂，它的屬性包含當前瀏覽器的信息劫扒。
比如，最常用的navigator.userAgent狸膏，返回瀏覽器的版本號沟饥，操作系統(tǒng)等細節(jié)。
這個屬性常用于檢測移動設備操作系統(tǒng)湾戳，IOS或者Android闷板。
2. history對象
單頁面應用中使用的路由系統(tǒng)，常用的實現(xiàn)方式是監(jiān)聽錨地變化院塞，即Hashbang URL遮晚。另一只實現(xiàn)方式就是利用history對象管理會話歷史，在URL變化的情況下不刷新頁面拦止。
history對象提供3個方法：
- pushState(): 添加新的歷史條目
- replaceState(): 用新條目替代已有的歷史條目
- popstate事件: 每當激活的歷史記錄發(fā)生變化時县遣，該事件被觸發(fā)（激活的歷史記錄為用pushState創(chuàng)建的歷史條目）
例如，調用history.pushState(pageData, pageData.title, pageURL);方法添加一條新的歷史幾句汹族，頁面URL發(fā)生變化萧求，這時會觸發(fā)popstate事件，在事件回調中顶瞒，可以做UI方面的更新操作夸政，同時，頁面不會reload榴徐。
window.addEventListener('popstate', function(event) {
updateContent();
});
3. 拖拽
HTML5提供拖拽的API守问，可以在需要拖拽/目標的元素上監(jiān)聽這些事件匀归，從而操作DOM元素。
相關事件有：
- ondragstart：當拖拽元素開始被拖拽的時候觸發(fā)的事件（作用在被拖曳元素上）
- ondragenter：當拖曳元素進入目標元素的時候觸發(fā)的事件（作用在目標元素上）
- ondragover：拖拽元素在目標元素上移動的時候觸發(fā)的事件（作用在目標元素上）
- ondrop 事件：被拖拽的元素在目標元素上同時鼠標放開觸發(fā)的事件（作用在目標元素上）
- ondragend 事件：當拖拽完成后觸發(fā)的事件（作用在被拖曳元素上）
可以參考https://github.com/etianqq/html5-dnd-demo 耗帕，這個demo實現(xiàn)了在列表上拖拽列表項從而實現(xiàn)重新排序的功能穆端。
4. 跨域通信postMessage
window.postMessage()可以實現(xiàn)跨域通信，當調用此方法時仿便，會向目標窗口發(fā)送一個MessageEvent消息体啰，目標窗口通過監(jiān)聽事件接受消息。
主要用于跨域iframe直接通信嗽仪。
語法為：
otherWindow.postMessage(message, targetOrigin, [transfer]);
* otherWindow：其他窗口的一個引用荒勇，比如iframe的contentWindow屬性
* message：消息
* targetOrigin：目標地址
* transfer（可選）：和message一起傳遞的對象
在父窗口http://my.example.com中定義發(fā)送和接受消息：
<body>
<input type="button" value="get data from child frame" onclick="getData()"/>
<div id="result"></div>
<iframe src="http://child.example.com/api.html" frameborder="0" id="child-frame" style="display: none">
</iframe>
<script>
function getData(){
frames[0].postMessage('http://child.example.com/some-data', 'http://child.example.com');
}
window.addEventListener('message', function(event){
if (event.origin !== 'http://child.example.com'){
return;
}
document.getElementById('result').innerHTML = event.data;
}, false);
</script>
</body>
在子窗口http://child.example.com中定義發(fā)送和接受消息：
<script>
window.addEventListener('message', function(event){
if (event.origin !== 'http://my.example.com'){
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState ==4 && xhr.status ==200){
event.source.postMessage(xhr.responseText, 'http://my.example.com');
}
};
var url = event.data;
xhr.open(url, 'GET');
xhr.send(null);
}, false);
</script>
5. Web Component
用一個很簡單的標簽，比如<user-card>就可以實現(xiàn)較復雜的組件效果闻坚，且該組件的CSS和JS都是沙盒枕屉，外界代碼無法操控。這就是Web Component鲤氢。
具體講解可以參考老阮文章《Web Components 入門實例教程》搀擂，Demo：https://jsbin.com/xuqasemozo/edit?html,js,output
小結
當然，HTML5的功能還不止于系列文章中所提到的卷玉，在《HTML5簡明教程》中哨颂，只是把最常用的也是比較有特色的新特性介紹給大家，如有興趣相种，可以去探索更多HTML5的優(yōu)秀功能威恼。
