<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS全屏</title>

<style>

html:-moz-full-screen {background: red}

html:-webkit-full-screen {background: red}

html:fullscreen {background: red}

</style>

</head>

<body>

<a href="#" onClick="fullscreen()">fullscreen</a>&nbsp;|&nbsp;<a href="#" onClick="exitFullscreen()">exitFullscreen</a>

<p id="state">no</p>

<script>

// 全屏

function fullscreen() {

  var docElm = document.documentElement;

  if (docElm.requestFullscreen) {

    docElm.requestFullscreen();

  } else if (docElm.mozRequestFullScreen) {

    docElm.mozRequestFullScreen();

  } else if (docElm.webkitRequestFullScreen) {

    docElm.webkitRequestFullScreen();

  } else if (docElm.msRequestFullscreen) {

    docElm.msRequestFullscreen();

  }

}

// 退出全屏

function exitFullscreen() {

  if (document.exitFullscreen) {

    document.exitFullscreen();

  } else if (document.mozCancelFullScreen) {

    document.mozCancelFullScreen();

  } else if (document.webkitCancelFullScreen) {

    document.webkitCancelFullScreen();

  } else if (document.msExitFullscreen) {

    document.msExitFullscreen();

  }

}

// 监听是否全屏

window.onload = function() {

  var elem = document.getElementById('state');

  document.addEventListener('fullscreenchange',

    function() {

      elem.innerText = document.fullscreen ? 'yes': 'no';

    },

  false);

  document.addEventListener('mozfullscreenchange',

    function() {

      elem.innerText = document.mozFullScreen ? 'yes': 'no';

    },

  false);

  document.addEventListener('webkitfullscreenchange',

    function() {

      elem.innerText = document.webkitIsFullScreen ? 'yes': 'no';

    },

  false);

  document.addEventListener('msfullscreenchange',

    function() {

      elem.innerText = document.msFullscreenElement ? 'yes': 'no';

    },

  false);

}

</script>

</body>

</html>