全屏展示 【前端实现】

全屏展示

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>

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>

注意事项

如果没有给要全屏的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
    );
}

2、fullscreenEnabled

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

const isFullscreenEnabled = () => {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

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

你可能感兴趣的:(js,web前端,前端,javascript,css)