HTML5简明教程（七）其他新技术

最后一部分介绍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);

浏览器在加载位置信息时，会开启询问窗口，需要用户确定后才允许网站访问该数据。

confrim dialog.png

查找坐标的方法是异步的，不会立刻返回数据，所以需要回调函数来处理成功或失败消息。下面是一个简单的例子，点击“location”按钮访问位置信息：

Location!

小贴士

navigator是JavaScript中一个比较特殊的对象，它的属性包含当前浏览器的信息。
比如，最常用的navigator.userAgent，返回浏览器的版本号，操作系统等细节。
这个属性常用于检测移动设备操作系统，IOS或者Android。

2. history对象

单页面应用中使用的路由系统，常用的实现方式是监听锚地变化，即Hashbang URL。另一只实现方式就是利用history对象管理会话历史，在URL变化的情况下不刷新页面。

history对象提供3个方法：

• pushState(): 添加新的历史条目
• replaceState(): 用新条目替代已有的历史条目
• popstate事件: 每当激活的历史记录发生变化时，该事件被触发（激活的历史记录为用pushState创建的历史条目）

例如，调用history.pushState(pageData, pageData.title, pageURL);方法添加一条新的历史几句，页面URL发生变化，这时会触发popstate事件，在事件回调中，可以做UI方面的更新操作，同时，页面不会reload。

window.addEventListener('popstate', function(event) {
  updateContent();
});

3. 拖拽

HTML5提供拖拽的API，可以在需要拖拽/目标的元素上监听这些事件，从而操作DOM元素。

相关事件有：

• ondragstart：当拖拽元素开始被拖拽的时候触发的事件（作用在被拖曳元素上）
• ondragenter：当拖曳元素进入目标元素的时候触发的事件（作用在目标元素上）
• ondragover：拖拽元素在目标元素上移动的时候触发的事件（作用在目标元素上）
• ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件（作用在目标元素上）
• ondragend 事件：当拖拽完成后触发的事件（作用在被拖曳元素上）

可以参考https://github.com/etianqq/html5-dnd-demo ，这个demo实现了在列表上拖拽列表项从而实现重新排序的功能。

4. 跨域通信postMessage

window.postMessage()可以实现跨域通信，当调用此方法时，会向目标窗口发送一个MessageEvent消息，目标窗口通过监听事件接受消息。

主要用于跨域iframe直接通信。

语法为：

otherWindow.postMessage(message, targetOrigin, [transfer]);

* otherWindow：其他窗口的一个引用，比如iframe的contentWindow属性
* message：消息
* targetOrigin：目标地址
* transfer（可选）：和message一起传递的对象

在父窗口http://my.example.com中定义发送和接受消息：

在子窗口http://child.example.com中定义发送和接受消息：

小结

当然，HTML5的功能还不止于系列文章中所提到的，在《HTML5简明教程》中，只是把最常用的也是比较有特色的新特性介绍给大家，如有兴趣，可以去探索更多HTML5的优秀功能。

更多高阶内容，可移步《小专栏-娜姐聊前端》。