全屏相关API — 进入退出全屏相关API

原创 minsong 随笔 Vue 190阅读 2018-12-26 14:03:36 举报

最近在做数据大屏的需求,会涉及到进入全屏及退出全屏的操作,在这儿简单记录一下遇到的问题及知识点。

1.API简单介绍

1.1 方法

1.1.1 requestFullscreen()

触发元素的全屏模式:Element.requestFullscreen()

1.1.2 exitFullscreen()

退出全屏:document.exitFullscreen()

1.2 事件

1.2.1 fullscreenchange

元素进入和退出全屏时都会触发

1.2.2 fullscreenerror

元素进入和退出全屏发生错误时触发

1.3 属性

1.3.1 fullscreenElement

document.fullscreenElement 查看全屏的元素,没有则返回null
这个的支持度不高。
注:之前是document.fullscreen,返回true/false,已废弃。

1.3.2 fullscreenEnabled

document.fullscreenEnabled 当前是否支持进入全屏状态。

1.4 全屏样式CSS

1.4.1 :fullscreen 伪类

1.4.2 :backdrop 伪元素

1.5 兼容性

标准Blink (Chrome & Opera)、Safari (WebKit)、EdgeGecko (Firefox)Internet Explorer 11
document.fullscreenEnabledwebkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabled
document.fullscreenElementwebkitFullscreenElementmozFullScreenElementmsFullscreenElement
document.onfullscreenchangeonwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChange
document.onfullscreenerroronwebkitfullscreenerroronmozfullscreenerrorMSFullscreenError
document.exitFullscreen()webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()
element.requestFullscreen()webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()
:fullscreen:-webkit-full-screen:-moz-full-screen:-ms-fullscreen

1.6 总结

2.vue实现全屏方案

1.安装sreenfull插件
npm install --save screenfull

2.使用该插件

3.发现第二步的内容有些问题并不能实现全屏与缩放全屏的效果
4.写放大至全屏及缩小至全屏的方法

5.监听按ESC按键退出的全屏

6.监控屏幕大小发生变化时执行的操作

7.总体代码

参考链接

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复