页面元素全屏展示

最大化方法:

/**
 * 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...
    }
}



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值