本文详解如何使用JavaScript实现浏览器全屏及退出全屏功能，涵盖Chrome、Firefox、IE等主流浏览器的兼容写法。重点指出全屏API必须由用户点击事件触发，自动调用会报错，并提供完整代码示例与错误排查指南。
JavaScript 全屏功能概述与兼容性说明
JavaScript 实现浏览器全屏与退出全屏功能详解
利用 JavaScript 控制浏览器窗口进入或退出全屏状态，目前主流浏览器如 Google Chrome、Mozilla Firefox、360 浏览器等均支持该功能。需要注意的是，在 Internet Explorer 的较低版本中可能存在兼容性问题，例如在全屏状态下仍会显示底部的状态栏。
以下提供的示例代码已具备基本功能，用户可直接将其保存为 HTML 文件并在浏览器中打开以查看效果。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
-->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
// 判断各种浏览器，找到正确的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
// 退出全屏：判断当前浏览器的类型与支持的 API
function exitFull() {
// 判断各种浏览器，找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
感谢阅读，希望本文内容能对大家有所帮助，也感谢各位对本站的支持！
以下是其他网友提供的补充说明
全屏触发的核心限制：必须通过用户手势
通常，浏览器全屏操作可通过按下 F11 快捷键实现。通过 JavaScript 控制浏览器全屏并非新鲜事物，它能使 Web 应用呈现出类似原生软件的操作体验，例如应用于点餐系统或叫号系统等场景。
网上关于 JS 实现浏览器全屏及退出全屏的方法众多，但这并非本文重点。核心注意事项在于：浏览器的全屏模式必须通过用户的鼠标点击手势事件来触发，否则无法生效。
JS 实现全屏与退出全屏的代码示例
JS 实现浏览器全屏的方法
var $fullScreen = document.getElementById("js-fullScreen");//按钮
if ($fullScreen) {
$fullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
} JS 实现退出全屏的方法
var $cancelFullScreen = document.getElementById("js-cancelFullScreen");
if ($cancelFullScreen) {
$cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
} 常见错误分析与官方 API 解释
控制台可能出现的警告信息
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
错误释义：在 "Element" 元素上执行 "requestFullscreen" 方法失败，因为 JavaScript API 规定仅允许通过用户手势（如点击）来发起全屏请求（即无权限执行）。
该错误通常由开发者尝试让浏览器自动全屏显示所导致。然而，此方法不可行，必须通过用户的手势操作来触发，即使是在 onload 加载完成、trigger() 触发或 mouseover 悬停事件中尝试调用，也无法成功执行。
官方文档解释
Element.requestFullscreen() 方法会发出一个异步请求，试图使指定元素进入全屏显示状态。需要注意的是，该方法并不保证元素一定能成功进入全屏模式。
如果浏览器允许进入全屏模式，文档将接收到一个 fullscreenchange 事件，以通知当前处于全屏状态；如果权限被拒绝，文档则会接收到一个 fullscreenerror 事件。
结论
出于用户体验的考虑，客户端 JavaScript 让浏览器进入全屏模式只能通过鼠标点击手势事件（即 click()）来触发，其他自动调用方式均无效。