Facebook 的新全屏照片查看器是如何工作的？答案

【问题标题】：How does Facebooks new fullscreen photo viewer work?Facebook 的新全屏照片查看器是如何工作的？
【发布时间】：2012-03-22 19:02:22
【问题描述】：

我们习惯于全屏使用 youtube 等网站，但现在 Facebook 为其图片库提供此功能。 Facebook 正在做什么来允许全屏图像浏览，这似乎使用了普通的 hmtl 编码？

【问题讨论】：

所有反对票是怎么回事？我也很好奇这个事实。

标签： javascript html css facebook

【解决方案1】：

那是非标准的Fullscreen API。

理论上（来自我上面链接的页面链接的一篇文章）：

var elem = document.getElementById("myId");  
if (elem.requestFullScreen) {  
  elem.requestFullScreen();  
} else if (elem.mozRequestFullScreen) {  
  elem.mozRequestFullScreen();  
} else if (elem.webkitRequestFullScreen) {  
  elem.webkitRequestFullScreen();  
}

【讨论】：

【解决方案2】：

差不多就是这样..

这是一个实际的工作示例。所有html5..DOCUMENTATION

演示链接位于页面下方... DEMO

【讨论】：

【解决方案3】：

Johndyer 分享了一个plugin for jQuery，它可以与原生全屏 api 一起使用。它现在可以很好地与 Chrome/Firefox/Safari 配合使用，将来可能还会与 Internet Explorer 和 Opera 配合使用。

此外，some trick 使上面的 api 可以与当前版本的 Internet Explorer 一起使用。

Opera 目前不支持。

使用 API 很简单：

 <button onclick="fullScreenApi.requestFullScreen(document.documentElement)" />

Demo1 from Johndyer

Demo 2 that's limited working with Internet Explorer

https://github.com/sindresorhus/screenfull.js/ 是一个“跨浏览器”脚本（适用于能够使用全屏的浏览器）

【讨论】：