用html5 js实现点击一个按钮达到浏览器全屏效果


Posted in Javascript onMay 28, 2014

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

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 (elem.msRequestFullscreen) {

 elem.msRequestFullscreen();

}

退出全屏 

if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
}

事件监听

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);

全屏样式设置

在浏览器全屏的使用我们还可以进行样式设置

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
}

附录

1 一个在线的Demo

    http://robnyman.github.io/fullscreen/

2   HTML5全屏API之网络钓鱼

      http://www.36ria.com/5807

3   jquery封装的全屏插件

     http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4  更加详细的全屏API介绍

    4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

    4.2  https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5  HTML5全屏API在FireFox/Chrome中的显示差异

   http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

Javascript 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
微信小程序实现图片上传
May 23 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
浅析JavaScript基本类型与引用类型
May 28 #Javascript
最短的IE判断var ie=!-[1,]分析
May 28 #Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 #Javascript
什么是cookie?js手动创建和存储cookie
May 27 #Javascript
js打开windows上的可执行文件示例
May 27 #Javascript
JavaScript数值数组排序示例分享
May 27 #Javascript
JavaScript作用域链示例分享
May 27 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php生成短网址示例
2014/05/05 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
splice slice区别
2006/10/09 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
python对url格式解析的方法
2015/05/13 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python判断无向图环是否存在的示例
2019/11/22 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
学校食堂标语
2014/10/06 职场文书
离职感谢信怎么写
2015/01/22 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js