全屏及監聽全屏事件

在 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);