Make an element display full screen when clicking on it
This code defines a function
goToFullScreen(element)
that switches the specified element (or the default full screen) to full screen mode. This function supports various mainstream browsers, including Chrome, Firefox, Safari, Internet Explorer and Edge, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
.Box {
width: 100vw;
height: 100vh;
background: #ccc;
}
#imgSrc {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="Box">
<img id="imgSrc"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
alt="">
<button class="scrallFall">点击让图片进行全屏显示</button>
</div>
</body>
<script>
const goToFullScreen = (element) => {// 定义名为 "goToFullScreen" 的函数,并接受一个参数 "element"。
element = element || document.body;// 如果传入 "element" 参数则以该元素为目标,否则为整个文档体 "document.body"
if (element.requestFullscreen) {// 判断是否支持 W3C 标准的请求全屏接口
element.requestFullscreen();// 通过调用 requestFullscreen() 方法来请求进入全屏模式
} else if (element.mozRequestFullScreen) {// 判断是否支持 moz 的非标准客户端 API 请求接口
element.mozRequestFullScreen();// 通过调用 mozRequestFullScreen() 方法来请求进入全屏模式
} else if (element.msRequestFullscreen) {// 判断是否支持 Microsoft 提供的 PC Edge 浏览器和 IE11 浏览器专属 Api 接口
element.msRequestFullscreen();// 通过调用 msRequestFullscreen() 方法来请求进入全屏模式
} else if (element.webkitRequestFullscreen) {// 判断是否支持 Webkit 内核标准请求接口
element.webkitRequestFullScreen();// 通过调用 webkitRequestFullScreen() 方法来请求进入全屏模式
}
};
const img = document.querySelector('#imgSrc');
const btn = document.querySelector('.scrallFall');
btn.addEventListener("click", () => {
goToFullScreen(img);
});
</script>
</html>