之前写过 前端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方法 调用后 不管谁在全屏 都会立刻退出
