利用js如何做到让页面全屏和不全屏功能
程序员文章站
2022-04-18 11:30:49
...
Element.requestFullscreen()
方法用于发出异步请求使元素进入全屏模式。
以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然
只有包含在顶层文档(top-level
document)内部的标准HTML元素、<svg>
元素和<math>
元素,以及拥有allowfullscreen
属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及object的内部元素不能进入全屏模式。这段是从https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen抄过来的。
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>全屏不全屏</title>
</head>
<body>
<input id="fullScreen" type="button" value="全屏"/>
<input id="fullScreenNormal" type="button" value="正常"/>
</body>
</html>
<script>
document.getElementById("fullScreen").onclick=function(){
if(document.documentElement.RequestFullScreen){
document.documentElement.RequestFullScreen();
}
//兼容火狐
console.log(document.documentElement.mozRequestFullScreen)
if(document.documentElement.mozRequestFullScreen){
document.documentElement.mozRequestFullScreen();
}
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
if(document.documentElement.webkitRequestFullScreen){
document.documentElement.webkitRequestFullScreen();
}
//兼容IE,只能写msRequestFullscreen
if(document.documentElement.msRequestFullscreen){
document.documentElement.msRequestFullscreen();
}
}
document.getElementById("fullScreenNormal").onclick=function(){
if(document.exitFullScreen){
document.exitFullscreen()
}
// //兼容火狐
// console.log(document.mozExitFullScreen)
if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}
// //兼容谷歌等
if(document.webkitExitFullscreen){
document.webkitExitFullscreen()
}
// //兼容IE
if(document.msExitFullscreen){
document.msExitFullscreen()
}
}
</script>
推荐阅读