首先,看一段調(diào)用全屏列肢、退出全屏的代碼恰画。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" name="button">全屏</button>
<button type="button" name="button">退出全屏</button>
</body>
<script type="text/javascript">
document.querySelectorAll("button")[0].onclick = function(){
console.log(document.body.requestFullscreen)
document.body.webkitRequestFullScreen();
}
document.querySelectorAll("button")[1].onclick = function(){
document.webkitCancelFullScreen();
}
</script>
</html>
h5新增的visibilitychange可以判斷頁面當(dāng)前是否是顯示狀態(tài)。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" name="button">全屏</button>
<button type="button" name="button">退出全屏</button>
</body>
<script type="text/javascript">
console.log(document.visibilityState);
document.addEventListener("visibilitychange",function(){
console.log(document.visibilityState);
console.log(document.hidden);
})
</script>
</html>
存儲
分為本地存儲 localStorage和會話存儲sessionStorage瓷马,在一定程度上解決了cookie的不便利性拴还。存儲上限5M。
存儲模式:鍵值對欧聘,API靈活片林。
cookie只能存儲4kb,api不方便怀骤,都是document.cookie费封,操作的一長串字符串,需要自己分割蒋伦,會被強制發(fā)送到服務(wù)器弓摘。
localStorage除非手動清除,否則永久存在痕届,沒有超時時間韧献。
sessionStorage是只會在繪畫期間有效末患,localStorage永久有效。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var obj ={age:12,address:"北京"};
console.log(localStorage);
localStorage.setItem("user","admin");
localStorage.setItem("desc",JSON.stringify(obj));
console.log(localStorage.getItem("user"));
console.log(JSON.parse(localStorage.getItem("desc")));
localStorage.setItem("user","admin");
localStorage.removeItem("user");
</script>
</html>
位置
geolocation是有關(guān)用戶隱私的API锤窑,需要得到用戶的同意才能有效璧针。
為了安全限定,要求正式網(wǎng)站必須使用https協(xié)議果复。
自行測試使用localhost 訪問(注:IP地址不可)
服務(wù)器不穩(wěn)定陈莽。
在手機上訪問穩(wěn)定性和精確度會高很多。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
console.log(navigator)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(coords){
console.log(coords)
},function(err){
});
}
</script>
</html>
navigator.geolocation.getCurrentPosition(successCallback,errorCallback[,options])
successCallback 成功回調(diào)函數(shù)
errorCallback 失敗回調(diào)函數(shù)