使用javascript实现浏览器全屏
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
返回当前处于全屏模式下的元素
下面的代码是开启全屏模式:
- 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
使用javascript实现浏览器全屏的更多相关文章
- [转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
[From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...
- JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
实现全屏 个人版:function isFullScreen() { var fullscreenElement = document.fullscreenElement || document.we ...
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- javascript full screen 全屏显示 页面元素
javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...
- js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...
- jsp实现浏览器全屏
在web系统中实现按钮控制浏览器全屏. <!DOCTYPE html> <%@ page contentType="text/html;charset=UTF-8" ...
- 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
随机推荐
- 在eclipse-oxygen-sts中,关于快捷键[CTRL + SHIFT + O]失效的问题
这是sts的一个bug,没关系,重新设置接口 按照如图位置修改即可 下图截自于stackoverflow
- 解决Unity协程无法同步返回的问题
Unity的协程是轻量的异步解决方案,但是每调用一次yield就必须等下一帧才能继续,这一点带来了很多约束. 比如如下代码: void OnEnable() { StartCoroutine(_Do( ...
- javascrip json2
http://www.json.org/json-zh.html 下载: https://github.com/douglascrockford/JSON-js
- HTML5学习笔记(十五):方法
在一个对象中绑定函数,称为这个对象的方法. 在JavaScript中,对象的定义是这样的: var xiaoming = { name: '小明', birth: 1990 }; 但是,如果我们给xi ...
- 菜鸟学SSH(二)——Struts2国际化手动切换版
国际化(internationalization,i18n)和本地化(localization,l10n)指让产品(出版物,软件,硬件等)能够适应非本地环境,特别是其他的语言和文化.程序在不修改内部代 ...
- ISO27001适用性-导图
大图请戳这里
- django rest_framework入门四-类视图APIView
上节,我们使用函数视图,用了@api_view装饰器来修饰,这一节,我们介绍类视图APIView,显然,类视图更符合面向对象的原则. 1.使用类视图APIView重写API 类视图APIView,取代 ...
- windows 定时任务:schtasks,定时关闭网易云音乐
大部分属于转载和粘贴. 使用命令:schtasks windows 定时任务 使用样例: 每天定时关闭网易云音乐: 每天22:20关闭网易云音乐: schtasks /create /tn &qu ...
- HBase的Write Ahead Log (WAL) —— 整体架构、线程模型【转】
转自:http://www.cnblogs.com/ohuang/p/5807543.html 解决的问题 HBase的Write Ahead Log (WAL)提供了一种高并发.持久化的日志保存与回 ...
- 【C/C++】struct探索·extern "C"含义探索 ·C++与C的混合编程·C 语言高效编程的几招
本文为笔者阅读<嵌入式C精华>的摘录,推荐一下,不错的书 一.C/C++语言 struct深层探索 1.自然对界 struct是一种复合数据类型,其构成元素既可以是基本数据类型(如 int ...