起源
相信大家都有需要全屏的时候,页面的全屏怎么做呐?目前浏览器的原生支持以及很不错了,大家可以尝试下,目前在chrome浏览器上尝试!可用!
封装成FullScreen对象的代码
/**
* 全屏操作
*
* - 是否可以切换到全屏状态【属性】 fullscreenEnabled
* - 是否处于全屏状态【函数】 isFullScreen
* - 展开全屏【函数】 launchFullscreen
* - 关闭全屏【函数】 exitFullscreen
*
*
* 学习链接参考:
* https://javascript.ruanyifeng.com/htmlapi/fullscreen.html#
*/
export const FullScreen = {
/**
* fullscreenEnabled属性
* 返回一个布尔值,表示当前文档是否可以切换到全屏状态
*/
fullscreenEnabled: document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled,
/**
* 是否是全屏状态
* @return
* 有:返回正处于全屏状态的Element节点
* 没有:当前没有节点处于全屏状态, 则返回null。
*/
isFullScreen: function() {
return document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
},
/**
* 展开全屏函数
* @param {[type]} element dom对象
*