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内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
随机推荐
- 使用appium框架测试安卓app时,获取toast弹框文字时,前一步千万不要加time.sleep等等待时间。
使用appium框架测试安卓app时,如果需要获取toast弹框的文案内容,那么再点击弹框按钮之前,一定记得千万不要加time.sleep()等待时间,否则有延迟,一直获取不到: 获取弹框的代码: m ...
- linux下shell脚本中sed命令的用法
先来给一个案例: #将old.sql文件中的符号“|”替换为“,”,并保存到test.sql文件中 sed "s/|/,/g" "old.sql"> te ...
- 初始WebApi(1)
如果你要问我WebApi是干嘛,我只能说它是的给数据.哈哈哈哈哈,这几天也才刚刚了解了解关于WebApi的知识,今天就来谈谈吧. 1.创建WebApi项目 第一步:选择ASP.NET Web应用程序 ...
- Java第三十五天,用JDBC操作MySQL数据库(一),基础入门
一.JDBC的概念 Java DataBase Connectivity 从字面意思我们也不难理解,就是用Java语言连接数据库的意思 JDBC定义了Java语言操作所有关系型数据库的规则(接口).即 ...
- css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
- Python库-NumPy
NumPy是一个开源的Python科学计算库,用于快速处理任意维度的数组. 创建NumPy数组 #创建一维数组 list1 = [1,2,3,4] array1= np.array(list1)#用p ...
- Redis学习一:Redis两种持久化机制
申明 本文章首发自本人公众号:壹枝花算不算浪漫,如若转载请标明来源! 感兴趣的小伙伴可关注个人公众号:壹枝花算不算浪漫 22.jpg 前言 Redis是基于内存来实现的NO SQL数据库,但是我么你都 ...
- vue2.x学习笔记(二十)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12631279.html. 循环引用 递归组件 组件是可以在它们自己的模板中调用自身的,不过它们只能通过[name] ...
- [linux][nginx] 常用
原文链接http://www.cnblogs.com/codingcloud/p/5095066.html 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root ...
- 来个干货——使用VS2019发布.NET Core程序并部署到IIS的最新教程
使用VS2019发布.NET Core程序并部署到IIS,不管你是使用.NET Core开发的是Web API还是网站类的程序,如果你是部署到IIS,那么下面的内容都适合于你,不会将.NET Core ...