封装一个函数,可以使某个dom元素进入全屏模式
<body>
<div id="container">
<h2>这是一个h2</h2>
<p>这是一个p</p>
<button id="btn" onclick="">进入/退出全屏</button>
</div>
<script>
btn.onclick = function () {
// 全屏、关闭全屏
}
</script>
</body>
js
// 进入全屏
function enter(ele) {
if (ele.requestFullScreen) {
ele.requestFullScreen()
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen()
} else if (ele.webkitRequestFullScreen) {
ele.webkitRequestFullScreen()
} else if (ele.msRequestFullScreen) {
ele.msRequestFullScreen()
}
}
// 退出全屏
function exit() {
if (document.exitFullScreen) {
document.exitFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullScreen) {
document.msExitFullScreen()
}
}
// 当前处于全屏的元素
function fullEle() {
return (
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
null
)
}
// 当前是否处于全屏状态
function isFull() {
return !!fullEle()
}
优化js:提取方法名,由于浏览器能使用什么方法在初次运行时就已经确定,所以无需额外判断
function getPropertyName(names, target) {
return names.find((name) => name in target)
}
const enterFullScreenName = getPropertyName(
[
"requestFullscreen",
"webkitRequestFullScreen",
"mozRequestFullScreen",
"msRequestFullScreen",
],
document.documentElement
)
// 进入全屏
function enter(ele) {
enterFullScreenName && ele[enterFullScreenName]()
}
const exitFullScreenName = getPropertyName(
[
"exitFullscreen",
"webkitExitFullScreen",
"mozCancelFullScreen",
"msExitFullScreen",
],
document
)
// 退出全屏
function exit() {
exitFullScreenName && document[exitFullScreenName]()
}
const fullEleName = getPropertyName(
["fullscreenElement", "webkitFullscreenElement", "mozFullScreenElement"],
document
)
// 当前处于全屏的元素
function fullEle() {
return document[fullEleName] || null
}
// 当前是否处于全屏状态
function isFull() {
return !!fullEle()
}
function toggle(ele) {
isFull() ? exit() : enter(ele)
}
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<h2>这是一个h2</h2>
<p>这是一个p</p>
<button id="btn" onclick="">进入/退出全屏</button>
</div>
<script>
function getPropertyName(names, target) {
return names.find((name) => name in target)
}
const enterFullScreenName = getPropertyName(
[
"requestFullscreen",
"webkitRequestFullScreen",
"mozRequestFullScreen",
"msRequestFullScreen",
],
document.documentElement
)
// 进入全屏
function enter(ele) {
enterFullScreenName && ele[enterFullScreenName]()
}
const exitFullScreenName = getPropertyName(
[
"exitFullscreen",
"webkitExitFullScreen",
"mozCancelFullScreen",
"msExitFullScreen",
],
document
)
// 退出全屏
function exit() {
exitFullScreenName && document[exitFullScreenName]()
}
const fullEleName = getPropertyName(
["fullscreenElement", "webkitFullscreenElement", "mozFullScreenElement"],
document
)
// 当前处于全屏的元素
function fullEle() {
return document[fullEleName] || null
}
// 当前是否处于全屏状态
function isFull() {
return !!fullEle()
}
function toggle(ele) {
isFull() ? exit() : enter(ele)
}
btn.onclick = function () {
toggle(container)
}
</script>
</body>
</html>