如何原生实现让任意 div 全屏展示

最近在做一个项目，需要实现点击按钮让某个 div 全屏展示的功能。

第一反应是用 CSS 设置 position: fixed 加上宽高 100%，但这样并不是真正的全屏，因为浏览器的工具栏还在。

后来发现浏览器原生就提供了 Fullscreen API，可以让任意元素真正全屏展示，今天就来聊聊这个有趣的 API。

基础用法：让元素全屏

先来看最简单的使用方式。假设我们有一个文章阅读器，想让用户能够专注阅读：

    

        
一篇很棒的文章
        
这是文章的正文内容...
    
    
        进入阅读模式
        
    

就这么简单！调用元素的 requestFullscreen() 方法就能让它全屏展示了。不过要注意，这是个异步操作，返回的是 Promise，所以最好加上 catch 来处理可能的错误。

退出全屏怎么搞？

有进就要有出。退出全屏的方法也很简单，但这里有个小坑：退出全屏的方法是在 document 上调用，而不是在元素上：

// 错误示范 ?
reader.exitFullscreen();

// 正确方式 ?
document.exitFullscreen().catch(err => {
    console.log('退出全屏失败:', err);
});

来看个完整的示例，实现全屏切换功能：

    
        
        
    
    
        

            

                
深入理解 JavaScript 闭包
                
闭包是 JavaScript 中最强大的特性之一，它允许函数访问其词法作用域之外的变量...
                
让我们通过一个简单的例子来理解闭包：当我们创建一个函数时，它不仅包含函数的代码，还包含对其周围作用域中变量的引用...
                
这种特性使得我们可以创建私有变量、数据封装，以及实现模块化的代码结构...
            

            
                切换阅读模式
                
            
        

        
    

全屏状态的监听和样式调整

有时候我们需要知道元素是否处于全屏状态，比如要在全屏时显示不同的 UI。浏览器提供了 fullscreenchange 事件来监听全屏状态的变化：

document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log('进入全屏啦！');
        console.log('全屏的元素是：', document.fullscreenElement);
    } else {
        console.log('退出全屏啦！');
    }
});

CSS 中也有专门的选择器 :fullscreen 来设置元素在全屏时的样式：

#player {
    background: #f0f0f0;
    padding: 20px;
}

/* 全屏时的样式 */
#player:fullscreen {
    background: #000;
    padding: 50px;
}

实战示例：图片查看器

来做个实用的例子 —— 点击图片查看大图，再点击退出全屏：

    
        
        
    
    
        

            
            

                
                点击图片可全屏查看
            
        

        
    

浏览器兼容性处理

虽然现代浏览器都支持 Fullscreen API，但有些老浏览器可能需要加前缀。这里提供一个兼容性更好的封装：

function requestFullscreen(element) {
    const requestMethod =
        element.requestFullscreen ||
        element.webkitRequestFullscreen || // Chrome, Safari
        element.mozRequestFullScreen || // Firefox
        element.msRequestFullscreen; // IE/Edge

    if (requestMethod) {
        return requestMethod.call(element);
    }

    return Promise.reject('当前浏览器不支持全屏 API');
}

function exitFullscreen() {
    const exitMethod =
        document.exitFullscreen ||
        document.webkitExitFullscreen ||
        document.mozCancelFullScreen ||
        document.msExitFullscreen;

    if (exitMethod) {
        return exitMethod.call(document);
    }

    return Promise.reject('当前浏览器不支持全屏 API');
}

// 判断是否支持全屏
function isFullscreenEnabled() {
    return (
        document.fullscreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled
    );
}

// 获取当前全屏元素
function getFullscreenElement() {
    return (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
    );
}

使用封装后的方法：

const myElement = document.getElementById('myElement');

// 检查是否支持全屏
if (!isFullscreenEnabled()) {
    console.log('抱歉，您的浏览器不支持全屏功能');
    return;
}

// 进入全屏
requestFullscreen(myElement).catch(err => {
    console.log('进入全屏失败:', err);
});

// 退出全屏
exitFullscreen().catch(err => {
    console.log('退出全屏失败:', err);
});

一些注意事项

1. 全屏请求必须由用户触发 浏览器出于安全考虑，requestFullscreen() 必须由用户操作触发（如点击事件），不能在页面加载时自动触发。
2. iframe 的全屏限制 如果要在 iframe 中使用全屏功能，需要给 iframe 添加 allowfullscreen 属性：
4. 全屏元素的样式 进入全屏后，元素默认会占满整个屏幕。如果想保持原有布局，需要自己设置合适的样式。
5. 键盘事件 在全屏模式下，某些键盘快捷键可能会被浏览器接管（如 ESC 退出全屏），要注意这一点。

总结

Fullscreen API 虽然看起来简单，但用好了真的很强大。关键点：

• element.requestFullscreen() 进入全屏
• document.exitFullscreen() 退出全屏
• fullscreenchange 事件监听状态变化
• :fullscreen 选择器设置全屏样式
• 注意浏览器兼容性处理