react中div的全屏与退出全屏 · web前端技术分享

--- title: 'react中div的全屏与退出全屏' date: 2021-08-18 18:50:00 --- # 基础版： ```javascript import React, { useState, useRef } from 'react' import { Tabs, List, Input, Image } from 'antd' import Api from '../../../../../api' import moment from 'moment' import { deepClone } from '../../../../../utils/tools' import { Icon } from '../../../../../components/light' const { Search } = Input const { TabPane } = Tabs let historyFriends = [] export default function useChatList() { const [isFullScreen, setIsFullScreen] = useState(false) const chatContent = useRef(null) //全屏 const handleFullScreen = () => { if (isFullScreen) { document.exitFullscreen() } else { chatContent.current.requestFullscreen() } setIsFullScreen(!isFullScreen) } const getChatDom = () => { return ( <div className="m-chat-list-wrap"> <div className="m-chat-list-info" ref={chatContent}> <div className="m-chat-list-header"> <span className="m-chat-list-header-title">聊天内容</span> <span className="m-chat-list-header-content"></span> <span className="m-chat-list-header-tool" onClick={handleFullScreen}> <Icon name={isFullScreen ? 'fullscreen-exit' : 'fullscreen'} ></Icon> {isFullScreen ? '退出全屏' : '全屏查看'} </span> </div> </div> </div> ) } return { handleReset, getChatDom, } } ``` ```javascript if (isFullScreen) { document.exitFullscreen() } else { chatContent.current.requestFullscreen() } ``` # 加强版： full.js: ```javascript //全屏 // 打开浏览器全屏模式 /** * screenChange <Function> 为窗口变化的的回调函数参数为当前是否为全屏状态 */ const initFullScreen = (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 = (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 { initFullScreen, enterFullScreen, exitFullScreen, } ``` ```javascript import React, { useState, useRef, useEffect } from 'react' import { Tabs, List, Input, Image } from 'antd' import Api from '../../../../../api' import moment from 'moment' import { deepClone } from '../../../../../utils/tools' import { Icon } from '../../../../../components/light' import { initFullScreen, enterFullScreen, exitFullScreen, } from '../../../../../utils/full' const { Search } = Input const { TabPane } = Tabs let historyFriends = [] export default function useChatList() { const [activeKey, setActiveKey] = useState('1') const [friends, setFriends] = useState([]) const [searchValue, setSearchValue] = useState() const [friendActiveId, setFriendActiveId] = useState() const [isFullScreen, setIsFullScreen] = useState(false) const chatContent = useRef(null) //获取好友或群列表 const handleSearchFriendsList = ({ type }) => { Api.light.testInsightFriends({ type }).then((res) => { if (res.state === 1) { const friends = Array.isArray(res.data) ? res.data : [] setFriends(friends) historyFriends = deepClone(res.data) if (friends.length > 0) { setFriendActiveId(friends[0].id) } } }) } //切换tab const handleTabsChange = (key) => { setActiveKey(key) handleSearchFriendsList({ type: key }) } //重置 const handleReset = () => { setActiveKey('1') handleSearchFriendsList({ type: '1' }) } //搜索 const onSearch = (value) => { console.log(value) value = value.trim() if (value) { const newFriends = historyFriends.filter((item) => { if (item.name.includes(value)) { return true } else { return false } }) setFriends(newFriends) } else { setFriends(historyFriends) } } //全屏 const handleFullScreen = () => { if (isFullScreen) { exitFullScreen() } else { enterFullScreen(chatContent.current) } setIsFullScreen(!isFullScreen) } const screenChange = (isFull) => { console.log('是否全屏', isFull) setIsFullScreen(isFull) } useEffect(() => { //初始化 initFullScreen(screenChange) }, []) const renderFriends = ({ type }) => { const friendsDom = ( <List dataSource={friends} renderItem={(item) => ( <div className={`m-friends-item ${ item.id === friendActiveId ? 'active' : '' }`} onClick={() => setFriendActiveId(item.id)} > <Image className="m-friends-item-img" src={item.img} alt={'图片'} preview={{ mask: '', }} ></Image> <div className="m-friends-item-info"> <div className="m-friends-item-title"> <div className="m-friends-item-title-nickname">{item.name}</div> <div className="m-friends-item-title-time"> {moment(item.date).format('YYYY-MM-DD')} </div> </div> <div className="m-friends-item-msg">{item.msg}</div> </div> </div> )} /> ) return ( <div className="m-friends-wrap"> <div className="m-friends-search"> <Search value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="搜索好友昵称/备注" onSearch={onSearch} style={{ width: '100%' }} /> </div> <div className="m-friends-info">{friendsDom}</div> <div className="m-friends-footer"> 共有数据： <span className="m-total-text">{friends.length}</span> 条 </div> </div> ) } const getChatDom = () => { return ( <div className="m-chat-list-wrap"> <div className="m-chat-list-sidebar"> <Tabs activeKey={activeKey} onChange={handleTabsChange} centered className="m-friends-tabs" > <TabPane tab="外部好友" key="1"> {renderFriends({ type: '1' })} </TabPane> <TabPane tab="内部好友" key="2"> {renderFriends({ type: '2' })} </TabPane> <TabPane tab="外部群" key="3"> {renderFriends({ type: '3' })} </TabPane> <TabPane tab="内部群" key="4"> {renderFriends({ type: '4' })} </TabPane> </Tabs> </div> <div className="m-chat-list-info" ref={chatContent}> <div className="m-chat-list-header"> <span className="m-chat-list-header-title">聊天内容</span> <span className="m-chat-list-header-content"></span> <span className="m-chat-list-header-tool" onClick={handleFullScreen} > <Icon name={isFullScreen ? 'fullscreen-exit' : 'fullscreen'} ></Icon> {isFullScreen ? '退出全屏' : '全屏查看'} </span> </div> </div> </div> ) } return { handleReset, getChatDom, } } ``` 参考链接： [https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen) [https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen)