在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas。所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreenexitFullScreen即可。但这两个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实现元素的全屏、退出全屏功能的更多相关文章

  1. HTML页面全屏/退出全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. putty字体大小颜色、全屏/退出全屏快捷键 保存session设置[转]

    字体大小设置 Window->Appearance->Font settings->Change按钮设置(我的设置为16)字体为(Consolas) 字体颜色设置 Window-&g ...

  3. Putty全屏/退出全屏快捷键

  4. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

  5. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  6. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  7. JS控制全屏,监听退出全屏事件

    实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); ...

  8. js之切换全屏和退出全屏实现

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...

  9. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

随机推荐

  1. 使用appium框架测试安卓app时,获取toast弹框文字时,前一步千万不要加time.sleep等等待时间。

    使用appium框架测试安卓app时,如果需要获取toast弹框的文案内容,那么再点击弹框按钮之前,一定记得千万不要加time.sleep()等待时间,否则有延迟,一直获取不到: 获取弹框的代码: m ...

  2. linux下shell脚本中sed命令的用法

    先来给一个案例: #将old.sql文件中的符号“|”替换为“,”,并保存到test.sql文件中 sed "s/|/,/g" "old.sql"> te ...

  3. 初始WebApi(1)

    如果你要问我WebApi是干嘛,我只能说它是的给数据.哈哈哈哈哈,这几天也才刚刚了解了解关于WebApi的知识,今天就来谈谈吧. 1.创建WebApi项目 第一步:选择ASP.NET Web应用程序 ...

  4. Java第三十五天,用JDBC操作MySQL数据库(一),基础入门

    一.JDBC的概念 Java DataBase Connectivity 从字面意思我们也不难理解,就是用Java语言连接数据库的意思 JDBC定义了Java语言操作所有关系型数据库的规则(接口).即 ...

  5. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  6. Python库-NumPy

    NumPy是一个开源的Python科学计算库,用于快速处理任意维度的数组. 创建NumPy数组 #创建一维数组 list1 = [1,2,3,4] array1= np.array(list1)#用p ...

  7. Redis学习一:Redis两种持久化机制

    申明 本文章首发自本人公众号:壹枝花算不算浪漫,如若转载请标明来源! 感兴趣的小伙伴可关注个人公众号:壹枝花算不算浪漫 22.jpg 前言 Redis是基于内存来实现的NO SQL数据库,但是我么你都 ...

  8. vue2.x学习笔记(二十)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12631279.html. 循环引用 递归组件 组件是可以在它们自己的模板中调用自身的,不过它们只能通过[name] ...

  9. [linux][nginx] 常用

    原文链接http://www.cnblogs.com/codingcloud/p/5095066.html 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root ...

  10. 来个干货——使用VS2019发布.NET Core程序并部署到IIS的最新教程

    使用VS2019发布.NET Core程序并部署到IIS,不管你是使用.NET Core开发的是Web API还是网站类的程序,如果你是部署到IIS,那么下面的内容都适合于你,不会将.NET Core ...