一、html和js实现全屏和退出全屏
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button οnclick="fullscreen()">全屏</button>
<button οnclick="outfullscreen()">退出全屏</button>
<script>
// 全屏
function fullscreen() {
var element = document.getElementsByTagName("body")[0];
console.log(element);
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
console.log(element.requestFullScreen);
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
// 退出全屏
function outfullscreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
el.mozCancelFullScreen || el.exitFullScreen;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</body>
</html>
二、在react中使用实现全屏和退出全屏
<p onClick={() => launchFullScreen(document.documentElement)}>全屏模式</p>
<b onClick={() => exitFullscreen(document.documentElement)}>退出全屏</b>
// 全屏
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//退出全屏
function exitFullscreen() {
console.log(1111);
if (document.exitFullscreen) {
window.document.exitFullscreen();
} else if (document.mozExitFullScreen) {
window.document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
window.document.webkitExitFullscreen();
}
}
实现全屏和退出全屏效果