js讓頁面全屏
阿新 • • 發佈：2018-07-12
ram code oct 有一個 type 擁有 chan 頁面 文檔
概述
意外的發現一個網頁有一個按鈕能使網頁全屏，查了下代碼發現是H5的全屏api，於是就查了下資料，記錄下來供以後開發時參考，相信對其他人也有用。
參考資料：
利用js如何做到讓頁面全屏和不全屏功能
Element.requestFullScreen() MDN
全屏API
H5有一個全屏API，Element.requestFullscreen() 方法用於發出異步請求使元素進入全屏模式。
需要註意的是：只有包含在頂層文檔內部的標準HTML元素、<svg>元素和<math>元素，以及擁有allowfullscreen屬性的iframe的內部元素可以進入全屏模式。這意味著在frame內部的元素，以及object的內部元素不能進入
示例代碼如下：
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>全屏不全屏</title> </head> <body> <button id="fullScreen">全屏模式</button> <button id="noFullScreen">取消全屏</button> </body> </html> <script> document.getElementById("fullScreen").onclick=function(){ if(document.documentElement.RequestFullScreen){ document.documentElement.RequestFullScreen(); } //兼容火狐 console.log(document.documentElement.mozRequestFullScreen) if(document.documentElement.mozRequestFullScreen){ document.documentElement.mozRequestFullScreen(); } //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen if(document.documentElement.webkitRequestFullScreen){ document.documentElement.webkitRequestFullScreen(); } //兼容IE,只能寫msRequestFullscreen if(document.documentElement.msRequestFullscreen){ document.documentElement.msRequestFullscreen(); } } document.getElementById("noFullScreen").onclick=function(){ if(document.exitFullScreen){ document.exitFullscreen() } //兼容火狐 console.log(document.mozExitFullScreen) if(document.mozCancelFullScreen){ document.mozCancelFullScreen() } //兼容谷歌等 if(document.webkitExitFullscreen){ document.webkitExitFullscreen() } //兼容IE if(document.msExitFullscreen){ document.msExitFullscreen() } } </script>
全屏事件
如果元素被允許進入全屏模式，document對象會收到一個fullscreenchange事件，通知調用者當前元素已經進入全屏模式。如果全屏請求不被許可，則會收到一個fullscreenerror事件。
示例如下：
document.addEventListener('fullscreenchange', function(){ /*code*/ }); document.addEventListener('webkitfullscreenchange', function(){ /*code*/}); document.addEventListener('mozfullscreenchange', function(){ /*code*/}); document.addEventListener('MSFullscreenChange', function(){ /*code*/}); document.addEventListener('fullscreenerror', function(){ /*code*/ }); document.addEventListener('webkitfullscreenerror', function(){ /*code*/}); document.addEventListener('mozfullscreenerror', function(){ /*code*/); document.addEventListener('MSFullscreenError', function(){ /*code*/ });
全屏樣式
全屏之後還可以選擇性的調整樣式，就和hover一樣，如下所示：
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }js讓頁面全屏