在js中如何去实现全屏事件?

简介: 在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。

相关文章
|
11天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
|
13天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
16 1
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
20 3
|
1月前
|
JavaScript
js事件记录(如有更新请留言我去补充)
js事件记录(如有更新请留言我去补充)
|
2月前
|
前端开发 JavaScript
JavaScript 中的事件委托机制详解
【2月更文挑战第2天】本文将深入探讨 JavaScript 中的事件委托机制,介绍其原理、优势以及实际应用场景,帮助读者更好地理解并运用这一重要的前端开发技术。
|
2月前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
3月前
|
JavaScript 前端开发
js的常用事件
js的常用事件
25 1
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
107 0
Javascript 事件propagation机制