[转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
[From] http://www.jb51.net/article/76695.htm
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用。先看常见的API
element.requestFullScreen()
作用:请求某个元素element全屏
Document.getElementById(“myCanvas”).requestFullScreen()
这里是将其中的元素ID去请求fullscreen
退出全屏
document.cancelFullScreen()
Document.fullScreen
如果用户在全屏模式下,则返回true
document.fullScreenElement
返回当前处于全屏模式下的元素
下面的代码是开启全屏模式:
1
2
3
4
5
6
7
8
9
|
function fullScreen(element) { if (element.requestFullScreen) { element.requestFullScreen(); } else if (element.webkitRequestFullScreen ) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } } |
下面的代码就是整个页面调用全屏模式
不过老实说,FULL SCREEN有个问题,容易造成欺骗,比如在
http://feross.org/html5-fullscreen-api-attack/中,其中就有一个很好的DEMO,去欺骗了,比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行,一点进去,因为使用了全屏幕API,就会欺骗到人
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$( '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(); }); |
下面给大家介绍JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 判断各种浏览器,找到正确的方法 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } // 启动全屏! launchFullScreen(document.documentElement); // 整个网页 launchFullScreen(document.getElementById( "videoElement" )); // 某个页面元素 |
对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。
退出全屏模式
这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
// 判断浏览器种类 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // 退出全屏模式! exitFullscreen(); |
需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。
全屏属性和事件
不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。
1.document.fullScreenElement: 全屏显示的网页元素。
2.document.fullScreenEnabled: 判断当前是否处于全屏状态。
fullscreenchange事件会在启动全屏或退出全屏时触发:
代码如下:
1
2
|
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled; |
你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。
全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:
代码如下::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
-webkit-full-screen { /* properties */ } :-moz-full-screen { /* properties */ } :-ms-fullscreen { /* properties */ } :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */ :-webkit-full-screen video { width: %; height: %; } /* styling the backdrop*/ ::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ } |
有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。
这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN's BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。
[转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件的更多相关文章
- JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
实现全屏 个人版:function isFullScreen() { var fullscreenElement = document.fullscreenElement || document.we ...
- webdriver设置浏览器全屏及设置浏览器窗口为特定大小的方法
from selenium import webdriver driver = webdriver.Chrome() #全屏 driver.maximize_window() #具体大小 driver ...
- Egret--设置全屏,控制浏览器全屏
1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- jsp实现浏览器全屏
在web系统中实现按钮控制浏览器全屏. <!DOCTYPE html> <%@ page contentType="text/html;charset=UTF-8" ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- javascript full screen 全屏显示 页面元素
javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...
- js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...
随机推荐
- IFM设备 Linux方面资料
Github: https://github.com/lovepark/ifm3d
- How to install Freemind 1.0.1 to Ubuntu 14
安装了Freemind0.9后发现不能打开windows的1.0.1保存的*.mm文件,便对版本开始升级. 1. 从http://freemind.sourceforge.net/wiki/index ...
- 整合Office Web Apps至自己的开发系统
原文出处:http://www.cnblogs.com/poissonnotes/p/3267190.html 还可参考:https://www.cnblogs.com/majiang/p/36729 ...
- What is difference between 3-layer architecture and MVC architecture?
By Vikas Singh on Sep 26, 2014 In 3-layer architecture 3-layer architecture separates the applicati ...
- 综合学生信息管理系统(JSP+JDBC)
原创 通过JSP+JDBC制作一个简单的操作数据库中表信息的系统. 总体界面如下,一共有5个功能块. 功能一:列出全部学生 功能二:按条件查询学生 功能三:新添加学生 功能四:按条件删除学生 功能五: ...
- maven的pom文件解析及配置
1.IDEA中的Maven的pom.xml文件,其实比较通俗点介绍功能主要项目引入的jar包,管理配置项目以及一些插件的配置等项目 2.对于pom配置详细介绍,整理如下2篇文档介绍的比较系统全面: h ...
- PHP foreach引用&
将以下代码打印 $variable = ['a', 'b', 'c']; foreach ($variable as $key => &$value) { } foreach ($var ...
- C语言编程学习:链表的来源分析
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
- [Win32::Console]Perl终端版生命游戏
环境,WinXP/Win7 Perl 5.16 默认循环1000次,按ESC提前退出 use strict; use Term::ReadKey; use Win32::Console; use T ...
- stegsolve的功能