当前位置：首页 > news >正文

【JS】封装针对dom节点的全屏查看功能

news 2025/5/11 12:39:53

封装一个函数，可以使某个dom元素进入全屏模式

<body><div id="container"><h2>这是一个h2</h2><p>这是一个p</p><button id="btn" onclick="">进入/退出全屏</button></div><script>btn.onclick = function () {// 全屏、关闭全屏}</script>
</body>

// 进入全屏
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>