React項目實現全屏退出全屏的功能（並解決chrome下F11進入全屏后退出全屏API方法失效）

感謝原作者：參考原文地址為 https://blog.csdn.net/dream19921216/article/details/86596408

1. 問題說明
       網頁全屏和退出全屏其實已經算的上一個很常見的功能了，那是不是直接用HTML5全屏API就沒什么問題了，但是不要忘了鍵盤上的F11有着同樣的功能，實際使用的時候就發現F11使網頁進入全屏后，以HTML5的全屏API退出全屏就不管用了（不是一家，沒商量好啊！）

2.頁面全屏與退出全屏

// 根據瀏覽器可視區域高度與屏幕實際高度差值判斷頁面是否為全屏狀態
 
// 取值17是為了處理頁面內容出現滾動條的情況
var isFull = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17
 
window.onresize = function () {
    isFull = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17
}
 
// 阻止F11鍵默認事件，用HTML5全屏API代替
window.addEventListener('keydown', function (e) {
    e = e || window.event
    if (e.keyCode===122 && !isFull) {
        e.preventDefault()
        enterFullScreen()
    }
})
 
 
 // 打開瀏覽器全屏模式
 
   function enterFullScreen () {
      let el = document.documentElement
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
      if (rfs) { // typeof rfs != "undefined" && rfs
        rfs.call(el)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        // for IE，這里其實就是模擬了按下鍵盤的F11，使瀏覽器全屏
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    }
 
    // 退出全屏
    function exitFullScreen () {
      let el = document
      let cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreen
      if (cfs) { // typeof cfs != "undefined" && cfs
        cfs.call(el)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        // for IE，這里和fullScreen相同，模擬按下F11鍵退出全屏
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    },

3.問題解析
Document.exitFullscreen() 方法用於讓當前文檔退出全屏模式（原文表述不准確，詳見備注）。調用這個方法會讓文檔回退到上一個調用Element.requestFullscreen()方法進入全屏模式之前的狀態。

備注: 如果一個元素A在請求進去全屏模式之前，已經存在其他元素處於全屏狀態，當這個元素A退出全屏模式之后，之前的元素仍然處於全屏狀態。瀏覽器內部維護了一個全屏元素棧用於實現這個目的。

document.exitFullScreen()實際作用說明

 

  此文章為開發實際遇到問題記錄，也是希望能幫助到遇到同類問題的碼農們，如有描述錯誤，歡迎各位指正，看到必定更正！
---------------------------------------------

在react當中使用，創建fullScreen.js

src/utils/fullScreen.js

//全屏
// 打開瀏覽器全屏模式
/**
 * screenChange <Function> 為窗口變化的 的回調函數  參數為當前是否為全屏狀態
 */
const init = (screenChange)=>{

    // 取值17是為了處理頁面內容出現滾動條的情況
    let isFull = window.screen.height - window.document.documentElement.clientHeight <= 17;
    
    // 阻止F11鍵默認事件，用HTML5全屏API代替
    window.addEventListener('keydown', function (e) {
        e = e || window.event;
        if (e.keyCode===122 && !isFull) {
            e.preventDefault();
            enterFullScreen();
        }
    });
    //監聽窗口變化
    window.onresize = function () {
        isFull = window.screen.height - window.document.documentElement.clientHeight <= 17;
        screenChange(isFull);
    }
};

//進入全屏
const enterFullScreen  = ()=>{
    let el = document.documentElement;
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
    if (rfs) { // typeof rfs != "undefined" && rfs
        rfs.call(el)
    } else if (typeof window.ActiveXObject !== 'undefined') {
        // for IE，這里其實就是模擬了按下鍵盤的F11，使瀏覽器全屏
        let wscript = new ActiveXObject('WScript.Shell');  //eslint-disable-line
        if (wscript != null) {
            wscript.SendKeys('{F11}')
        }
    }
};


// 退出全屏
const exitFullScreen = ()=>{
    let el = document;
    let cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreen;
    if (cfs) { // typeof cfs != "undefined" && cfs
        cfs.call(el);
    } else if (typeof window.ActiveXObject !== 'undefined') {
        // for IE，這里和fullScreen相同，模擬按下F11鍵退出全屏
        let wscript = new ActiveXObject('WScript.Shell'); //eslint-disable-line
        if (wscript != null) {
            wscript.SendKeys('{F11}')
        }
    }
};

export default {
    init,
    enterFullScreen,
    exitFullScreen
}

在需要全屏的時候

這里演示采用react 組件的HOOK寫法

 

import React, { useState, useEffect } from 'react';
import './index.less'; //樣式
import FullScrenn from '../../utils/fullScreen';
//圖標
const iconList = [
    {
        name: '全屏',
        icon: 'icont1a'
    },
    {
        name: '設置',
        icon: 'icont2a'
    },
    {
        name: '消息',
        icon: 'icont3a'
    },
];
function Headers(props) {
    //定義局部狀態
    const [openMenu, setMenu] = useState(true);
    const [isScreenFull, setIsScreenFull] = useState(false); //是否全屏
    useEffect(()=>{
      //初始化
        FullScrenn.init(screenChange)
    }, [] );
    
    //屏幕變化
    const screenChange = (isFull)=>{
        console.log('是否全屏', isFull);
        setIsScreenFull(isFull);
    };

    //點擊圖標執行的事件
    const gotoIcon = (value, index) => {
        console.log('value, index', value, index);
        switch (value.name) {
            case '全屏':
                if(isScreenFull){
                    //退出全屏
                    FullScrenn.exitFullScreen();
                }else {
                    //進入全屏
                    FullScrenn.enterFullScreen();
                }
                break;
            default:
                break;
        }
    };
    
    return (
        <Header className="site-layout-background Headers">
            <div className='menu-action' onClick={() => {
                if (props.collapsed) {
                    props.handleOpenMenu();
                } else {
                    props.handleCloseMenu();
                }}}>
                <IconFont type={props.collapsed ? 'iconshrinkRight' : 'iconshrinkLeft'} />
            </div>
            
            <div className="searchModel">
                <IconFont className="searchIcon" type="iconic_so"></IconFont>
                <Input placeholder="搜索" style={{ float: 'left', width: '360px', height: '36px', paddingLeft: '30px', background: '#F9FAFB', border: '0px', borderRadius: '40px' }} />
            </div>
                
            <div className='user-pannel'>
                <div className="fricon">
                    {

                        iconList.map((item, index) =>（
                            <Tooltip key={index} placement="bottom"
                                     title={isScreenFull && item.name === '全屏' ? '退出' + item.name : item.name}>
                                <a onClick={() => gotoIcon(item, index)}>
                                    <IconFont type={item.icon} className="icon"/>
                                </a>
                            </Tooltip>
                        )

                    }
                </div>
            </div>
        </Header>

    );
}

export default Headers;

 

效果圖：