JavaScript控制瀏覽器全屏顯示簡單示例

2019-11-19 13:33:05

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript控制瀏覽器全屏顯示。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>m.survivalescaperooms.com JS全屏顯示</title></head><body><div onclick="launchFullscreen(document.documentElement);">全屏顯示</div><div onclick="exitFullscreen()(document.documentElement);">退出全屏</div>  <!--launchFullscreen(document.documentElement);--></body></html><script>  // 判斷各種瀏覽器，找到正確的方法  function launchFullscreen(element) {    if(element.requestFullscreen) {      element.requestFullscreen();    } else if(element.mozRequestFullScreen) {      element.mozRequestFullScreen();    } else if(element.webkitRequestFullscreen) {      element.webkitRequestFullscreen();    } else if(element.msRequestFullscreen) {      element.msRequestFullscreen();    }  }  // 判斷瀏覽器種類  function exitFullscreen() {    if(document.exitFullscreen) {      document.exitFullscreen();    } else if(document.mozCancelFullScreen) {      document.mozCancelFullScreen();    } else if(document.webkitExitFullscreen) {      document.webkitExitFullscreen();    }  }  // 退出全屏模式!  exitFullscreen();</script>

使用本站HTML/CSS/JS在線運行測試工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下測試運行效果：