全屏显示
dom.requestFullScreen | dom开启全屏显示 |
---|---|
document.cancelFullScreen | 关闭全屏显示 (只能是document这个对象调用 ) |
document.isFullScreen | 是否全屏 |
由于全屏显示功能在各浏览器的兼容性不同
所以不同的浏览器中需要加不同的兼容前缀
谷歌 | webkit |
---|---|
火狐 | moz |
欧朋浏览器 | o |
IE浏览器 | ms |
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0
}
img{
width:200px;
height:200px;
background-color: pink;
}
/*全屏状态激活这个选择器*/
#box:-webkit-full-screen{
background:purple;
}
</style>
</head>
<body>
<div id="box">
<img src="http://www.ixiupet.com/uploads/allimg/160823/1101224255-0.jpg" alt="">
<button id="full">全屏显示</button>
<button id="cancel">退出全屏</button>
<button id="isFull">是否全屏</button>
</div>
<script>
var oFull = document.getElementById('full')
var oCancel = document.getElementById('cancel')
var isFull = document.getElementById('isFull')
var oImg = document.querySelector('img')
var oBox = document.getElementById('box')
oFull.onclick = function(){
//浏览器的能力检测
if(oBox.webkitRequestFullScreen){
oBox.webkitRequestFullScreen()
}else if(oBox.mozRequestFullScreen){
oBox.mozRequestFullScreen()
}else if(oBox.oRequestFullScreen){
oImg.oRequestFullScreen()
}else{
oBox.msRequestFullScreen()
}
}
oCancel.onclick = function(){
document.webkitCancelFullScreen()
}
isFull.onclick = function () {
alert(document.webkitIsFullScreen)
}
</script>
</body>
</html>