首先,看一段调用全屏、退出全屏的代码。
<!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可以判断页面当前是否是显示状态。
<!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,操作的一长串字符串,需要自己分割,会被强制发送到服务器。
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是有关用户隐私的API,需要得到用户的同意才能有效。
为了安全限定,要求正式网站必须使用https协议。
自行测试使用localhost 访问(注:IP地址不可)
服务器不稳定。
在手机上访问稳定性和精确度会高很多。
<!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 成功回调函数
errorCallback 失败回调函数