html5 js实现浏览器全屏
全屏
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.m**itFullscreen) {
document.m**itFullscreen();
}
事件监听
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;
}
最新文章
- Java (JVM) Memory Model – Memory Management in Java
- 浏览器中的Javascript的简单对话框
- LCC
- 学习笔记：腾讯云——服务器mysql操作
- word20161203
- netbean快捷键
- C#中yield return用法分析
- Res_Orders_01之需求分析
- 获取登录的IP或者信息
- Spring+SpringMVC+Mybatis 利用AOP自定义注解实现可配置日志快照记录
- HDU 5787 K-wolf Number
- 利用RTE创建自定义软件安装包（一）
- ＭySQL技术内幕汇总
- Hadoop日志文件
- NPOI 上传Excel功能
- Python记录5：函数1
- 配置和运行 MatchNet CVPR 2015 MatchNet: Unifying Feature and Metric Learning for Patch-Based Matching
- ubuntu+nginx+laravel
- Servlet Request 请求转发
- [arc082f]Sandglass 递推