利用js如何做到讓頁面全屏和不全屏功能
阿新 • • 發佈:2019-01-10
Element.requestFullscreen()
方法用於發出非同步請求使元素進入全屏模式。
以下demo是頁面進行全屏和正常螢幕的,你也可以用元素來進行全屏,當然
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>全屏不全屏</title> </head> <body> <input id="fullScreen" type="button" value="全屏"/> <input id="fullScreenNormal" type="button" value="正常"/> </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("fullScreenNormal").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>