🍗 HTML5 API
# HTML5 地理定位
HTML Geolocation API 用于获取用户的地理位置，在获取之前需要用户的统一开启获取地理位置的权限。
使用 getCurrentPosition() 方法获取。
🌰 例子：
- 首先检查是否支持地理定位，如果支持才运行
getCurrentPosiiton方法。如果不支持，发送不支持的消息；position.coords.latitude/position.coords.longitude获取地理位置经纬度。
更多的属性：
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米 / 每秒计 |
| timestamp | 响应的日期 / 时间 |
使用 watchPosition() ：返回用户当前的位置，并继续返回用户移动时更新的位置； clearWatch() 方法：停止 watchPosition() 方法。
🌰 例子：
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# HTML5 拖放
拖放（Drag 和 Drop）操作指的是用户抓取某个元素并拖入到不同的位置。拖放是 HTML5 标准中的一部分，任何元素都是可拖放的。
🌰 例子：
# HTML5 应用缓存
HTML5 引入了应用程序缓存，意味着可对 web 应用进行缓存，并可在没有网络连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览：用户可在应用离线时使用它们；
- 速度：已缓存资源加载得更快；
- 减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源；
🌰 例子 / 带有 cache manifest 的 HTML 文档，可供离线阅读：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
</body>
</html>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
1
2
3
4
2
3
4
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest的文件拓展名建议为.appchache；manifest文件需要设置正确的MIME-type，即text/cache-manifest。必须在 web 服务器上进行配置。
更新缓存 / 一旦应用被缓存，就会保存缓存直到发生下列情况：
- 用户清空浏览器缓存；
manifest文件被修改；- 由程序来更新应用缓存；
关于应用缓存需要注意：
- 一旦文件被缓存，浏览器会继续展示已经缓存的版本，即使修改了服务器上的文件；为了确保浏览器更新缓存，需要更新
manifest文件。 - 浏览器对缓存数据的容量限制可能不太一样；
# HTML5 WebWorkers
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。继续做任何事情：点击、选取内容等等，而此时 web worker 运行在后台。
🌰 例子：
<!DOCTYPE html>
<html>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("/example/html5/demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
在使用 Web Workers 之前，需要检查浏览器是否支持它。
创建 Web Worker 文件。
编辑 (opens new window)
📢 上次更新: 2022/09/02, 10:18:16