• 使用javascript实现浏览器全屏


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

    1 element.requestFullScreen() 

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


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

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


    退出全屏 
      document.cancelFullScreen() 


    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. }  
    11.   
    12.   
    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) {  
    2.   
    3.   // 不响应真正的A HREF点击事件  
    4.   event.preventDefault();  
    5.   event.stopPropagation();  
    6.   
    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.   }  
    17.   
    18.   //显示假的UI  
    19.   $('#menu, #browser').show();  
    20.   
    21.     
    22.   $('#target-site').show();  
    23. });  



      详细代码在https://github.com/feross/fullscreen-api-attack可以下载 
    老外也提到了: 
       Browser vendors are well aware of the potential security issues with fullscreen. For example, a malicious site could show a full screen Windows or Mac login window and steal a password. That’s why they are disabling keyboard support by default and only enabling by explicitly asking. — John Dyer 

  • 相关阅读:
    Git远程仓库的使用(github为例)
    SQL查看数据库中每张表的数据量和总数据量
    HTML简单的注册页面搭建
    java新建日期获取工具
    ArrayList的使用方法技巧(转载)
    UI初级 TextField
    UI初级 Label
    UI入门 纯代码 第一节 UIWindow, UIView
    C 入门 第十一节
    secoclient安装mac版提示系统配置文件写入失败的解决方案
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/4119084.html
Copyright © 2020-2023  润新知