使用javascript实现浏览器全屏

HTML 5中的full screen，目前可以在除IE和opera外的浏览器中使用 ，有的时候用来做 
全屏API，游戏呀，等都很有用。先看常见的API

1 element.requestFullScreen()

作用：请求某个元素element全屏

2 
Document.getElementById(“myCanvas”).requestFullScreen()

这里是将其中的元素ID去请求fullscreen

3 
退出全屏 
  document.cancelFullScreen()

4 
Document.fullScreen

如果用户在全屏模式下，则返回true 
5 document.fullScreenElement 
  返回当前处于全屏模式下的元素

下面的代码是开启全屏模式：

1. function fullScreen(element) {
2. if(element.requestFullScreen) {
3. element.requestFullScreen();
4. } else if(element.webkitRequestFullScreen ) {
5. element.webkitRequestFullScreen();
6. } else if(element.mozRequestFullScreen) {
7. element.mozRequestFullScreen();
8. }
9. }

下面的代码就是整个页面调用全屏模式 
  var html = document.documentElement; 
fullScreen(html); 
   下面的则是对指定元素，比如 
  var canvas = document.getElementById(‘mycanvas‘); 
fullScreen(canvas); 
   如果要取消，同样：

1. // the helper function
2. function fullScreenCancel() {
3. if(document.requestFullScreen) {
4. document.requestFullScreen();
5. } else if(document .webkitRequestFullScreen ) {
6. document.webkitRequestFullScreen();
7. } else if(document .mozRequestFullScreen) {
8. document.mozRequestFullScreen();
9. }
10. }
11. fullScreenCancel();

不过老实说，FULL SCREEN有个问题，容易造成欺骗，比如在 
http://feross.org/html5-fullscreen-api-attack/中，其中就有一个很好的DEMO， 
去欺骗了，比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行， 
一点进去，因为使用了全屏幕API，就会欺骗到人

1. $(‘html‘).on(‘click keypress‘, ‘a‘, function(event) {
2. // 不响应真正的A HREF点击事件
3. event.preventDefault();
4. event.stopPropagation();
5. // Trigger fullscreen
6. if (elementPrototype.requestFullscreen) {
7. document.documentElement.requestFullscreen();
8. } else if (elementPrototype.webkitRequestFullScreen) {
9. document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
10. } else if (elementPrototype.mozRequestFullScreen) {
11. document.documentElement.mozRequestFullScreen();
12. } else {
13. //
14. }
15. //显示假的UI
16. $(‘#menu, #browser‘).show();
17. $(‘#target-site‘).show();
18. });

详细代码在https://github.com/feross/fullscreen-api-attack可以下载