seo 教育

想给H5页面搞个酷炫全屏？劝你先看看浏览器这堆破前缀，血压上来了...

淦！昨晚就想给那个活动页加个一键全屏的装X效果，结果在Chrome上跑得好好的，一到Safari和旧版Edge直接原地装死，F12一打开控制台全是 undefined 不是这家的前缀就是那家的私有方法，差点以为我学了假的JavaScript！盯着满屏的 webkit、moz、ms 前缀，我他妈抽了三根烟才没把电脑扔出去。后来翻遍了MDN和Can I Use 这保命文档才拼出个能用的，现在分享出来，能救一个是一个。

首先，放弃幻想，没有一招鲜的魔法属性。什么 div.fullscreen = true 这种梦话就别做了。核心是 Element.requestFullscreen() 这个API，但它被各大浏览器藏在了各种前缀后面，这才是万恶之源。你得像伺候祖宗一样把它们都请出来。

直接上干货，封装个函数，把要全屏的元素（比如一个 <div id="container"> ）传给它：

function enterFullscreen(element) {
    if (!element) {
        console.error("要全屏的元素呢？空气吗？");
        return;
    }

    // 1. 祖宗级兼容写法，把各家前缀都试一遍
    if (element.requestFullscreen) {
        element.requestFullscreen(); // 标准
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(); // Chrome, Safari, Opera
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen(); // Firefox
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen(); // IE/Edge (旧)
    } else {
        alert("你浏览器太老了，全屏不了！按F11凑合看吧。");
        // 终极备胎方案：粗暴地用CSS覆盖视口，模拟全屏（有瑕疵）
        // element.style.position = 'fixed';
        // element.style.top = '0';
        // element.style.left = '0';
        // element.style.width = '100vw';
        // element.style.height = '100vh';
        // element.style.zIndex = '9999';
    }
}

// 用的时候
const myStage = document.getElementById('container');
enterFullscreen(myStage);

注意！这玩意儿有安全限制，通常必须由用户点击、触摸等手势事件触发，你不能在页面加载完就偷偷摸摸全屏，浏览器会阻止。所以最好绑在按钮的 onclick 上。

全屏进去了，你得让人家能出来啊！退出全屏的监听和函数也要有：

// 监听全屏状态变化（比如用户按了ESC）
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // 前缀！
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
    // 判断当前是否在全屏状态的兼容写法
    const isFull = document.fullscreenElement || 
                   document.webkitFullscreenElement || 
                   document.mozFullScreenElement || 
                   document.msFullscreenElement;
    
    if (!isFull) {
        console.log("爷退出来了！");
        // 这里可以执行一些退出全屏后的回调，比如隐藏全屏按钮
    }
}

// 主动退出全屏的函数
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

最后两个血泪忠告：
1. CSS别忘改！ 全屏后你那个元素可能被浏览器默认拉伸，如果里面有视频或画布，记得加上 object-fit: cover; 或者调整宽高百分比，不然变形了别怪我没说。
2. 给用户提示！ 全屏后界面巨变，好多小白找不到退出按钮。要么在界面角落留个“退出全屏”的按钮（绑定上面的exitFullscreen），要么用文字提示“按ESC键退出”。不然你就等着接客服用被卡在全屏里的用户的电话吧。

以上就是我踩了一晚上坑换来的。现代浏览器对新标准支持好多了，但如果你不想在半夜接到测试“你这功能在XX浏览器上不能用”的夺命连环Call，就把兼容代码老老实实写上。祝你好运。

标签： · · ·

相关推荐