代碼如下:
js;">window.isflsgrn = false;//ie11以下是否進入全屏標(biāo)志,true為全屏狀態(tài),false為非全屏狀態(tài) window.ieIsfSceen = false;//ie11是否進入全屏標(biāo)志,true為全屏狀態(tài),false為非全屏狀態(tài) //跨瀏覽器返回當(dāng)前 document 是否進入了可以請求全屏模式的狀態(tài) 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; } }); //監(jiān)聽狀態(tài)變化 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 參數(shù),網(wǎng)上的說法不一,有的說是監(jiān)控瀏覽器是否進入了可以請求全屏模式的狀態(tài),有的說只是一個判斷瀏覽器是否支持全屏的標(biāo)志,實際使用時也確實出現(xiàn)了問題,IE11不能識別這個屬性,需要自己單獨設(shè)置一個標(biāo)記來控制IE11當(dāng)前是否為全屏狀態(tài)。
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對VeVb武林網(wǎng)的支持!
新聞熱點
疑難解答