<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img src="../images/l1.jpg" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
</div>
<script>
/*全屏操作的主要方法和屬性
* 1.requestFullScreen():開啟全屏顯示
* 不同瀏覽器需要添加不同的前綴
* chrome:webkit firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏顯示:也添加前綴，在不同的瀏覽器下.退出全屏只能使用document來實現
* 3.fullScreenElement:是否是全屏狀態，也只能使用document進行判斷*/
window.onload=function(){
var div=document.querySelector("div");
/*添加三個按鈕的點擊事件*/
/*全屏操作*/
document.querySelector("#full").onclick=function(){
/*div.requestFullScreen();*/
/*div.webkitRequestFullScreen();*/
/*div.mozRequestFullScreen();*/
/*使用能力測試添加不同瀏覽器下的前綴*/
if(div.requestFullScreen){
div.requestFullScreen();
}
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
else if(div.msRequestFullScreen){
div.msRequestFullScreen();
}
}
/*退出全屏*/
document.querySelector("#cancelFull").onclick=function(){
if(document.cancelFullScreen){
document.cancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msCancelFullScreen){
document.msCancelFullScreen();
}
}
/*判斷是否是全屏狀態*/
document.querySelector("#isFull").onclick=function(){
/*兩個細節：使用document判斷 能力測試*/
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alert(true);
}
else{
alert(false);
}
}
}
</script>
</body>
</html>
