全屏api-requestFullScreen

js实现接口api requestFullScreen

 

// 语法
// 打开全屏
document.documentElement.requestFullScreen();
document.body.requestFullScreen();
dom.requestFullScreen(); //dom也可以全屏
//兼容写法
mozRequestFullScreen()
webkitRequestFullScreen()
msRequestFullscreen()

// 退出全屏
document.exitFullscreen()
// 兼容写法
mozCancelFullScreen()
webkitCancelFullScreen()
msExitFullscreen()

 

容易出现的坑:

浮窗组件什么的会在body或root绝对定位一个浮窗,

当某个dom开启全屏后,会脱离原有文档流,创建一个新的文档流。

为该dom或者dom子元素设置的浮窗仍在body/root中,设置定位。

这个定位的浮窗的定位不能在设置全屏dom的新文档流中使用,

现象就是看不到浮窗了。

解决办法:

1将需全屏的dom设置成最外层的,例如body,#app等。但如果局部全局的话,就不适用了。

2浮窗组件有的可以设置其填充的根节点。设置成全屏dom内的就相当于在全屏dom的文档流中了。

小结,了解全屏的原理,设置浮窗的根节点,根据不同场景设置不同解决办法。

 

 

  

全屏api-requestFullScreen

上一篇:如何使用scp在Linux服务器的后台传输文件?


下一篇:IDEA插件配置之Eclipse Code Formatte