如何实现前端全屏

前言

最近有个需求是要求免登录自动打开看板，然后全屏并播放视频。当然最后自动全屏并播放视频没有实现，写这篇文章是为了记录一下踩的坑。

全屏

网上有挺多现成的组件的，这里就不介绍了，可以自行百度。这里只说通过原生的方法来实现，其实也挺简单的，浏览器已经提供了相应的api

代码
提供了全屏、退出全屏、当前是否是全屏、全屏与推出全屏来回切换的四个方法

// 进入全屏方法
const enterFullscreen = (docElm) => {
    // W3C
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    // 火狐
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    // 谷歌
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    // IE
    else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
};
// 退出全屏方法
const exitFullscreen = () => {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
};
    // 判断当前页面是否全屏

const getFullScreenStatus = () => {
    return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
};

// 全屏切换
const toggle = (docElm) => {
    if (!getFullScreenStatus()) {
        // 全屏
        enterFullscreen(docElm);
    } else {
        // 取消全屏
        exitFullscreen();
    }
};

export {
    enterFullscreen,
    exitFullscreen,
    getFullScreenStatus,
    toggle
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

通过给相应的元素添加一个点击事件，就可以实现全屏

<template>
    <div>
       <div class="main" id="mainId" @click="change">
        点击进行切换
       </div>
    </div>
</template>

<script>

import { toggle } from './tool.js';
export default {
    methods: {
        change() {
            let dom = document.getElementById('mainId');
            toggle(dom);
            console.log(dom);
        }
    }
};
</script>

<style lang="scss" scoped>
 .main{
    width: 300px;
    height: 300px;
    background-color: red;
    border: 10px solid blue;
    color: #fff;
 }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果图

免登录功能

做法可能有很多种，说一下项目中用到的方式。创建一个js文件，存放哪些页面可以免登录，相当于一个白名单

const data = {
    // 客户服务
    'client': {
        account: 'admin', // 登陆名
        password: '123abc', // 密码
        url: '/crm/data-center' // 登陆成功后进入的页面
    }
}
1
2
3
4
5
6
7
8

在登录页面注册回车事件，当回车时拿到url地址，比如 http://localhost:3000/test/button?sign=client
根据标识来获取到对应的路由地址，以及登录账号和密码。然后调用登录接口，本周上也是登录了，只是提前保存了一些账号和密码。

问题

免登录和全屏功能都有了，但是最终效果还是没有实现。

问题1：
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

大体意思是 浏览器全屏API只能由用户手势触发，当时想既然点击事件（双击事件）可以实现全屏，那么通过代码模拟点击事件是不是也可以。但是实际上仍然不行，还是上面那个错误。如果不了解如何模拟点击事件可以看：如何实现JS主动触发事件

问题2：
DOMException: play() failed because the user didn‘t interact with the document first
大体意思是：chrome新特性，内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰，首次加载页面需要用户和audio/video进行交互

其实上面两个也好理解，为了安全性，浏览器不可能什么都让你操作。你也不想，打开一个页面直接全屏，并播放某些视频，然后你还无法关掉。

补充

虽然无法实现自动全屏，但是可以通过css实现伪全屏。缺点是不是真正的全屏，浏览器会保留地址栏，比如：

 background-color: red;
 border: 10px solid blue;
 color: #fff;

 width: 100%;
 height: 100%;
 position: fixed !important;
 top: 0 !important;
 left: 0 !important;
1
2
3
4
5
6
7
8
9