js之切换全屏和退出全屏实现
应用场景:
比如很多网页游戏全屏之类的,或者是网上看小说等。
核心代码:
//控制全屏
function enterfullscreen() { //进入全屏
$("#fullscreen").html("退出全屏");
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();
}
} function exitfullscreen() { //退出全屏
$("#fullscreen").html("切换全屏");
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
} var a = ;
$('#fullscreen').on('click', function() {
a++;
a % == ? enterfullscreen() : exitfullscreen();
})
前端代码:
<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>
js之切换全屏和退出全屏实现的更多相关文章
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- android开发:全屏和退出全屏
android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...
- Cordova 设置全屏及退出全屏切换
设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...
- js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...
- Android动态的全屏和退出全屏
转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...
- ng2 中的全屏与退出全屏
1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...
- 原生js实现浏览器全屏和退出全屏
全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...
随机推荐
- 2019 东方财富网java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.东方财富网等公司offer,岗位是Java后端开发,因为发展原因最终选择去了东方财富网,入职一年时间了,也成为 ...
- [Linux] 树莓派编译python3.7.4
python3.7.4 源码编译后遇到ssl错误: pip is configured with locations that require TLS/SSL, however the ssl mod ...
- vue使用html2canvas生成图片并保存到本地
html2canvas官方文档 http://html2canvas.hertzen.com/ npm下载依赖 npm install html2canvas -S 在需要使用的地方引入 import ...
- 从 Vue 的视角学 React(一)—— 项目搭建
虽然 Vue 在国内一家独大,但在全球范围内,React 依然是最流行的前端框架 最近和一些朋友聊天,发现很多项目都选择了 React 技术栈,而且公司的新项目也决定使用 React 我一直以来都是走 ...
- Django 配置mysql遇到问题(一)
问题一: django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have ...
- linux shell的输出效果
在linux系统命令行界面默认目录颜色是蓝色,在黑色底色上无法看清 原来效果图: 最终效果图: 大致步骤:1.复制配置文件到个人用户的根目录下2.修改配置文件中字体颜色的设置3.重新启动窗口,输入ls ...
- springboot读取静态资源文件的方式
springboot的请求路径一般会经过Controller处理,但是静态资源文件在请求之后是直接返回的.这涉及到俩个配置项. spring.mvc.static-path-pattern=/** s ...
- Linux chage命令详解
原文 chage命令用于密码实效管理,该是用来修改帐号和密码的有效期限,接下来通过本文给大家介绍Linux chage命令相关知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧 lin ...
- Httpd服务入门知识-Httpd服务常见配置案例之定义'Main' server的文档页面路径(文档根路径)
Httpd服务入门知识-Httpd服务常见配置案例之定义'Main' server的文档页面路径(文档根路径) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建测试文件 [ ...
- Redis持久化 - RDB和AOF
原文:https://segmentfault.com/a/1190000016021217 一.持久化的作用 1. 什么是持久化 持久化(Persistence),即把数据(如内存中的对象)保存到可 ...