页面元素全屏展示

最大化方法:

/**
 * DOM元素全屏函数
 * @param  element 页面中DOM元素,如document.getElementById("xxx");
 * @return null
 */
launchIntoFullscreen(element) { 
    if(element.requestFullscreen){ 
        document.addEventListener('fullscreenchange', this.screenEvenListener());
        element.requestFullscreen(); 
        return;
    } else if(element.mozRequestFullScreen) {
        document.addEventListener('mozfullscreenchange', this.screenEvenListener());
        element.mozRequestFullScreen(); 
        return;
    } else if(element.webkitRequestFullscreen) { 
        document.addEventListener('webkitfullscreenchange', this.screenEvenListener());
        element.webkitRequestFullscreen(); 
        return;
    } else if(element.msRequestFullscreen) {
        document.addEventListener('MSFullscreenChange', this.screenEvenListener());
        element.msRequestFullscreen(); 
        return;
    }
}

还原方法:

/**
 * 点击按钮退出全屏函数,如果在全屏时注册监听事件中处理了退出全屏的操作则不需要调用此方法
 * @return 
 */
exitFullscreen() {
    if(document.exitFullscreen) {
        document.addEventListener('fullscreenchange', this.screenEvenListener());
        document.exitFullscreen(); 
        return;
    } else if(document.mozCancelFullScreen) {
        document.addEventListener('mozfullscreenchange', this.screenEvenListener());
        document.mozCancelFullScreen(); 
        return;
    } else if(document.webkitExitFullscreen) { 
        document.addEventListener('webkitfullscreenchange', this.screenEvenListener());
        document.webkitExitFullscreen(); 
        return;
    } else if(document.msExitFullscreen){
        document.addEventListener('MSFullscreenChange', this.screenEvenListener());
        document.msExiFullscreen();
        return;
    }
}

监听全屏/还原操作完成后监听事件,如果全屏操作完成后无其他操作可以不添加此监听事件,考虑到ESC快捷键退出全屏操作,建议全屏是添加此监听事件。

/**
 * 页面元素全屏或退出全屏的监听事件
 * @return {[type]} [description]
 */
screenEvenListener: function() {
    // 监听全屏的操作,判断是开启全屏还是退出全屏
    let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msRequestFullscreen;
    if (!fullscreenElement || fullscreenElement == null) {
        // 退出全屏操作
        // do something...
    } else {
        // 全屏操作
        // do something...
    }
}



你可能感兴趣的:(页面元素全屏展示)