<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">
<title>FullScreen</title>
<meta content="font，孤僻字，如：叮噹，塗聚文，Geovin Du，塗聚文，geovindu,捷爲工作室" name="keywords">
<meta content="font，孤僻字，塗聚文，Geovin Du，塗聚文，geovindu,捷爲工作室" name="description">
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
// 進入全屏 https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
//https://www.w3schools.com/jsref/met_element_requestfullscreen.asp
const enterFullScreen = (el) => {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
}
}
// 退出全屏
const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 當前處於全屏的元素
const fullscreenElement = () => {
return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
}
// 是否處於全屏
const isFullscreen = () => {
return !!fullscreenElement()
}
// 切換
const toggleFullScreen = () => {
isFullscreen()?
exitFullscreen():
enterFullScreen(el);
}
</script>
</head>
<body>
<div class="box" id="box"></div>
<script>
const el = document.getElementById('box');
el.onclick = toggleFullScreen;
</script>
</body>
</html>
