hisasann/JavaScriptFullscreen.html

## JavaScriptFullscreen.html
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptからフルスクリーン化</title>
  <style type="text/css">
  body {
    background-color: #888888;
  }

  :-webkit-full-screen #isFullscreen{
  }
  :-webkit-full-screen #isFullscreen:after {
    content: 'にしました'
  }

  :-moz-full-screen #isFullscreen{
  }
  :-moz-full-screen #isFullscreen:after {
    content: 'にしました'
  }
  </style>
  <script type="text/javascript">
  window.addEventListener('load', function() {
    var element = document.getElementById('fullscreenBtn');
    if(element) {
      element.addEventListener('click', function(e) {
        // webkit
        if(document.body.webkitRequestFullScreen) {
          document.body.onwebkitfullscreenchange = function(e) {
            document.body.style.width = window.innerWidth + 'px';
            document.body.style.height = window.innerHeight + 'px';
            document.body.onwebkitfullscreenchange = function() {
            };
          };
          document.body.webkitRequestFullScreen();
        }

        // mozilla
        if(document.body.mozRequestFullScreen) {
          document.body.mozRequestFullScreen();
        }

        e.preventDefault();
      }, false);
    }
  });
  </script>
</head>
<body>

<h1>JavaScriptからフルスクリーン化</h1>

<h2 id="isFullscreen">フルスクリーンモード</h2>

<p>
  <a href="#" id="fullscreenBtn">フルスクリーンにする</a>
</p>

</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>JavaScriptからフルスクリーン化</title>
	<style type="text/css">
	body {
	background-color: #888888;
	}

	:-webkit-full-screen #isFullscreen{
	}
	:-webkit-full-screen #isFullscreen:after {
	content: 'にしました'
	}

	:-moz-full-screen #isFullscreen{
	}
	:-moz-full-screen #isFullscreen:after {
	content: 'にしました'
	}
	</style>
	<script type="text/javascript">
	window.addEventListener('load', function() {
	var element = document.getElementById('fullscreenBtn');
	if(element) {
	element.addEventListener('click', function(e) {
	// webkit
	if(document.body.webkitRequestFullScreen) {
	document.body.onwebkitfullscreenchange = function(e) {
	document.body.style.width = window.innerWidth + 'px';
	document.body.style.height = window.innerHeight + 'px';
	document.body.onwebkitfullscreenchange = function() {
	};
	};
	document.body.webkitRequestFullScreen();
	}

	// mozilla
	if(document.body.mozRequestFullScreen) {
	document.body.mozRequestFullScreen();
	}

	e.preventDefault();
	}, false);
	}
	});
	</script>
	</head>
	<body>

	<h1>JavaScriptからフルスクリーン化</h1>

	<h2 id="isFullscreen">フルスクリーンモード</h2>

	<p>
	<a href="#" id="fullscreenBtn">フルスクリーンにする</a>
	</p>

	</body>
	</html>