api html5提供哪些 html5的api有哪些

HTML5 API

• HTML5 地理位

• getCurrentPosition()
• watchPosition()
• clearWatch()

• HTML5 拖放

• 把元素设置为可拖放
• 拖拽API
• 源对象事件与目标对象事件间的数据传递
• 实例1——简单的图片拖动

• HTML5 本地存储

• localStorage 对象
• sessionStorage 对象

• HTML5 应用缓存

• 优势
• 设置manifest
• Manifest文件
• 实例

• HTML5 Web Workers
• HTML5 SSE

HTML5 地理位

HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

函数方法	描述	参数
getCurrentPosition()	获得用户的位置	success, error, options
watchPosition	返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）	success, error, options
clearWatch()	停止 watchPosition() 方法	id

getCurrentPosition()

语法

navigator.geolocation.getCurrentPosition(success, error, options)

参数

参数	描述
success	成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数
error	获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项
options	一个可选的PositionOptions 对象

返回数据

Position对象
若成功，则 getCurrentPosition() 方法返回Position对象。
始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

PositionError对象

PositionError.code

值	相关联的常量	描述
1	PERMISSION_DENIED	地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限（用户不允许地理定位）
2	POSITION_UNAVAILABLE	地理位置获取失败，因为至少有一个内部位置源返回一个内部错误（无法获取当前位置）
3	TIMEOUT	获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时长（操作超时）

PsitionError.message
返回一个开发者可以理解的 DOMString 来描述错误的详细信息。

实例

一个简单的地理定位实例，可返回用户位置的经度和纬度，不含错误处理

<script>
	var x=document.getElementById("demo");
	function getLocation() {
		if (navigator.geolocation) {
    		navigator.geolocation.getCurrentPosition(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;
	}
	/*
		- 检测是否支持地理定位
		- 如果支持，则运行 getCurrentPosition()方法；如果不支持，则向用户显示一段消息
		- 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个Position对象
		- showPosition() 函数获得并显示经度和纬度
	*/
</script>

处理错误和拒绝

navigator.geolocation.getCurrentPosition(showPosition,showError);

function showError(error) {
	switch(error.code) {
    	case error.PERMISSION_DENIED:
      		x.innerHTML="User denied the request for Geolocation."
      		break;
    	case error.POSITION_UNAVAILABLE:
      		x.innerHTML="Location information is unavailable."
      		break;
    	case error.TIMEOUT:
      		x.innerHTML="The request to get user location timed out."
      		break;
		case error.UNKNOWN_ERROR:
			x.innerHTML="An unknown error occurred."
			break;
    }
}

watchPosition()

clearWatch()

navigator.geolocation.watchPosition(success, error, options)

clearWatch() 的参数 id：希望移除的监听器所对应的 Geolocation.watchPosition() 返回的 ID 数字

实例

<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;
    }
    //失败的回调函数
    function showError(error){
    	console.log(error);
    }
    //配置参数对象
    var options = {
    	maximumAge:0,//设置watchPosition()方法执行时间，单位ms，默认0ms
    }
    var id = window.navigator.geolocation.watchPosition(getLocation, showError, options);
    //清除watch1
    window.navigator.geolocation.clearWatch(id);
</script>

HTML5 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置，任何元素都能够拖放。

把元素设置为可拖放

<img draggable="true">

拖拽API

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象到目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

源对象事件与目标对象事件间的数据传递

e.dataTransfer { }          //数据传递对象:用于在源对象和目标对象的事件间传递数据

e.dataTransfer.setData(k, v);     //k、v必须都是string类型, 源对象上的事件处理中保存数据

var v = e.dataTransfer.getData( k );     //目标对象上的事件处理中读取数据

实例1——简单的图片拖动

<!DOCTYPE HTML>
<html>
	<head>
	<style type="text/css">
	#div1 {
		width:198px;
		height:66px;
		padding:10px;
		border:1px solid #aaaaaa;
	}
	</style>
	
	<script type="text/javascript">
	
		function allowDrop(ev) {
			ev.preventDefault();
			//默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式
		}
		function drag(ev) {
			ev.dataTransfer.setData("Text",ev.target.id); 
			//数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")
		}
		function drop(ev) {
		//当放开被拖源对象时，会发生该drop事件
			ev.preventDefault();
			//调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
			var data=ev.dataTransfer.getData("Text");
			//获得被拖的数据，将之前传输的 id ("drag1")获取到变量 data 中
			ev.target.appendChild(document.getElementById(data));
			//把被拖元素追加到放置元素中
		}
	</script>
	</head>
	<body>
		<p>请把以下图片拖放到矩形中：</p>
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<img id="drag1" src="imgs/NeverLogo.jpg" draggable="true" ondragstart="drag(event)" style="height:66px; width:198px;"/>
	</body>
</html>

如果想在两个方框之间来回拖动图片的话，只要再设置一个矩形为目标对象即可：

//需要改动元素选择器的范围，或者在所有的对象目标上设置属性class
div {
	width:198px;
	height:66px;
	padding:10px;
	border:1px solid #aaaaaa;
}

<body>
	<p>请在矩形之间任意拖动：</p>
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
		<img id="drag1" src="imgs/NeverLogo.jpg" draggable="true" ondragstart="drag(event)" style="height:66px; width:198px;"/>
	</div>	
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>

HTML5 本地存储

HTML Web存储提供了两个在客户端存储数据的对象：

window.localStorage	存储没有截止日期的数据 （浏览器关闭或者标签页关闭数据不会丢失）
window.sessionStorage	针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

<!DOCTYPE html>
<html>
	<body>
		<div id="result"></div>
	<script>
		// Check browser support
		if (typeof(Storage) !== "undefined") {
    		// Store：创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
    		localStorage.setItem("lastname", "Gates");
    		// Retrieve
    		document.getElementById("result").innerHTML = localStorage.getItem("lastname");
		} 
		else {
    		document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
		}
	</script>
	</body>
</html>

上例也可这样写：

// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;

//删除 "lastname" localStorage 项目的语法如下：
localStorage.removeItem("lastname");

//名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增：

<!DOCTYPE html>
<html>
	<head>
	<script>
		function clickCounter() {
    		if(typeof(Storage) !== "undefined") {
        		if (localStorage.clickcount) {
            		localStorage.clickcount = Number(localStorage.clickcount)+1;
        		}
        		else {
            		localStorage.clickcount = 1;
        		}
        	document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
    		} 
    		else {
        		document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
    		}
		}
	</script>
	</head>
	<body>
		<p><button onclick="clickCounter()" type="button">请点击这里！</button></p>
		<div id="result"></div>
		<p>请点击按钮使计数器递增。</p>
		<p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>
	</body>
</html>

sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

下例在当前 session 中对用户点击按钮进行计数(关闭标签后就会重新计数）：

<!DOCTYPE html>
<html>
	<head>
	<script>
		function clickCounter() {
    		if(typeof(Storage) !== "undefined") {
        		if (sessionStorage.clickcount) {
            			sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        		} 
        		else {
            		sessionStorage.clickcount = 1;
       			}
        		document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
    		} 
    		else {
        		document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
   			}
		}
	</script>
	</head>
	<body>
		<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
		<div id="result"></div>
		<p>请点击按钮使计数器递增。</p>
		<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
	</body>
</html>

HTML5 应用缓存

使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本。

优势

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

• 离线浏览 ： 用户可在应用离线时使用它们
• 速度 ： 已缓存资源加载得更快
• 减少服务器负载 ： 浏览器将只从服务器下载更新过或更改过的资源

设置manifest

<html manifest="demo.appcache">

Manifest文件

manifest 文件有三个部分：

• CACHE MANIFEST ： 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK ： 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK ： 在此标题下列出的文件规定当页面无法访问时的回退页面（比如404 页面）

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个JavaScript 文件。当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然可用。

NETWORK:
login.asp

NETWORK 规定文件 “login.php” 永远不会被缓存，且离线时是不可用的。

可以使用星号来指示所有其他其他资源/文件都需要因特网连接：

NETWORK:
*

FALLBACK 规定如果无法建立因特网连接，则用 “offline.html” 替代 /html/ 目录中的所有文件：

FALLBACK:
/html/ /offline.html

//第一个 URI 是资源，第二个是替补

实例

菜鸟教程的manifest实现

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head> 
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>

HTML5 Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。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"){
				//检测是否存在worker，否则会创建一个新的web worker对象，然后运行 "demo_workers.js" 中的代码：
  				if(typeof(w)=="undefined") {
  					w=new Worker("/example/html5/demo_workers.js");
  				}
  				//向web worker添加一个 "onmessage" 事件监听器：
  				w.onmessage = function (event) {
    				document.getElementById("result").innerHTML=event.data;
    			};
 		 	}
			else {
  				document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  			}
		}
		//终止 web worker
		function stopWorker() { 
			w.terminate();
		}
	</script>
	</body>
</html>

菜鸟教程的WebWorkers实现

HTML5 SSE

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>获取服务端更新数据</h1>
		<div id="result"></div>
	<script>
		//检测SSE事件支持
		if(typeof(EventSource)!=="undefined") {
			//创建一个新的EventSource对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
			var source=new EventSource("demo_sse.php");
			//每接收到一次更新，就会发生 onmessage 事件
			source.onmessage=function(event) {
				//当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
				document.getElementById("result").innerHTML+=event.data + "<br>";
			};
		}
		else {
			document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
		}
	</script>
	</body>
</html>

菜鸟教程的SSE实现