js使浏览器全屏代码

---

前言

在JavaScript中，你可以使用全屏API来让浏览器窗口进入全屏模式。这个API在不同的浏览器中略有不同，但大多数现代浏览器都支持以下基本方法。

一、进入全屏模式

1.使用 Element.requestFullscreen() 方法

你可以调用任何元素的requestFullscreen()方法来让浏览器进入全屏模式。通常，你会选择整个文档的根元素（如 document.documentElement），或者你想要全屏显示的特定元素。

function enterFullscreen() {
    var 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();
    }
}

二、退出全屏模式

1.使用 Document.exitFullscreen() 方法

退出全屏模式可以通过调用 document 对象的 exitFullscreen() 方法实现。

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();
    }
}

三、监听全屏变化事件

你还可以监听全屏变化的事件，以便在全屏模式开启或关闭时执行某些操作。
1.监听全屏变化

function onFullScreenChange() {
    if (!document.fullscreenElement) {
        console.log('Exited full screen');
    } else {
        console.log('Entered full screen');
    }
}

2.添加事件监听器

document.addEventListener('fullscreenchange', onFullScreenChange); // 标准事件名，适用于所有主流浏览器，除了Safari。Safari使用'webkitfullscreenchange'。
document.addEventListener('webkitfullscreenchange', onFullScreenChange); // Safari专用

四、注意事项

确保你的网页在服务器上运行，因为某些浏览器（如Chrome）可能不允许从本地文件系统直接访问全屏API。这意味着你的HTML文件需要通过HTTP或HTTPS协议在Web服务器上提供服务。

全屏API在不同的浏览器中有不同的前缀（如 webkit, moz, ms），但现代浏览器大多直接支持标准方法，因此通常只需检查一个方法是否存在即可。对于老旧浏览器，你可能需要检查所有可能的前缀。

在使用全屏API时，考虑到用户体验，确保用户能够方便地退出全屏模式。例如，你可以在全屏内容中添加一个退出全屏的按钮或快捷键。