js点击悬浮按钮实现网页全屏

168 阅读1分钟

<div id="box">
    网页全屏
    <div id="btn-qp">
        >点击<
    </div>
</div>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;

    /* 取消选中文字 */
    /* 火狐 */
    -moz-user-select: none;
    /* Safari 和 欧朋 */
    -webkit-user-select: none;
    /* IE10+ and Edge */
    -ms-user-select: none;
    /* Standard syntax 标准语法(谷歌) */
    user-select: none;
}
#box {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: aqua;
}
#btn-qp {
    width: 60px;
    height: 60px;
    background-color: rgba(190, 190, 190, 0.589);
    border-radius: 5px;
    position:absolute;
    right: 1%;
    bottom:4%;
    z-index: 2;
    /* display: block */
}
var btnqp = document.getElementById('btn-qp')
btnqp.onclick = function() {
    const isFullScreen = document.fullscreenElement
    var element = document.documentElement;
    // 判断是否已经是全屏
    // 如果是全屏,退出
    // if (document.fullscreen) {
        //.fullscreen 已过时,现在用新方法.fullscreenElement
    if(isFullScreen){
        if (document.exitFullscreen) {
        document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        }
        console.log("已退出全屏!");
    } else {
        // 否则,进入全屏
        if (element.requestFullscreen) {
        element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
        }
        console.log("已进入全屏!");
    }
}