完整代码:
export default () => {
const [fullScreen, setFullScreen] = useState(false);
// 将id对应的元素开启全屏
const requestFullScreen = (id) => {
const element = document.getElementById(id);
const requestMethod = // 适应不同浏览器
element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.msRequestFullscreen ||
element.mozRequestFullScreen;
if (requestMethod){
requestMethod.call(element); // .call()使调用requestMethod方法时this指向的对象是element
}
}
// 退出全屏
const exitFullScreen = () => {
const exitMethod =
document.exitFullscreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen ||
document.mozCancelFullScreen;
if (exitMethod){
exitMethod.call(element);
}
}
// 判断id对应的元素是否全屏
const isFullScreenElement = (id) => {
const fullScreenElement =
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement;
if (fullScreenElement){
return fullScreenElement.id === id;
}
return !!fullScreenElement;
}
const handleChangeScreen = () => {
if (isFullScreenElement('element-id')){
exitFullScreen();
setFullScreen(false);
message.config({ // message放置消息的容器
getContainer: () => document.body,
})
} else {
requestFullScreen();
setFullScreen(true);
message.config({
getContainer: () => document.getElementById('element-id'),
})
}
}
return (
<Button
onClick={handleChangeScreen}
icon={!fullScreen ? <ExpandOUtlined /> : <CompressOutlines />}
/>
)
}
也可以使用第三方库 screenfull:
import screenfull from 'screenfull';
screenfull.request(document.getElementById('element-id'));
screenfull.exit();
screenfull.toggle(); // 切换全屏