最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Javascript 开启浏览器全屏模式

运维笔记admin1浏览0评论

通常在某些情况下,我们需要让浏览器开启全屏模式,以便获得更好的视觉体验,先看下全屏模式简单的几个API。

 

浏览器默认绑定

 

非全屏模式下, document的F11按键绑定开启全屏模式
全屏模式下, document的esc和F11 按键绑定关闭全屏模式

屏幕全屏模式改变事件

当成功进入全屏模式后, document会收到一个fullscreenchange 事件。 当退出全屏状态后, document又会收到fullscreenchange 事件。

var screenChange = 'webkitfullscreenchange' || 'mozfullscreenchange' || 'fullscreenchange'

判断当前是否处于全屏状态

非标准:

var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

标准:

var isFullScreen = document.fullscreenElement || document.mozFullScreenElement||document.webkitFullscreenElement

开启全屏模式

function launchFullScreen(element) {

 if (element.requestFullscreen) {

   element.requestFullscreen();

 } else if (element.mozRequestFullScreen) {

   element.mozRequestFullScreen();

 } else if (element.webkitRequestFullscreen) {

   element.webkitRequestFullscreen();

 } else if (element.msRequestFullscreen) {

   element.msRequestFullscreen();

 }

发布评论

评论列表(0)

  1. 暂无评论