Html5 Api 实现浏览器全屏

一、全屏方法和事件

1、全屏显示

function fullScreen(toFullScreenElement)

{

var docElm =toFullScreenElement ;

//W3C

if (docElm.requestFullscreen) { //不能用document.requestFullscreen判断

docElm.requestFullscreen();

document.addEventListener("fullscreenchange", removeFullScreenEle, false);//监听全屏改变事件

}

//FireFox

else if (docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen();

document.addEventListener("mozfullscreenchange", removeFullScreenEle, false);//监听事件方法不能加参数，如果按esc退出的话则无法传递参数

}

//Chrome等

else if (docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen();

document.addEventListener("webkitfullscreenchange",removeFullScreenEle, false);

}

//IE11

else if (docElm.msRequestFullscreen) {

docElm.msRequestFullscreen();

document.addEventListener("MSFullscreenChange", removeFullScreenEle, false);//注意IE全屏状态改变事件名不能用小写mfsfullscreenchange,否则无法监听到,其他浏览器可以用小写

};

}

2、退出全屏

function exitFullScreen()

{

if (document.exitFullscreen) {

document.exitFullscreen();

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

else if (document.msExitFullscreen) {

document.msExitFullscreen();

};

}

3、全屏改变事件

function removeFullScreenEle() {

if (fullEle.requestFullscreen) {

if(document.fullscreen)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}

//FireFox

else if (fullEle.mozRequestFullScreen) {

if(document.mozFullScreen)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}

//Chrome等

else if (fullEle.webkitRequestFullScreen) {

if(document.webkitIsFullScreen)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}

//IE11

else if (fullEle.msRequestFullscreen) {

if(document.msFullscreenElement)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}

}

4、设置全屏样式

1、统一设置

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

html:-ms-fullscreen{

background:red !important;//如果有单独对全屏元素设置样式，则必须用!important标志，应该是在IE下系统默认全屏样式优先级低于自定义css样式

}

2、单独设置

#element:-moz-full-screen{}

#element:-webkit-full-screen{}

#element:fulscreen{}

#element:-ms-fullscreen{}

二、使用

1、整个浏览器全屏

fullScreen(document.documentElement);

2、某个元素全屏

fullScreen(document.getElementById('div1'));

3、退出全屏

exitFullScreen();

注意：IE下全屏改变事件不能用小写的mfsfullscreenchange，而要用大写的MSFullscreenChange