JavaScript实现浏览器全屏模式：API、兼容性与安全注意事项
本文详解HTML5 Fullscreen API的使用方法，包括element.requestFullScreen()、document.cancelFullScreen()等核心接口。针对Chrome、Firefox、Safari等主流浏览器，提供了包含webkit、moz、ms前缀的完整兼容代码。同时指出全屏模式存在的安全风险，如钓鱼攻击案例，并介绍fullscreenchange事件及对应的CSS伪类样式，帮助开发者安全、高效地实现全屏功能。
HTML5全屏API基础
HTML5引入了全屏功能（Full Screen），目前除IE和Opera外的多数现代浏览器均已支持。该功能常用于开发全屏应用或游戏，具有实用价值。首先介绍其核心API。
element.requestFullScreen()
功能：请求指定元素element进入全屏状态。
示例代码：Document.getElementById(“myCanvas”).requestFullScreen()
上述代码通过获取元素ID来触发全屏请求。
退出全屏模式
调用方法：document.cancelFullScreen()
属性：Document.fullScreen
若用户当前处于全屏模式，该属性返回true。
属性：document.fullScreenElement
返回当前处于全屏状态下的具体元素对象。
以下代码演示如何开启全屏模式：
function fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
} 以下代码演示如何使整个页面进入全屏模式。
需要注意的是，全屏API存在潜在的安全隐患，可能被用于欺骗用户。例如，在http://feross.org/html5-fullscreen-api-attack/中展示了相关Demo：攻击者可能将链接伪装为http://www.bankofamerica.com，用户点击后因全屏API的作用，页面覆盖整个屏幕，从而造成视觉欺骗。
$('html').on('click keypress', 'a', function(event) {
// 不响应真正的A HREF点击事件
event.preventDefault();
event.stopPropagation();
// Trigger fullscreen
if (elementPrototype.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (elementPrototype.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elementPrototype.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else {
//
}
//显示假的UI
$('#menu, #browser').show();
$('#target-site').show();
}); 跨浏览器全屏实现方案
接下来介绍JavaScript控制各浏览器全屏模式的具体方法、属性及事件处理。
启动全屏的函数requestFullscreen通常需要添加各浏览器厂商的JS前缀。下面这段代码需要整合多种前缀以确保兼容性：
代码如下:
// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素对目标页面元素调用全屏方法后，浏览器窗口将切换至全屏状态，但系统会先请求用户授权。用户有权拒绝全屏请求。若用户允许，浏览器工具栏、菜单等界面元素将被隐藏，页面内容覆盖整个屏幕。
退出全屏模式
exitFullscreen方法（同样需要添加浏览器前缀）可使浏览器退出全屏，恢复至正常窗口模式。
代码如下:
// 判断浏览器种类
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// 退出全屏模式!
exitFullscreen();需注意，exitFullscreen必须由document对象调用，而非启动全屏时传入的目标元素对象。
状态检测与事件监听
全屏相关属性与事件
遗憾的是，全屏属性和事件的相关方法目前仍需添加浏览器前缀，但预计未来标准统一后将不再需要。
1. document.fullScreenElement：获取全屏显示的网页元素。 2. document.fullScreenEnabled：判断当前是否处于全屏状态。
fullscreenchange事件在启动或退出全屏时触发：
代码如下:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;仍可沿用前述判断浏览器类型的方法，为该事件监听器添加相应前缀。
全屏CSS样式处理
全屏样式CSS
各浏览器均提供了在全屏模式下使用的CSS样式规则：
代码如下::
-webkit-full-screen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:full-screen { /*pre-spec */
/* properties */
}
:fullscreen { /* spec */
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: %;
height: %;
}
/* styling the backdrop*/
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}部分WebKit内核浏览器在样式处理上可能存在兼容性问题，建议保持CSS样式简洁。
这些全屏API使用简单且功能强大。笔者首次接触该API是在MDN的BananaBread演示中，那是一个需要全屏显示的射击游戏，它利用事件监听器来检测全屏状态。掌握这些API，可在需要时快速调用。
配置 Matter.js 睡眠机制以优化静止物体性能
2026-11-05 15:43:12
JavaScript console.log高级用法：用table、group和time优化调试输出
2026-11-05 08:04:56
JS变量中存储HTML代码时的特殊字符转义方法
2026-11-04 19:04:09
JS怎么安全转换带千分位或货币符号的字符串为数字
2026-11-04 11:54:14
推荐几款稳定的在线JS反混淆工具，支持Obfuscator.io解密
2026-11-04 08:16:21