关于使用javascript API如何控制浏览器全屏

本篇文章主要介绍了"关于使用javascript API如何控制浏览器全屏"，主要涉及到javascript API,浏览器全屏方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：

我们知道，显示器的分辨率大小决定了我们看到的程序窗口的面积大小，分辨率越大，窗口面积越大，看到的内容就越多。但并不是说显示面积越大就越好，因为分辨率的变化会带来菜单文字的变化，可能会影响软件界面的字体美观。此乃题外话，就不细说了。浏览器同样是一种程序，其窗口的大小，我们可以利用脚本语言来控制调整，这样我们就可以瞒天过海地达到全屏浏览的目的。 

而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 
  返回当前处于全屏模式下的元素 

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

Java代码  

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); 
   如果要取消，同样： 

Java代码  

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. }  
13. fullScreenCancel();  

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

Java代码  

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

以上就介绍了关于使用javascript API如何控制浏览器全屏，包括了javascript API,浏览器全屏方面的内容，希望对Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_95044.html