用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之一(初识Javascript)
Jan 20 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
tab栏切换原理
Mar 22 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
JS数组去重详情
Nov 07 Javascript
浅析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
关于crontab的使用详解
2013/06/24 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
实例浅析js的this
2016/12/11 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue初始化动画加载的实例
2018/09/01 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
vue elementui form表单验证的实现
2018/11/11 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
python爬取哈尔滨天气信息
2018/07/14 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
三年级音乐教学反思
2014/01/28 职场文书
写给医生的感谢信
2015/01/22 职场文书
素质拓展训练感想
2015/08/07 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL