效果图
代码
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body > <div id="content" style="height:500px;width:500px;background:#fff"> <button id="btn" onclick="requestFullScreen()">全屏显示</button> <button id="btn2" onclick="exitFullScreen()">退出全屏</button> <h1>js控制页面的全屏展示和退出全屏显示</h1> </div> </body> <script language="JavaScript"> var htmlDom = document.documentElement; //全屏显示 function requestFullScreen() { var requestMethod = htmlDom.webkitRequestFullScreen;//谷歌 if (requestMethod) { requestMethod.call(htmlDom); } } //退出全屏 function exitFullScreen(){ var exitMethod = document.webkitExitFullscreen; //谷歌 if (exitMethod) { exitMethod.call(document); } } </script> </html>
参考：https://www.jb51.net/article/96673.htm，连接下有各种浏览器的适配