- 浏览: 7834355 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
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
返回当前处于全屏模式下的元素
下面的代码是开启全屏模式:
下面的代码就是整个页面调用全屏模式
var html = document.documentElement;
fullScreen(html);
下面的则是对指定元素,比如
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);
如果要取消,同样:
不过老实说,FULL SCREEN有个问题,容易造成欺骗,比如在
http://feross.org/html5-fullscreen-api-attack/中,其中就有一个很好的DEMO,
去欺骗了,比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行,
一点进去,因为使用了全屏幕API,就会欺骗到人
详细代码在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
全屏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
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 743刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 473三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1437http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 758https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1636即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 946不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2965参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92501. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 587http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 799http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9401 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 535虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 515【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1375https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 766深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 899(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1100https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3108http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1514canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 511http://www.ruanyifeng.com/blog/ ...
相关推荐
主要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了启动全屏模式和退出全屏模式代码示例,同时讲解了Fullscreen 属性与事件,需要的朋友可以参考下
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
eclipse 全屏插件 fullscreen 获得更多编辑空间
ANE根据设备的容量将屏幕放置在FullScreen中,非常适合Android作为FullScreenInteractive。
fullscreen.js 是一个用来实现全屏的照片展示的 jQuery 插件,使用全屏 API,支持浏览器包括:Firefox 10 and Chrome 15 (还可能有 Safari 5.1 ). 标签:fullscreen
人们一直注意到Fullscreen API标准存在较小和较大的问题,我们很乐意为您解决这些问题。 也欢迎出现印刷和语法错误的请求请求。 我们很乐意指导您完成此过程。 如果您有兴趣并且需要入门帮助,请对该问题发表评论或...
MyEclipse可用fullscreen插件 MyEclipse可用fullscreen插件
HTML5 video播放器全屏(fullScreen)方法实例.docxHTML5 video播放器全屏(fullScreen)方法实例.docx
切换至全屏显示的c代码,直接调用FullScreen()函数即可进入全屏显示。
jQuery-FullScreen-master 全屏操作
Fullscreen Editor,想要在不进行构建的情况下玩全屏游戏吗?想要在全屏模式下编辑场景吗? 现在你可以做到!
在页面中包含Control.FullScreen.js和Control.FullScreen.css: < link rel =" stylesheet " href =" Control.FullScreen.css " /> < script src =" Control.FullScreen.js " > </ script > ...
ember-fullscreen使用进行所有全屏API调用。 这意味着ember-fullscreen将在所有支持全屏API / screenfull的浏览器上运行: : 检查最小。 安装 ember-fullscreen是ember-cli插件。 只需在ember-cli项目上运行...
扩展程序的作用就像它的名字一样,它可以使编辑器窗口处于全屏模式,简单易用,对于在真实游戏环境中进行录制、测试和调整场景都非常有用。 在全屏模式下所有功能完全正常。 使用方法 只需按下快捷键即可打开或关闭...
普通的javascript环境: 在页面中包括screenfull.js , Control.FullScreen.js和Control.FullScreen.css 。 软件包screenfull.js必须位于Control.FullScreen.js之前,并且可以从CDN加载: < link rel =" ...
前端项目-lg-fullscreen,LightGallery的全屏模块。
前端项目-jquery-fullscreen-plugin,这个jquery插件提供了一个简单易用的机制来控制现代浏览器的新全屏模式。目前只有更新的基于webkit的浏览器(如chrome)和firefox提供了这个新的全屏功能。