JS實現全屏和退出全屏
阿新 • • 發佈：2020-12-29
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS實現全屏和退出全屏-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <button onclick="toggleFullScreen(event)">點我全屏</button> <script> function FullScreen(el) { var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; if (!isFullscreen) { //進入全屏,多重短路表示式 (el.requestFullscreen && el.requestFullscreen()) || (el.mozRequestFullScreen && el.mozRequestFullScreen()) || (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen()); } else { //退出全屏,三目運算子 document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : ''; } } function toggleFullScreen(e) { var el = e.srcElement || e.target; //target相容Firefox el.innerHTML == '點我全屏' ? el.innerHTML = '退出全屏' : el.innerHTML = '點我全屏'; FullScreen(el); } </script> </body> </html>