Facebooks新的全屏照片查看器是如何工作的

How does Facebooks new fullscreen photo viewer work?

本文关键字：何工作 工作 照片 Facebooks      更新时间：2023-09-26

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

这是非标准的全屏API。

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

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

这或多或少是…

下面是一个实际的工作示例。。所有html5..文档

演示链接在页面下方一点点。。。演示

Johndyer共享了一个jQuery插件，该插件可与本机全屏api一起使用。它现在可以很好地与Chrome/Firefox/Safari配合使用，将来可能还会与Internet Explorer和Opera配合使用。

Furthur，有一些技巧可以使上面的api与当前版本的InternetExplorer一起工作。

Opera当前不支持。

使用API很容易：

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

Johndyer 的Demo1

使用Internet Explorer 时受到限制的演示2

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

相关文章：