JS 全屏和退出全屏
js实现浏览器窗口全屏和退出全屏的功能，市面上主流浏览器如：谷歌、火狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。
这个demo基本是够了，直接复制下面的源码另存为html文件看效果吧。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement):
JavaScript全屏和退出全屏功能在现代Web开发中经常被用到，特别是在创建沉浸式用户体验或者模拟原生应用效果时。本文将详细讲解如何利用JavaScript实现浏览器窗口的全屏和退出全屏操作，并提供相关实例代码。
我们来看全屏的实现。全屏API在不同的浏览器中略有差异，主要涉及以下几种方式：
1. W3C标准：`element.requestFullScreen()`
2. Chrome等基于WebKit的浏览器：`element.webkitRequestFullScreen()`
3. Firefox：`element.mozRequestFullScreen()`
4. IE11：`element.msRequestFullScreen()`
对于退出全屏，同样存在多种实现方式：
1. W3C标准：`document.exitFullscreen()`
2. Chrome等基于WebKit的浏览器：`document.webkitExitFullscreen()`
3. Firefox：`document.mozCancelFullScreen()`
4. IE11：需要通过发送F11键盘事件来模拟退出全屏
在提供的代码示例中，可以看到两个函数`requestFullScreen`和`exitFull`，它们分别用于进入和退出全屏模式。这两个函数会根据当前浏览器的特性选择合适的方法。例如，当调用`requestFullScreen(document.documentElement)`时，整个网页将进入全屏状态；而`requestFullScreen(document.getElementById("video-box"))`则会让指定的元素（这里假设是id为"video-box"的元素）进入全屏。
退出全屏的函数`exitFull`也采用了类似的方式，根据不同的浏览器特性选择对应的退出方法。需要注意的是，部分旧版本的IE浏览器可能需要通过ActiveXObject来模拟发送F11键退出全屏。
此外，浏览器对于全屏操作有安全限制，通常只能通过用户的交互（如点击事件）来触发全屏，直接通过脚本调用全屏方法可能会被浏览器阻止。因此，在实际应用中，你需要确保全屏请求是在用户交互后进行的，例如在按钮点击事件中调用全屏函数。
下面是一个简单的HTML按钮触发全屏的示例：
```html
<button id="fullscreen-btn">全屏</button>
<script>
document.getElementById('fullscreen-btn').addEventListener('click', function() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
});
</script>
```
对于退出全屏，可以使用类似的逻辑，将`requestFullScreen`替换为`exitFull`方法。
JavaScript的全屏和退出全屏功能虽然在不同浏览器间存在兼容性问题，但通过合理的条件判断和方法选择，可以编写出适用于大部分现代浏览器的代码。同时，要注意遵循浏览器的安全策略，确保全屏操作的用户体验和安全性。
