之前写过 前端screenfull实现界面全屏展示功能 突然发现自己犯傻了
其实元素js中就有全屏与取消全屏的方式
html代码如下
<!DOCTYPE html>
<html>
<head>
<title>全屏实验</title>
<style>
</style>
</head>
<body>
<div id = "mian" style = "width: 100px;height: 100px;background-color: blue;">
<button id = "screen">全屏</button>
<button id = "CancelFullScreen">取消全屏</button>
</div>
<script>
var mian = document.getElementById("mian");
var screen = document.getElementById("screen");
var CancelFullScreen = document.getElementById("CancelFullScreen");
screen.onclick = function () {
mian.requestFullscreen();
}
CancelFullScreen.onclick = function () {
document.exitFullscreen();
}
</script>
</body>
</html>
这里 我们mian元素为主体 然后 包裹两个按钮 screen全屏按钮 设置了点击事件 通过mian元素 调用requestFullscreen实现mian元素占满全屏
点击全屏 screen 按钮效果如下
然后 CancelFullScreen按钮的点击事件 就调用了 document对象的exitFullscreen方法 调用后 不管谁在全屏 都会立刻退出
