• 全屏展示 【前端实现】

    全屏展示

    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>aaaaaap>
        <table class="tableStyle">
            <tr>
                <td>1111td>
                <td>2222td>
            tr>
            <tr>
                <td>1111td>
                <td>2222td>
            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

  • 相关阅读:
    经众多Nature文章使用认证！艾美捷抗酒石酸酸性磷酸酶TRAP染色试剂盒
    Day 36 贪心算法 part05 ： 435. 无重叠区间 763.划分字母区间 56. 合并区间
    AVL树(C++实现)
    day19正则表达式
    游戏盾能防住几T的攻击吗
    【剑指offer】Java中数组、字符串的长度获取区别 length、length()、size()
    2022爱分析･采购数字化厂商全景报告 | 爱分析报告
    5.（vue3.x+vite）封装组件
    最远点采样 — D-FPS与F-FPS
    Jupyter使用技巧-环境篇
  • 原文地址：https://blog.csdn.net/weixin_43918803/article/details/127536677