一、全屏方法和事件
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