js控制浏览器全屏示例代码

// JavaScript 控制浏览器全屏的示例代码

// 定义一个函数来进入全屏模式
function goFullScreen() {
    // 兼容性写法
    let elem = document.documentElement; // 对于标准模式
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
}

// 定义一个函数来退出全屏模式
function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
    }
}

// 示例：添加按钮来触发全屏和退出全屏
document.getElementById('goFullScreenBtn').addEventListener('click', goFullScreen);
document.getElementById('exitFullScreenBtn').addEventListener('click', exitFullScreen);

这段代码提供了两个函数：`goFullScreen()` 用于使浏览器进入全屏模式，`exitFullScreen()` 用于退出全屏模式。同时，示例中还包括了如何在HTML中添加按钮并绑定这两个函数的点击事件，以便用户可以通过点击按钮来控制全屏的进入和退出。

请注意，由于安全限制，全屏API只能在用户触发的事件（如点击事件）中调用。这意味着你不能在页面加载完成后自动进入全屏模式，而必须等待用户执行某个操作（如点击按钮）。