代码改变世界

让你的页面瞬间全屏

2014-03-01 03:11 by Barret Lee, ... 阅读, ... 评论, 收藏, 编辑

@update 文章下方有更新,提到了更多全屏的知识以及错误的矫正。

页面全屏是一个体验非常棒的功能,他可以让你的视觉焦点聚集在你想关注的元素块上。很多浏览器都支持全屏,按下 F11,哦了! 页面全屏了~ 但是本文要说的并不是这种全屏。当页面中有个小 DEMO 或者小游戏要展示的时候,用户期望,这个 DEMO 或者游戏可以在全屏下展示,本文就教你如何来展示。

如果你是非 IE 浏览器进入的该页面,你可能已经看到了页面上发生了一点小变化,多个东西:

没错,多了个“进入全屏”的按钮,这就是本文要介绍的内容!

本文地址:http://www.cnblogs.com/hustskyking/p/javascript-fullscreen.html,转载请注明源地址。

一、全屏策略

1. 原理

一些浏览器提供了元素全屏的接口,这些接口的调用特别简单:

// 进入全屏
element.requestFullScreen(); 
// 退出全屏
document.exitFullscreen(); 

这是 w3c 规范统一的接口,但是浏览器总是那么调皮,内部实现的时候会加上自己厂商的前缀,如:

// 小狐
element.mozRequestFullScreen();  
// Chrome
document.webkitCancelFullScreen();

这里有两点需要引起注意,W3C 中的退出全屏是 exitFullscreen,而小狐跟 Chrome 使用的是 cancelFullScreen,这里在作判断的时候不要弄错了;再一点就是当我们退出全屏的时候,并不是使用 element 作为退出的对象了,而是使用 document。

2. 兼容处理

原理是很简单,但是针对浏览器的兼容性写起来还是挺麻烦的,幸好 Chrome 换用 blink内核 之后没有继续加上一个 -blink-,否则开发者心里会有无数个草泥马奔腾的!

对于进入全屏:

function launchFullScreen(element) {  
   if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}

对于退出全屏:

function cancelFullScreen() {  
   if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
}  

3. 浏览器兼容性

IE 用户就甭看了,刚测试,IE11 不兼容(需要加前缀 ms)。对于浏览器的兼容情况,请戳这里。目前 Firefox 兼容,不过有点离谱。他会弹出一个让你全屏的提示,此时确实是全屏的,但当你点击提示中的“允许”时,屏幕又退出了全屏,真是让人匪夷所思。我测试的版本(27.0.1)有这个问题,当然,这是浏览器本身的问题,不用纠结。

Chrome 对于新特性的支持永远是站在前排,不得不佩服 google 开发工程师的牛掰!

二、3 个 bug

1. window 失去焦点

当全屏一个元素块的时候,原始状态该元素块可能没有 padding 或者 margin 值,为了让他显示的稍微养眼一些,我们可能会给他主动加上 padding 值,然后在退出全屏的时候在拿到设置的值。但此时,一个 bug 出现鸟,当我们点击全屏页面中的 a 标签,或者触发了某个 window.open 之后,浏览器会失去焦点,跳到新开的页面中,而全屏的页面会退出全屏,搞笑的是我们开始设置的 padding 值他不给我们去掉,这个是令人十分神伤的,不过没关系,有 bug 咱们就打补丁!

window.onblur = function(){
    cancelFullsreen();
    changeThePadding();
};

有人会想到,我们在点击 a 链接的时候先 changeThePadding(),再让 a 标签跳走,这种方式是不合理的,因为除了 a 链接会让页面失去焦点之外还有其他的可能(如 window.open)。

@update 因为 bug 3 的存在,这里不能这样改,需要利用浏览器的全屏探测:

$(document).on('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function(){
    if (!document.fullscreenElement &&    // alternative standard method
    !document.mozFullScreenElement && 
    !document.webkitFullscreenElement && 
    !document.msFullscreenElement ) {
        // 在这里处理 bug
changeThePadding();
} });

2. 一个貌似可以重现的 bug

所谓的可以重现就是,把代码逻辑抽离出来,写个 demo 还能看到 bug。反正我试过好几次,这个 bug 都出现了,懒得写一个 DEMO 重现他。他出现的位置是:我的滚动条是自己设置的样式,当全屏之后,滚动条本应该在页面的最右侧,但是我测试的时候他偶尔会离最右侧有十几个像素,我也不知道为什么。但是当我打开 DevTools 的时候,这十几个像素又奇妙的被缝合了~

后来一想,管你呢,这肯定是 google 的工程师没有留意到的位置!既然开打 DevTools 可以修复,那就说明触发 window.resize 也能解决这个问题,好吧,那就这样试试吧:

newCancelFullscreen = function(){
    cancelFullscreen();
    window.onresize();
};

果然有效,bug 搞定!

3. 全屏之后,部分浏览器会在该页面失去焦点

这就相当于,全屏之后,触发了 window.blur();

三、小结

除了上面提到的两个 bug,还有一个值得注意的是,如果你全屏的那个元素块很高但却没有设置

element { overflow:auto; }

之类的东西,你会发现滚烂你的鼠标也滚不出那块区域。

本文介绍了如何使用 javascript 将页面中的某个元素调至全屏,并指出了再使用过程中的两个 bug,希望引起注意!

四、参考资料

 

@update 2014/03/01 12:00

1. Trident 内核的 IE 浏览器是支持的,可以用 element.msRequestFullscreen(),退出用 msExitFullscreen()

2. 对于全屏的元素可以使用伪元素给他加样式:

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

3. 浏览器提供的两个方便开发的东西:

fullscreenElement:如果这个属性为空,则浏览器处于非全屏状态,否则就是处于全屏。

fullscreenEnabled:这个属性告诉你浏览器 document 是否可以全屏。

4. 也可以使用 keydown 来控制全屏,如:

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

对于 toggleFullScreen 函数:

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
Toggle FullScreen

5. 全屏事件

看到这句代码你可能就懂了:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',fn);

当全屏状态改变时会触发上面的 fullscreenchange 事件,所以 #15 p2227 给我提出的问题就可以得到解决了。

 

文章可能还存在错误的地方,还请多多斧正!