HTML5--浏览器全屏操作、退出全屏、是否全屏
eadela
发布
于
2019-09-29 16:27:09
发布
于
2019-09-29 16:27:09
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
</head>
<img src="../images/l1.jpg" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
<script>
/*全屏操作的主要方法和属性
* 1.requestFullScreen():开启全屏显示
* 不同浏览器需要添加不同的前缀
* chrome:webkit firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
* 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/
window.onload=function(){
var div=document.querySelector("div");
/*添加三个按钮的点击事件*/
/*全屏操作*/
document.querySelector("#full").onclick=function(){
/*div.requestFullScreen();*/
/*div.webkitRequestFullScreen();*/
/*div.mozRequestFullScreen();*/
/*使用能力测试添加不同浏览器下的前缀*/
if(div.requestFullScreen){
div.requestFullScreen();
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
else if(div.msRequestFullScreen){
div.msRequestFullScreen();
/*退出全屏*/
document.querySelector("#cancelFull").onclick=function(){
if(document.cancelFullScreen){
document.cancelFullScreen();
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
else if(document.msCancelFullScreen){
document.msCancelFullScreen();
/*判断是否是全屏状态*/
document.querySelector("#isFull").onclick=function(){
/*两个细节：使用document判断 能力测试*/
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alert(true);
else{
alert(false);