全屏展示【前端实现】_前端全屏

作者：凡人多烦事01 | 2024-03-21 23:36:10

踩

前端全屏

全屏展示

1、css实现

<div :class="{'full-screen': isFullScreen}">
	全屏展示模块
</div>

// 全屏展示按钮
<a href="javascript:;" class="open-full-screen" @click="viewFullScreen">
   <i class="el-icon-full-screen" />全屏展示
</a>

<a href="javascript:;" @click="closeFullScreen">关闭全屏</a>

<script>
// 全屏展示
viewFullScreen() {
   this.isFullScreen = true;
   document.body.style = 'overflow: hidden';
},

// 关闭全屏
closeFullScreen() {
   this.isFullScreen = false;
   document.body.style = 'overflow: auto';
}
</script>


<style>
.full-screen {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2000;
	background-color: #fff;
	overflow-y: auto;
}
</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
32
33
34
35
36
37
38

2、js实现

RequestFullScreen / exitFullScreen

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello fullScreen!</title>
  </head>
  <body>
    <button onclick="openFull()" >全屏展示</button>
    <div id="content">
        <p>aaaaaa</p>
        <table class="tableStyle">
            <tr>
                <td>1111</td>
                <td>2222</td>
            </tr>
            <tr>
                <td>1111</td>
                <td>2222</td>
            </tr>
        </table>
        <br/>
        <button onclick="colse()" class="hidden" id="colseBtn">关闭全屏</button>
    </div>
  </body>
</html>

<script>

const colseBtn = document.getElementById('colseBtn')
const full = document.getElementById('content')

function openFull() {
    
    if (full.RequestFullScreen) {
        full.RequestFullScreen()
        //兼容Firefox
    } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen()
        //兼容Chrome, Safari and Opera等
    } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen()
        //兼容IE/Edge
    } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen()
    }
    // colseBtn.style.display = 'block'
    colseBtn.setAttribute('class', "show")
}
function colse() {
    
    if(document.exitFullScreen) {
        document.exitFullScreen();
    //兼容Firefox
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    //兼容Chrome, Safari and Opera等
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    //兼容IE/Edge
    } else if(element.msExitFullscreen) {
        element.msExitFullscreen();
    }
    // colseBtn.style.display = 'none'
    colseBtn.setAttribute('class', "hidden")
}
</script>

<style>
    .show{
        display: block;
    }
    .hidden{
        display: none;
    }
    #content{
        background: #fff;
    }
    .tableStyle{
        margin-top: 20px;
        border: 1px solid #eee;     
    }
</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

注意事项

如果没有给要全屏的div块设置样式，模块全屏后背景为全黑

requestFullscreen()方法只能在用户交互或者设备方向改变的时候调用，否则将会失败，比如：在onload事件中不能触发
路由页面跳转需先退出全屏模式
进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效，可以使用 :full-screen伪类解决
为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

js关于屏幕操作的方法

1、fullscreenElement

返回当前页面以全屏显示的element节点，如果没有使用全屏模式,则返回null
也可以根据返回值判断当前是否全屏

const getFullscreenElement = () => {
    return (        
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}
1
2
3
4
5
6
7
8

2、fullscreenEnabled

浏览器是否支持全屏模式
全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个元素中的页面,则它必需拥有mozallowfullscreen属性

const isFullscreenEnabled = () => {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}
1
2
3
4
5
6
7
8

【屏幕操作的方法】参考：
原文链接：https://blog.csdn.net/xiaoxia188/article/details/116996656

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】