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>www.VeVB.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，可得到如下测试运行效果：