js全屏模式轻松掌握[局部元素全屏展示]

发布时间:2019-08-16 14:27:36 来源:银河棋牌app下载

js全屏模式轻松掌握[局部元素全屏展示]
 

  我第一次对网页全屏模式有概念,是那种网页播放视频的全屏播 放的那种。感觉很强,前几个星期有个需求也是关于全屏模式的,接触之后才知道全屏模式并不神秘,是个很容易掌握的技能...

  我把全屏模式封装在一个类里面,在代码中有详细的注释,如果有需要的话,直接把类拿出来,根据栗子和注释使用即可。

  使用提供的API,让一个元素与其子元素,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

  在这种情况下退出全屏,只会退出红色全屏,退回到左边全屏的形式,所以页面依然是全屏模式。

  目前并不是所有的浏览器都实现了API的无前缀版本,所以我们需要针对不同浏览器,做一下API的兼容:

  推荐这么做,因为如果每个API都要这样重复的判断浏览器前缀,那也太恶心了!

  document.fullscreenEnabled属性返回一个布尔值,表示当前文档是否可以切换到全屏状态。

  如果没有保存浏览器前缀的话,注意做一下不同浏览器前缀的兼容!下面不再强调。

  调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。

  像demo中,先进入左边全屏,再进入红色全屏,即为:多层全屏的情况(虽然这种情况并不多)。

  当出现多层全屏的情况,需要一层层的退出到页面最初始的情况,并不是调用一次document.exitFullscreen()就恢复到页面最初始的样子。

  fullscreenElement属性返回正处于全屏状态的Element节点,如果当前没有节点处于全屏状态,则返回null

  事实上,还有一个属性document.fullscreen,返回一个布尔值,表示文档是否处于全屏模式。

  当我们进入全屏和离开全屏的时候,都会触发一个fullscreenchange事件。

  看了好久事件返回的信息,确实找不到一个值,表明这是在进入全屏,或者离开全屏!

  可以说相当不人性化了!但我们可以通过检查当前是否有节点处于全屏状态,判断当前是否处于全屏模式。

  进入全屏并不总是成功的,可能是技术原因,也可能是用户拒绝,我们在上文进入全文的APIElement.requestFullscreen()部分讲过了。

  chorme 70 下的默认会为正在全屏的dom添加两个class:稍微看一下

  全屏状态下,大多数浏览器的CSS支持:full-screen伪类,只有IE11支持:fullscreen伪类。使用这个伪类,可以对全屏状态设置单独的CSS属性。

  我们可以把全屏技术应用在H5游戏、信息流网站、视频等地方,下次再有全屏需求时,记住不要慌,回头看看过本文的栗子,把我封装的类拿出来直接用就可以啦!

  话说,firefox似乎是一次性退出所有全屏。当然也有可能是第二个全屏打开的时候就把前一个挤掉了。

  这里有个问题,全屏元素之外的定位元素如何在全屏元素上显示?之前是可以通过设置足够大的zindex,后来浏览器更新以后不行了

  可以的 我就是在Vue项目中用的。 这是一个H5的API 跟框架没关系的。

  每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

上一篇:电脑全屏模式下缩小的快捷键是什么? 下一篇:photoshop怎么退出全屏
要闻推荐
银河棋牌游戏中心下载

拍摄银河如何设置相机参数?

浩瀚美丽的星空是许多风光摄影师非常喜欢的拍摄题材。拍摄星 [详细]

新版Edge移植全屏模式!再获经典版Edge优秀特性

在迁移至Chromium平台之后,微软不断将经典版Edge的优秀特性和功 [详细]

银河棋牌app下载 更多