JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas。所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen
、exitFullScreen
即可。但这两个api一般而言需要考虑其兼容性
问题,那么就需要额外封装
一下。笔者参考相关资料,结合自身实践,最终整理出以下封装函数,理念虽然没有特别之处,但这种封装的写法却属于一种微原创
。以下经过实际项目验证可行(如有误,欢迎指出):
一、全屏
// 全屏的兼容
const fullScreen = ele => {
const func =
ele.requestFullscreen ||
ele.mozRequestFullScreen ||
ele.webkitRequestFullscreen ||
ele.msRequestFullscreen;
func.call(ele);
};
在上面的函数中,首先是判断浏览器支持的api是哪一个,以实现兼容,而后调用它。在调用的时候需要重新绑定一下ele
,否则会报错。这种写法避免了繁琐的if else
写法,更加易读。
二、退出全屏
// 退出全屏的兼容
const exitFullscreen = () => {
const func =
document.exitFullScreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
func.call(document);
};
理由同上,这里需要注意的是,无需再传递dom元素,因为退出全屏属于document
的api。
JS实现元素的全屏、退出全屏功能的更多相关文章
- HTML页面全屏/退出全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- putty字体大小颜色、全屏/退出全屏快捷键 保存session设置[转]
字体大小设置 Window->Appearance->Font settings->Change按钮设置(我的设置为16)字体为(Consolas) 字体颜色设置 Window-&g ...
- Putty全屏/退出全屏快捷键
- js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- JS控制全屏,监听退出全屏事件
实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); ...
- js之切换全屏和退出全屏实现
应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
随机推荐
- autojs,autojs 发送http请求,autojs 解析json数据
如题,我这个就直接上代码吧 (function () { let request = http.request; // 覆盖http关键函数request,其他http返回最终会调用这个函数 http ...
- iSCSI集群与存储
...
- (js描述的)数据结构[双向链表](5)
(js描述的)数据结构[双向链表](5) 一.单向链表的缺点 1.只能按顺序查找,即从上一个到下一个,不能反过来. 二.双向链表的优点 1.可以双向查找 三.双向链表的缺点 1.结构较单向链表复杂. ...
- Tcl编程第一天,helloworld
#!/usr/bin/tclsh puts "hello world" 注意:第一行代码表示的是tcl程序运行所需要的文件位置 puts函数代表输出
- 中阶d03.4 JDBC_DAO
1.环境准备(单项目下用,在大jdbc项目下只用配置一次) jdbc的驱动(mysqlxxjdbc.jar).util工具(包装释放资源.建立连接.访问properties文件等方法) 2.dao的概 ...
- python3(十六) sorted
# sorted()函数list进行排序: L = sorted([36, 5, -12, 9, -21]) print(L) # [-21, -12, 5, 9, 36] # 可以看到默认是按照升序 ...
- 记一次Windows蓝屏分析
大半夜收到此类信息,应该是让所有系统管理员最头大的事情了 首先我快速通过iDRAC,发现服务器发生了重启操作,并得到相关日志信息 通过Dell的官方解释,确定了该问题是OS层面的异常导致.打开Wind ...
- Linux C++ 网络编程学习系列(2)——多路IO之select实现
select实现多路IO 源码地址:https://github.com/whuwzp/linuxc/tree/master/select 源码说明: server.cpp: 监听127.1:6666 ...
- Java中都通用文件下载(ContentType、文件头、response、out四步骤)
Java中都通用文件下载(ContentType.文件头.response.out四步骤) 新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian 我们就直接 ...
- 「日常开发」记一次因使用Date引起的线上BUG处理
生活中,我们需要掌控自己的时间,减少加班,提高效率:日常开发中,我们需要操作时间API,保证效率.安全.稳定.现在都2020年了,了解如何在JDK8及以后的版本中更好地操控时间就很有必要,尤其是一次线 ...