html5下F11全屏化的几点注意
1、实现全屏化
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
2、退出全屏化
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
退出全屏化的问题来了,如果想用 ESC键 在退出全屏化的时候监听这个事件,经测试在IE中是可以监听到,firefox和chrome 中都无法监听到。
为了达到监听 ESC的效果,解决方案如下:
window.onresize = function(){
if(!checkFull()){
//要执行的动作
}
}
function checkFull(){
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if(isFull === undefined) isFull = false;
return isFull;
}
退出全屏化之后监控 window的resize事件,resize触发之后最好取消掉这个监听。
html5下F11全屏化的几点注意的更多相关文章
- HTML5 全屏化操作功能
由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta http ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- 浏览器全屏之requestFullScreen全屏与F11全屏
一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...
- H5实现全屏与F11全屏
最近做项目用到全屏,现总结一下全屏: 1.局部全屏:H5全屏和F11有区别,在这种情况下判断全屏只需要通过H5全屏属性,无论全屏后有无滚动条都可判断. /** * [isFullscreen 判断浏览 ...
- audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题
(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...
- 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案
摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用 ...
- WPF解决界面全屏化但不遮挡任务栏的问题
原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改 </pre>&l ...
- 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize
1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...
- HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
随机推荐
- Java面试题之Forward和Redirect的区别
redirect:请求重定向:客户端行为,本质上为2次请求,地址栏改变,前一次请求对象消失.举例:你去银行办事(forward.jsp),结果告诉你少带了东西,你得先去公安局办(index.html) ...
- 【Python】SciKit-Learn包安装问题
pip install scikit-learn 如果失败的话,可以考虑直接升级pip 我原先的pip版本是10.0.1 安装失败 升级pip到18.1后,在安装就成功了
- 亲测实验,stm32待机模式和停机模式唤醒程序的区别,以及唤醒后程序入口
这两天研究了STM32的低功耗知识,低功耗里主要研究的是STM32的待机模式和停机模式.让单片机进入的待机模式和停机模式比较容易,实验中通过设置中断口PA1来响应待机和停机模式. void EXTI1 ...
- Git-命令行-删除本地和远程分支
命令行方式 Git Bash: 切换到要操作的项目文件夹 命令行 : $ cd <ProjectPath> 查看项目的分支们(包括本地和远程) 命令行 : $ git branch -a ...
- vue+nginx编译部署
1.项目路径下vue-test输入命令npm run build编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了.2.网上下载nginx,下载地址http:// ...
- python各种类型日期转换大全
最近写python做各种日期转换比较多,顺便总结一下,先上张图: # 根据字符串类型转日期 返回值类型<class 'time.struct_time'> st_time = time.s ...
- Oracle数据库容量使用情况调查
-- 剩余容量 select sum(bytes) FREE from DBA_FREE_SPACE where tablespace_name ='xxx'; -- 总容量 select sum(b ...
- VSS2005源代码管理启用http方式
一直在使用vss管理源代码,在服务器上使用文件共享当方式.最近安全形式升级,禁止使用文件共享,因此要升级到http方式. 按照网上的教程,一路前行. 1.登录服务器桌面,打开vss administr ...
- MD5加密出现 无法启动:此实现不是Windows平台FIPS验证的加密算法的一部分
出现问题: 出现这个问题的原因是订票助手.NET使用了MD5算法,而系统的组策略安全设置导致无法使用此算法.要修正此问题,请按照如下操作(两种方法任选其一). 注:(来源于 http://ask.f ...
- bzoj5109: [CodePlus 2017]大吉大利,晚上吃鸡!
Description 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏.在游戏中,皮皮 和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的快 ...