兼容IE浏览器的全屏机制

由于IE浏览器较某些版本不支持H5的全屏机制，因此需要对全屏做兼容处理，以方便人们的使用。

首先我们要介绍两个方法：

1. 请求进入全屏模式 element.requestFullscreen()

该方法用于发出异步请求使元素进入全屏模式。

① 如果元素被允许进入全屏幕模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。

② 如果全屏请求不被许可，则会收到一个fullscreenerror事件。

注意：在调用element.requestFullscreen()方法之前，可以对fullscreenchange 和 fullscreenerror事件进性监听

(1) fullscreenchange事件

该事件在浏览器开启或关闭全屏模式时触发。

//例如：
document.addEventListener("fullscreenchange", function( event ) {
    if ( document.fullscreen ) {
        //当处于全屏时，执行以下代码
        console.log(document.fullscreenElement);//只读属性
        //该属性返回当前处于全屏模式的DOM元素
    }
});

(2) fullscreenerror事件

当浏览器不能切换全屏模式时触发。

//例如：
document.addEventListener("fullscreenerror", function( event ) {
    alert("您的浏览器不支持全屏！");
});

由上两个事件，得到下述两个属性：

(3) document.fullscreenElement

该属性返回当前处于全屏模式的DOM元素（只读属性）

(4) document.fullscreen

该属性用来返回该文档当前是否处于全屏（只读属性），返回值为布尔类型

返回值：

1. true：当前文档处于全屏模式下

2. false：当前文档不处于全屏模式下

(5) 请求全屏的兼容写法：

function reqFullScreen(element) {
        var de = element;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();//火狐浏览器的请求全屏
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();//谷歌、Safari浏览器的请求全屏
        } else if (de.msRequestFullscreen) {
            de.msRequestFullscreen();//IE浏览器的请求全屏
        } else {
            console.log("进入全屏失败")
        }
    }

2. 取消进入全屏模式 element.cancleFullScreen()

该方法用于让当前文档退出全屏模式。

由于浏览器内部有一个用于存放全屏元素的堆栈，因此，在当前元素退出全屏后，若堆栈内还有其他元素，那么其他元素仍将处于全屏状态。

(1) 退出全屏的兼容写法：

//退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }  
}

3. 兼容IE浏览器的全屏案例

思路：

<!-- 定义一个宽高200像素，背景色为粉色的盒子，并为它绑定双击事件-->
<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
}

//用来存储box盒子的原始宽高，在退出全屏时使用
var width = "";
var height = "";
//为box设置全屏
var box = document.querySelector(".box");
//绑定双击事件，实现全屏
box.ondblclick = function () {
    reqFullScreen(box);
}
//进入全屏（兼容写法）
function reqFullScreen(element) {
    var de = element;
    if (de.requestFullscreen) {
        de.requestFullscreen();
        remoceWH(de);
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
        remoceWH(de);
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
        remoceWH(de);
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
        doc = de;
        remoceWH(de);
    } else {
        console.log("进入全屏失败")
    }
}
//定义一个用来保存原始宽高，并将宽高属性删除的方法
function remoceWH(element) {
    //保存原始的宽高
    width = element.getAttribute("width");
    height = element.getAttribute("height");
    //移除object元素的宽高
    element.removeAttribute("width");
    element.removeAttribute("height");
}

//退出全屏（兼容写法）
 function exitFullscreen() {
     if (document.exitFullscreen) {
         document.exitFullscreen();
     }
     else if (document.msExitFullscreen) {
         document.msExitFullscreen();
     }
     else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
     }
     else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
     }
     //退出全屏时，将原来保存的宽高，给回box盒子，恢复原来的大小
     setWH();
 }
//设置元素的宽高属性值
 function setWH() {
     $("object[name='playOcx']").each(function () {
         $(this).attr("width", width);
         $(this).attr("height", height);
     });
 }
//监听enter事件，退出全屏
$(document).keyup(function (event) {
    switch (event.keyCode) {
    //13 为enter键的keyCode值，当监听到enter键的触发，立即退出全屏。
    //该按键不为固定，可以随意更换： 如 27 esc键
        case 13:
            exitFullscreen();
            break;
    }
});