javascript实现全屏功能的核心是调用dom元素的requestfullscreen()方法并配合document.exitfullscreen()退出全屏，1. 首先通过用户手势触发全屏操作，调用目标元素的requestfullscreen()方法，并兼容不同浏览器前缀如webkitrequestfullscreen、mozrequestfullscreen、msrequestfullscreen；2. 退出全屏时调用document.exitfullscreen()及其对应前缀方法；3. 监听fullscreenchange事件及其前缀版本以响应全屏状态变化；4. 使用document.fullscreenelement或其前缀属性判断当前全屏状态；5. 通过css的::fullscreen伪类及前缀调整全屏样式；6. 确保iframe全屏时设置allowfullscreen属性；7. 遵守浏览器安全限制，全屏操作必须由用户手势触发，防止被阻止。该方案完整覆盖兼容性、用户体验与安全性，确保功能稳定运行。
JavaScript实现全屏功能，核心在于调用DOM元素的
requestFullscreen()
方法，并配合
document.exitFullscreen()
来退出。这并不是一个特别复杂的API，但要做到兼容性和用户体验兼顾，还是有些细节需要琢磨的。
解决方案
要让一个元素进入全屏模式，最直接的办法就是找到这个DOM元素，然后调用它的
requestFullscreen()
方法。而要退出全屏，则需要调用
document.exitFullscreen()
。这里面涉及到一些浏览器前缀和事件监听，所以通常我们会封装一下。
一个基本的全屏切换函数可以这样写：
function toggleFullscreen(element) { if (!document.fullscreenElement) { // 检查当前是否有元素处于全屏状态 // 尝试进入全屏 if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { /* Safari */ element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { /* IE11 */ element.msRequestFullscreen(); } else if (element.mozRequestFullScreen) { /* Firefox */ element.mozRequestFullScreen(); } } else { // 尝试退出全屏 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { /* Safari */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE11 */ document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { /* Firefox */ document.mozCancelFullScreen(); } } } // 示例：点击按钮让某个div全屏 document.addEventListener('DOMContentLoaded', () => { const targetElement = document.getElementById('myVideoContainer') || document.body; // 或者任何你想要全屏的元素 const fullscreenButton = document.getElementById('fullscreenBtn'); if (fullscreenButton) { fullscreenButton.addEventListener('click', () => { toggleFullscreen(targetElement); }); } // 监听全屏状态变化，以便更新UI或执行其他逻辑 document.addEventListener('fullscreenchange', () => { console.log('全屏状态改变了！当前是否全屏:', document.fullscreenElement ? '是' : '否'); // 可以在这里更新按钮文本，或者调整页面布局 }); // 兼容性监听 document.addEventListener('webkitfullscreenchange', () => console.log('WebKit全屏状态改变')); document.addEventListener('mozfullscreenchange', () => console.log('Mozilla全屏状态改变')); document.addEventListener('MSFullscreenChange', () => console.log('MS全屏状态改变')); });
HTML结构大概是这样：
<div id="myVideoContainer" style="background-color: #f0f0f0; width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc;"> <p>这是一个可全屏的区域</p> </div> <button id="fullscreenBtn" style="margin-top: 10px; padding: 10px 15px; cursor: pointer;">切换全屏</button>
这段代码展示了如何通过点击事件触发全屏，并监听全屏状态的变化。记住，全屏操作必须由用户手势（比如点击按钮）触发，浏览器为了安全通常会阻止脚本直接调用全屏API。
处理浏览器兼容性，确保全屏功能在不同浏览器中稳定运行
提到浏览器兼容性，这简直是前端开发者的“家常便饭”。全屏API也逃不过这个魔咒，早期的浏览器实现各自为政，导致我们需要写一堆前缀代码。
比如，Firefox用的是
mozRequestFullScreen
，WebKit内核（Chrome、Safari）用
webkitRequestFullscreen
，IE11是
msRequestFullscreen
。好在现在大多数现代浏览器都开始支持无前缀的
requestFullscreen()
和
exitFullscreen()
了，但为了覆盖更广的用户群，那些带前缀的写法还是不能丢。
我个人习惯是，先尝试标准API，如果不行，再依次尝试带前缀的。就像上面代码里展示的那样，一个
if-else if
链条就能搞定。
还有一个很重要的点是事件监听。当全屏状态改变时，浏览器会触发
fullscreenchange
事件。同样，这个事件也有前缀版本：
webkitfullscreenchange
、
mozfullscreenchange
和
MSFullscreenChange
。监听这些事件能让你在全屏模式切换时执行一些逻辑，比如调整UI布局、隐藏不必要的元素或者改变按钮的文本。
例如，你可以根据
document.fullscreenElement
来判断当前是否有元素处于全屏状态。如果它不为
null
，就表示有元素全屏了。这个属性也是有前缀的，比如
document.webkitFullscreenElement
。所以，一个健壮的判断全屏状态的函数可能长这样：
function isFullscreen() { return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; }
这样一套组合拳下来，基本上能覆盖主流浏览器的全屏需求了。
全屏模式下的用户体验优化与常见问题规避
全屏功能虽然酷炫，但如果处理不好，用户体验可能会大打折扣。
一个最常见的问题就是：用户不知道怎么退出全屏。虽然按下
ESC
键是退出全屏的通用操作，但不是所有用户都清楚。所以，在全屏模式下，最好能在UI上提供一个显眼的“退出全屏”按钮。这个按钮可以是一个小的、浮动的图标，或者在用户鼠标移动到屏幕边缘时才显示出来。
另一个值得注意的细节是CSS样式。当元素进入全屏模式后，它会占据整个视口。这时候，你可能需要针对全屏状态下的元素应用特定的CSS样式。CSS提供了一个伪类
:
:fullscreen`来帮助我们。例如：
#myVideoContainer:fullscreen { width: 100vw; /* 视口宽度 */ height: 100vh; /* 视口高度 */ background-color: black; /* 全屏时背景变黑 */ display: flex; justify-content: center; align-items: center; /* 确保内容居中，或者根据需要调整 */ } /* 兼容性前缀 */ #myVideoContainer:-webkit-full-screen { /* Chrome, Safari */ width: 100vw; height: 100vh; background-color: black; } #myVideoContainer:-moz-full-screen { /* Firefox */ width: 100vw; height: 100vh; background-color: black; } #myVideoContainer:-ms-fullscreen { /* IE11 */ width: 100vw; height: 100vh; background-color: black; }
通过这些伪类，你可以控制全屏时的布局、背景色等，确保内容在全屏状态下也能完美呈现。我经常看到一些网站在全屏视频时，视频本身全屏了，但周围却留着白边或者奇怪的背景色，这就是没有充分利用
:
:fullscreen`伪类的结果。
此外，还要考虑全屏时的交互。比如，如果全屏的是一个视频播放器，那么播放、暂停、进度条等控制按钮在全屏模式下是否还能方便操作？通常，这些控件在全屏时会浮动在视频上方，并在用户不操作一段时间后自动隐藏。这都是提升用户体验的细节。
全屏API的安全性考量与浏览器限制
全屏API并非没有限制，这主要是出于安全和用户体验的考虑。
首先，也是最重要的一点：
requestFullscreen()
方法必须在用户手势（如点击、触摸）事件的事件处理函数中调用。这意味着你不能在页面加载时就直接让某个元素全屏，也不能在计时器或网络请求回调中突然触发全屏。浏览器会阻止这种“未经同意”的全屏行为，防止恶意网站劫持用户的屏幕。如果你尝试在非用户手势事件中调用，通常会抛出一个
NotAllowedError
。
其次，并不是所有元素都能全屏。只有特定的元素类型，比如
<iframe>
、
@@##@@
、
<video>
、
<canvas>
，以及一般的HTML元素（如
<div>
）可以进入全屏。但要注意的是，如果一个
<iframe>
想要进入全屏，它必须设置
allowfullscreen
属性。例如：
<iframe src="some-video.html" allowfullscreen></iframe>
如果
<iframe>
没有这个属性，或者其内容来自不同源（跨域），那么即使父页面调用了
requestFullscreen()
，也可能无法让
<iframe>
内部的内容全屏。这又是一个安全沙箱的体现，防止恶意内容在用户不知情的情况下占据整个屏幕。
再者，浏览器在进入全屏模式时，通常会给出一个提示，告诉用户当前页面已进入全屏模式，并提示如何退出（比如“按ESC退出全屏”）。这个提示是浏览器层面的，开发者无法控制其样式或内容，也无法禁用。这是为了保障用户的知情权和控制权。
最后，当浏览器处于全屏模式时，一些API可能会受到限制，例如弹窗（
window.open()
）或某些系统级别的快捷键可能无法使用。这也是为了避免在全屏模式下出现意外或不安全的行为。理解这些限制，能帮助我们更好地设计和实现全屏功能，避免踩坑。毕竟，一个功能再强大，如果不能安全、流畅地运行，那它的价值也就大打折扣了。
评论（已关闭）
评论已关闭