html5老是自动退出全屏,HTML5--浏览器全屏操作、退出全屏、是否全屏

Title

/*全屏操作的主要方法和属性

* 1.requestFullScreen():开启全屏显示

* 不同浏览器需要添加不同的前缀

* chrome:webkit firefox:moz ie:ms opera:o

* 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现

* 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/

window.οnlοad=function(){

var div=document.querySelector("div");

/*添加三个按钮的点击事件*/

/*全屏操作*/

document.querySelector("#full").οnclick=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").οnclick=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").οnclick=function(){

/*两个细节：使用document判断 能力测试*/

if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){

alert(true);

}

else{

alert(false);

}

}

}