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内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
随机推荐
- P1627 [CQOI2009]中位数 题解
CSDN同步 原题链接 简要题意: 给定一个 \(1\) ~ \(n\) 的排列,求以 \(b\) 为中位数的 连续子序列且长度为奇数 的个数. 显然这段序列包含 \(b\). 中位数的定义:排序后在 ...
- IIS 组成
HTTP.sys http.sys 侦听来自网络的 HTTP 请求,将它们传递到 IIS 并返回响应. 它是一种可以从命令行停止和启动的服务. "NET STOP HTT ...
- 浅谈动态规划(Dynamic Programming)
利用Leetcode#198打劫家舍 浅谈动态规划 Origin:https://leetcode-cn.com/problems/house-robber/ 题目本身不难,就是一个动态规划的问题.在 ...
- 安装部署Tomcat服务器
安装部署Tomcat服务器 案例1:安装部署Tomcat服务器 案例2:使用Tomcat部署虚拟主机 案例3:使用Varnish加速Web 1案例1:安装部署Tom ...
- Martinjingyu的开发环境
Mac Pro Book一台去年新款,最近这4年多折腾的东西总结下. Mac的包管理器首选HomeBrew,安装如下: ruby -e "$(curl -fsSL https://raw.g ...
- Struts2-学习笔记系列(4)-访问servlet api
5.1通过actioncontext: public String execute() throws Exception { ActionContext ctx = ActionContext.get ...
- AD颗粒化密码规则策略
我们在第一次设定密码规则的时候,通常会在根节点或者默认组策略中设置 如果,我们在后期运维过程中,有一些特殊用户需要设置额外的密码策略,我们要如何操作呢? 可能,有些同学会在这些特殊用户对应的OU下在创 ...
- 测量C++程序运行时间
有个很奇怪的现象,我自认为写得好的文章阅读量只有一百多,随手写的却有一千多--要么是胡搞,要么是比较浅显.纵观博客园里众多阅读过万的文章,若非绝世之作,则必为介绍入门级知识的短文.为了让我的十八线博客 ...
- Delphi Unicode转中文
function UniCode2GB(S : String):String;Var I: Integer;beginI := Length(S);while I >=4 do begintry ...
- F 最大公约数和最小公倍数问题
链接:https://ac.nowcoder.com/acm/contest/948/F来源:牛客网 输入2个正整数x0,y0(2<=x0<100000,2<=y0<=1000 ...