全屏及监听全屏事件

在 HTML5 中, W3C 制定了关于全屏的 API，就可以实现全屏幕的效果，全屏目前只有 google chrome 15 +, safri5.1+,firfox10+,IE11 支持 

全屏：

var docElm = document.documentElement;

//W3C
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
}
退出全屏：
if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}
事件监听：
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
 
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
 
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
 
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
全屏样式设置 ：
html:-moz-full-screen {
    background: red;
}
 
html:-webkit-full-screen {
    background: red;
}
  
html:fullscreen {
    background: red;
}
项目代码实例：
 
fullScreen(event) {
var viewFullScreen = event.target;
if (event.target.parentNode.style.width = '50%') {
var docElm = event.target.parentNode;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else {
alert("当前浏览器不支持全屏化操作！");
}
return false;
}
else if (event.target.parentNode.style.width = '100%') {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else {
alert("当前浏览器不支持全屏化操作！");
}
return false;
}
},
监听全屏事件
document.addEventListener("fullscreenchange", function (event) {
if (document.fullscreen === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("msfullscreenchange", function (event) {
if (document.msFullscreenElement === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("mozfullscreenchange", function (event) {
if (document.mozFullScreen === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("webkitfullscreenchange", function (event) {
if (document.webkitIsFullScreen === false ){
console.log(event.target)
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
posted @ 2018-08-22 10:21  小淘气鬼--弟弟  阅读(2660)  评论(0)  编辑  收藏  举报