Compatible with full screen mechanism of IE browser

Since the IE browser does not support the full-screen mechanism of H5 compared with some versions, it is necessary to perform compatibility processing on the full-screen to facilitate people's use.

First we have to introduce two methods:

1. Request to enter full screen mode element.requestFullscreen()

This method is used to make an asynchronous request to put the element into full screen mode.

① If the element is allowed to enter full screen mode, the document object will receive a fullscreenchange event to notify the caller that the current element has entered full screen mode.

② If the full screen request is not permitted, a fullscreenerror event will be received.

Note: Before calling the element.requestFullscreen() method, you can listen to the fullscreenchange and fullscreenerror events

(1) fullscreenchange event

This event is fired when the browser opens or closes full screen mode.

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

(2) fullscreenerror event

Fired when the browser cannot switch to fullscreen mode.

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

From the above two events, the following two properties are obtained:

(3) document.fullscreenElement

This property returns the DOM element currently in fullscreen mode (read-only property)

(4) document.fullscreen

This property is used to return whether the document is currently in full screen (read-only property), the return value is a boolean type

return value:

1. true: the current document is in full screen mode

2. false: the current document is not in full screen mode

(5) Compatible writing for requesting full screen:

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. Cancel entering full screen mode element.cancleFullScreen()

      This method is used to take the current document out of full-screen mode.

       Since the browser has a stack for storing full-screen elements, after the current element exits full-screen, if there are other elements in the stack, the other elements will remain in the full-screen state.

(1) Compatible writing method to exit full screen:

//退出全屏
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. Full screen case compatible with IE browser

Ideas:

<!-- 定义一个宽高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;
    }
});