全屏

window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态
window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态
//跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
	var isFullscreen = document.fullscreenEnabled ||
	window.fullScreen ||
	document.mozFullscreenEnabled ||
	document.webkitIsFullScreen;
	return isFullscreen;
}
//全屏
var fScreen = function(){
	var docElm = document.documentElement;
	if (docElm.requestFullscreen) {
	  docElm.requestFullscreen();
	}
	else if (docElm.msRequestFullscreen) {
	  docElm.msRequestFullscreen();
	  ieIsfSceen = true;
	}
	else if (docElm.mozRequestFullScreen) {
	  docElm.mozRequestFullScreen();
	}
	else if (docElm.webkitRequestFullScreen) {
	  docElm.webkitRequestFullScreen();
	}else {//对不支持全屏API浏览器的处理,隐藏不需要显示的元素
	  window.parent.hideTopBottom();
	  isflsgrn = true;
	  $("#fullscreen").text("退出全屏");
	}
}

//退出全屏
var cfScreen = function(){
	if (document.exitFullscreen) {
	  document.exitFullscreen();
	}
	else if (document.msExitFullscreen) {
	  document.msExitFullscreen();
	}
	else if (document.mozCancelFullScreen) {
	  document.mozCancelFullScreen();
	}
	else if (document.webkitCancelFullScreen) {
	  document.webkitCancelFullScreen();
	}else {
	  window.parent.showTopBottom();
	  isflsgrn = false;
	  $("#fullscreen").text("全屏");
	}
}

//全屏按钮点击事件
$("#fullscreen").click(function(){
	var isfScreen = fullscreenEnable();
	if(!isfScreen && isflsgrn == false){
	  if (ieIsfSceen == true) {
		document.msExitFullscreen();
		ieIsfSceen = false;
		return;
	  }
	  fScreen();
	}else{
	  cfScreen();
	}
})
	
//键盘操作
$(document).keydown(function (event) {
	if(event.keyCode == 27 && ieIsfSceen == true){
	  ieIsfSceen = false;
	}
});




//监听状态变化
if (window.addEventListener) {
document.addEventListener('fullscreenchange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
document.addEventListener('webkitfullscreenchange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
document.addEventListener('mozfullscreenchange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
document.addEventListener('MSFullscreenChange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
}

猜你喜欢

转载自blog.csdn.net/wt346326775/article/details/81608249