js技巧篇(二)实现浏览器大屏功能

2018, Nov 16    

简单来说,浏览器的大屏就是触发浏览器的F11功能,将需要绘制的dom绘制出来。需要兼容浏览器

代码如下:

/**
 *  函数说明:显示全屏的事件
 *  @param: fullscreenDom 需要全屏的dom
 */
onShowFullscreenEvent: function (fullscreenDom) {
    var fullScreenEvent = fullscreenDom.requestFullScreen
        || fullscreenDom.webkitRequestFullScreen
        || fullscreenDom.mozRequestFullScreen
        || fullscreenDom.msRequestFullScreen;

    if (typeof fullScreenEvent != "undefined" && fullScreenEvent) {
        fullScreenEvent.call(fullscreenDom);
        return;
    }
    //IE兼容
    if (typeof window.ActiveXObject != "undefined") {
        var ieActiveObject = new ActiveXObject("WScript.Shell");
        if (ieActiveObject) {
            ieActiveObject.SendKeys("{F11}");
        }
    }
},
/**
 *  函数说明:退出全屏的事件
 */
onExitFullscreenEvent: function () {
    var kanbanFullscreenMain = document;
    var fullScreenEvent = kanbanFullscreenMain.cancelFullScreen
        || kanbanFullscreenMain.webkitCancelFullScreen
        || kanbanFullscreenMain.mozCancelFullScreen
        || kanbanFullscreenMain.exitFullScreen;

    if (typeof fullScreenEvent != "undefined" && fullScreenEvent) {
        fullScreenEvent.call(kanbanFullscreenMain);
        return;
    }

    if (typeof window.ActiveXObject != "undefined") {
        var ieActiveObject = new ActiveXObject("WScript.Shell");
        if (ieActiveObject != null) {
            ieActiveObject.SendKeys("{F11}");
        }
    }
}