用JS实现全屏
程序员文章站
2024-03-02 13:31:04
...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function showinfo() {
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function closeinfo()
{
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</script>
<style>
html:-moz-full-screen {
background: black;
}
html:-webkit-full-screen {
background: black;
}
html:fullscreen {
background: black;
}
</style>
</head>
<body>
<input type="button" value="全屏" onclick="showinfo()"/>
<input type="button" value="退出全屏" onclick="closeinfo()"/>
</body>
</html>
下一篇： MybatisPlus条件构造器