HTML5 中fullscreen 中的几个API和fullscreen欺骗
全屏API,游戏呀,等都很有用。先看常见的API
1 element.requestFullScreen()
作用:请求某个元素element全屏
2
Document.getElementById(“myCanvas”).requestFullScreen()
这里是将其中的元素ID去请求fullscreen
3
退出全屏
document.cancelFullScreen()
4
Document.fullScreen
如果用户在全屏模式下,则返回true
5 document.fullScreenElement
返回当前处于全屏模式下的元素
下面的代码是开启全屏模式:

- function fullScreen(element) {
- if(element.requestFullScreen) {
- element.requestFullScreen();
- } else if(element.webkitRequestFullScreen ) {
- element.webkitRequestFullScreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- }
- }
下面的代码就是整个页面调用全屏模式
var html = document.documentElement;
fullScreen(html);
下面的则是对指定元素,比如
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);
如果要取消,同样:

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

- $('html').on('click keypress', 'a', function(event) {
- // 不响应真正的A HREF点击事件
- event.preventDefault();
- event.stopPropagation();
- // Trigger fullscreen
- if (elementPrototype.requestFullscreen) {
- document.documentElement.requestFullscreen();
- } else if (elementPrototype.webkitRequestFullScreen) {
- document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
- } else if (elementPrototype.mozRequestFullScreen) {
- document.documentElement.mozRequestFullScreen();
- } else {
- //
- }
- //显示假的UI
- $('#menu, #browser').show();
- $('#target-site').show();
- });
详细代码在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欺骗的更多相关文章
- HTML5中与页面显示相关的API
1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API 是指当页面变为最小 ...
- HTML5移动开发中的meta与link
meta HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放 1 <meta n ...
- 在docker中运行ASP.NET Core Web API应用程序
本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过程中,也会对docker的使用进行一些简单的描述.对于.NET Cor ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- html5 webDatabase 存储中sql语句执行可嵌套使用
html5 webDatabase 存储中sql语句执行可嵌套使用,代码如下: *); data.transaction(function(tx){ tx.executeSql("creat ...
- 你所不知道的html5与html中的那些事第三篇
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
- HTML5移动开发中的input输入框类型
HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...
- docker中运行ASP.NET Core Web API
在docker中运行ASP.NET Core Web API应用程序 本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过 ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
- 借助AMD来解决HTML5游戏开发中的痛点
借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...
随机推荐
- 【贪心】【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< ...
- 【母函数】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; ...
- 【二分图】【最大匹配】【匈牙利算法】洛谷 P2071 座位安排 seat.cpp/c/pas
∵每个座位可以坐俩人,所以拆点最大匹配. #include<cstdio> #include<vector> #include<cstring> using nam ...
- 【知识点总结】NOIP前夕 2014.11.4
2014.11.4 7:33 还有三天半就要NOIP,圈一下要背的知识点: 一.数论 1.素数判断 2.筛法求素数 3.求一个数的欧拉函数值 4.预处理欧拉函数 5.卡塔兰数递推式 6.快速幂(模素数 ...
- Java如何实现系统监控、系统信息收集(转
Java如何实现系统监控.系统信息收集.sigar开源API的学习 系统监控(1) Jar资源下载:http://download.csdn.net/detail/yixiaoping/4903853 ...
- 1.5(Spring MVC学习笔记) 拦截器(Interceptor)
一.拦截器 1.1拦截器简介 Spring中的拦截器类似Servlet中的过滤器(Filter),主要用于拦截用户请求, 并进行一定的处理操作(如验证权限.记录日志.设置编码方式等). 1.2拦截器实 ...
- Java概述--Java开发实战经典
1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...
- 关于scanf函数的返回值问题
如: scanf("%d%d",&a,&b); 1.如果a和b都被成功读入,则scanf的返回值为2 2.如果只有a被成功读入,那么返回值为1 3.如果a和b都未被 ...
- spark DiskBlockManager
RDD本身presist可以是本地存储,本地存储级别的持久化实现方式如下: DiskBlockManager负责管理和维护block和磁盘存储的映射关系,通过blockId作为文件名称,然后如果是多个 ...
- Java杂谈6——Java安全模型
Java语言安全模型是其有别于传统的编程语言的一个很重要的特点,采用一种沙箱模型隔离了Java的运行环境与具体的操作系统,使得Java在网络环境下能够更为安全的运行.理解Java的安全模型,能够帮助我 ...