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; $("#fsbutton").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; $("#fsbutton").text("全屏"); } } //全屏按钮点击事件 $("#fsbutton").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($("#fsbutton").text() == "全屏"){ $("#fsbutton").text("退出全屏"); }else{ $("#fsbutton").text("全屏"); } }); document.addeventlistener('webkitfullscreenchange', function(){ if($("#fsbutton").text() == "全屏"){ $("#fsbutton").text("退出全屏"); }else{ $("#fsbutton").text("全屏"); } }); document.addeventlistener('mozfullscreenchange', function(){ if($("#fsbutton").text() == "全屏"){ $("#fsbutton").text("退出全屏"); }else{ $("#fsbutton").text("全屏"); } }); document.addeventlistener('msfullscreenchange', function(){ if($("#fsbutton").text() == "全屏"){ $("#fsbutton").text("退出全屏"); }else{ $("#fsbutton").text("全屏"); } }); }
值得注意的是 fullscreenenabled 参数，网上的说法不一，有的说是监控浏览器是否进入了可以请求全屏模式的状态，有的说只是一个判断浏览器是否支持全屏的标志，实际使用时也确实出现了问题，ie11不能识别这个属性，需要自己单独设置一个标记来控制ie11当前是否为全屏状态。
以上就是全屏事件问题处理的详细内容。