// 转自:https://my.oschina.net/jackyrong/blog/114086
 
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);  
   如果要取消,同样:

代码    
  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可以下载  
老外也提到了:  
   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 

 

HTML5 中fullscreen 中的几个API和fullscreen欺骗的更多相关文章

  1. HTML5中与页面显示相关的API

    1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

  2. HTML5移动开发中的meta与link

    meta HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放 1 <meta n ...

  3. 在docker中运行ASP.NET Core Web API应用程序

    本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过程中,也会对docker的使用进行一些简单的描述.对于.NET Cor ...

  4. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  5. html5 webDatabase 存储中sql语句执行可嵌套使用

    html5 webDatabase 存储中sql语句执行可嵌套使用,代码如下: *); data.transaction(function(tx){ tx.executeSql("creat ...

  6. 你所不知道的html5与html中的那些事第三篇

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...

  7. HTML5移动开发中的input输入框类型

    HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...

  8. docker中运行ASP.NET Core Web API

    在docker中运行ASP.NET Core Web API应用程序 本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过 ...

  9. 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD

    在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...

  10. 借助AMD来解决HTML5游戏开发中的痛点

    借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...

随机推荐

  1. 【贪心】【DFS】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) C. Andryusha and Colored Balloons

    从任意点出发,贪心染色即可. #include<cstdio> #include<algorithm> using namespace std; int v[200010< ...

  2. 【母函数】hdu1028 Ignatius and the Princess III

    大意是给你1个整数n,问你能拆成多少种正整数组合.比如4有5种: 4 = 4;  4 = 3 + 1;  4 = 2 + 2;  4 = 2 + 1 + 1;  4 = 1 + 1 + 1 + 1; ...

  3. 【二分图】【最大匹配】【匈牙利算法】洛谷 P2071 座位安排 seat.cpp/c/pas

    ∵每个座位可以坐俩人,所以拆点最大匹配. #include<cstdio> #include<vector> #include<cstring> using nam ...

  4. 【知识点总结】NOIP前夕 2014.11.4

    2014.11.4 7:33 还有三天半就要NOIP,圈一下要背的知识点: 一.数论 1.素数判断 2.筛法求素数 3.求一个数的欧拉函数值 4.预处理欧拉函数 5.卡塔兰数递推式 6.快速幂(模素数 ...

  5. Java如何实现系统监控、系统信息收集(转

    Java如何实现系统监控.系统信息收集.sigar开源API的学习 系统监控(1) Jar资源下载:http://download.csdn.net/detail/yixiaoping/4903853 ...

  6. 1.5(Spring MVC学习笔记) 拦截器(Interceptor)

    一.拦截器 1.1拦截器简介 Spring中的拦截器类似Servlet中的过滤器(Filter),主要用于拦截用户请求, 并进行一定的处理操作(如验证权限.记录日志.设置编码方式等). 1.2拦截器实 ...

  7. Java概述--Java开发实战经典

    1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...

  8. 关于scanf函数的返回值问题

    如: scanf("%d%d",&a,&b); 1.如果a和b都被成功读入,则scanf的返回值为2 2.如果只有a被成功读入,那么返回值为1 3.如果a和b都未被 ...

  9. spark DiskBlockManager

    RDD本身presist可以是本地存储,本地存储级别的持久化实现方式如下: DiskBlockManager负责管理和维护block和磁盘存储的映射关系,通过blockId作为文件名称,然后如果是多个 ...

  10. Java杂谈6——Java安全模型

    Java语言安全模型是其有别于传统的编程语言的一个很重要的特点,采用一种沙箱模型隔离了Java的运行环境与具体的操作系统,使得Java在网络环境下能够更为安全的运行.理解Java的安全模型,能够帮助我 ...