文章目录：
html5 新特性
获取地理位置：
原理：包含GPS硬件的设备上，通过GPS单元可以获取精确的位置信息。如果没有，通过web IP地址分析属于那个城市那个位置。
函数举例：
navigator.geolocation.getCurrentPosition(function(pos){ console.log(pos); })
历史管理记录： 利用 history保存历史记录的状态信息。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title></title> <script> "use strict" window.onload = newGame; window.onpopstate=popstate; /** * pushState方法保存历史状态 * 这个方法会接受一个状态对象并为该对象创建一份私有副本。（深复制深拷贝） * */ var state = { "info":'11' } history.replaceState(state, '','p1.html#hah') function newGame() { var ui = { 'prompt': null, 'input': null, 'info': null } for (var i in ui) { //用判断属性是否存在与ui中。 ui[i] = document.getElementById(i); } /*给input添加一个事件处理函数*/ ui.input.onchange = handleGuess; // console.log(ui.input.onchange); } function handleGuess() { var g = parseInt(this.value); if (g % 7 == 0) { save(state); //display(state); } } function save(state) { if (!history.pushState)return; var url ="xxx"; history.pushState(state, "", url); //利用pushState把信息保存在历史状态中。 } function popstate(){ } </script> </head> <body> <div id="heading"> 测试历史记录管理 </div> <div id="info"></div> <label id="prompt"></label> <input id="input" type="text"/> </body> </html>
跨域消息传递：
如果你上网页，想把页面直接翻译成英文，那么你可以定义一个gadget小工具框。当划过中文 ，这个框就会显示中文了。
这样做的好处：第一，如果将第三方直接嵌入到脚本文件，不安全。
两个文件：
p2_1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> window.addEventListener("message",handleMessage,false); function handleMessage(e){ // console.log(e); var input= document.getElementById('display'); input.value= e.data; } </script> </head> <body> <input id="display" type="text" value="显示" onclick="handleMessage" /> </body> </html>
p2_2.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title></title> <script src="p2.js"></script> </head> <body> <p>你好</p> <p>我好</p> <p>她也好</p> </body> </html>
p2.js
window.addEventListener('load', function () { origin = 'http://localhost';//指定目标窗口的源，包括协议，主机名以及URL端口部分。 iframe = document.createElement("iframe"); iframe.src = 'http://localhost/web/javascript/p2_1.html'; iframe.width = 800; iframe.height = 500; iframe.style.cssFloat = 'right'; document.body.insertBefore(iframe, document.body.firstChild); var links = document.getElementsByTagName('p'); for (var i = 0; i < links.length; i++) { links[i].addEventListener('mouseover', function () { console.log(this.innerHTML); //用this 而不是 lists[i],因为for循环结束后i的值恒定=3; iframe.contentWindow.postMessage(this.innerHTML, origin) }, false); } }, false)
客户端多线程：
web workers
<!DOCTYPE html> <html> <head> <script> function smear(img) { var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 300; var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); var pixels = context.getImageData(0, 0, img.width, img.height) var worker = new Worker('p3.js'); //这个会暂存在游览器缓存中，不关闭游览器，修改p3.js不会起作用。 worker.postMessage(pixels); // worker.terminate(); } window.addEventListener('load',function(){ var input = document.getElementById('input'); input.addEventListener('click', function () { console.log("done!"); }, false); },false); </script> </head> <body> <img src="img/girl.jpg" onclick="smear(this)"/> <input id="input" type="button"/> </body> </html>
onmessage=function(e){
sleep(4000);
console.log("web worker");
}
function sleep(n)
{
var start=new Date().getTime();
while(true)
{
debugger;
if(new Date().getTime()-start> n) break;
}
}
Worker作用域
通过Ｗorker()构造函数运行的js代码会运行在一个全新的Ｊavascript环境中。 ＷorkerGlobalScope全局对象。 有onmessage属性，postMessage()方法。因此在该环境中使用postMessage()和onmessage方法看起来就想全局函数和全局变量。WorkerGlobalScope全局对象可以用importScripts()来加载所有任何需要的库代码。
类型化数组和 ＡrrayBuffer
Blob
input type=file支持本地游览而不仅仅限于上传到服务器。
元素上的files属性是一个ＦileList对象， 其中对应的Ｆile对象就是一个Ｂlob.
<!DOCTYPE html> <html> <head> <title></title> <script> function fileInfo(file){ console.log(file); debugger; } </script> </head> <body> <input type="file" onchange="fileInfo(this.files)"/> <input type="file" multiple onchange="fileInfo(this.files)"/> <!--可以上传多个文件--> </body> </html>
XHR2 XMLHttpRequest对象脚本化HTTP.
<!DOCTYPE html> <html> <head> <title></title> <script> var blob BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder str='111'; if (typeof(BlobBuilder) !== 'undefined') { var bb = new BlobBuilder(); bb.append(str); blob = bb.getBlob('x-optional/mine-type-here'); } else { blob = new Blob([str]); } /*getBlobURL函数将返回一个blob对象。*/ var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) || (window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)|| (window.createObjectURL)); /*手动使blobURL失效*/ var revokeBlobURL = (window.URL && URL.revokeObjectURL.bind(URL)) || (window.webkitURL && webkitURL.revokeObjectURL.bind(webkitURL)|| (window.revokeObjectURL)); function fileInfo(file){ console.log(getBlobURL(file[0])); //前面说过 一个file[0]就是一个blob. revokeBlobURL(getBlobURL(file[0])); } </script> </head> <body> <input type="file" onchange="fileInfo(this.files)"> </body> </html>
使用 FileReader来读取文件：
<!DOCTYPE html> <html> <head> <title></title> <script> function readFile(file){ var reader = new FileReader(); reader.readAsText(file[0]); reader.onload=function(){ var text = reader.result; console.log(text); } } </script> </head> <body> <input type="file" onchange="readFile(this.files)"> </body> </html>
web操作文件系统：
IndexDB对象数据库
web套接字