全屏在Safari中无法正常工作。

Question

在Chrome和其他浏览器中，全屏功能可以正常工作，但在Safari中无法正常工作。以下是我的代码：

var doc = window.document;
var docEl = document.getElementById("divId");      
//doc.documentElement;

var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement){
  requestFullScreen.call(docEl);
} else { 
  cancelFullScreen.call(doc);
}    

<div id="divId" style="width: 300px;height:60px" > FULL SCREEN </div>

- Gaurav

Answer 1

这是 Element.webkitRequestFullscreen，在 Fullscreen 中小写字母 s。
只有 Firefox 使用驼峰式大小写 FullScreen 来设置他们的供应商前缀版本，^{_{可能是为了让每个人的生活更难...}}

var requestFullScreen = docEl.requestFullscreen || docEl.webkitRequestFullscreen || docEl.mozRequestFullScreen ||  docEl.msRequestFullscreen;

由于 StackSnippets 的 iframe 不允许全屏，因此一切正常

- Kaiido

---

谢谢，但是不起作用。 - Gaurav

有一件事，您的js fiddle代码在Safari中也无法打开。 - Gaurav

@GuruduttSharma 哪个版本？对我来说在11上可以工作。 - Kaiido

我的电脑上Safari浏览器的版本是5.1.7。我的电脑操作系统是Windows 7。 - Gaurav

立即停止使用它！该软件最后更新于2015年，存在许多安全漏洞，这些漏洞永远不会得到修复。而且，它与最近的版本没有任何关系。如果您想在Safari上测试您的网站，请从macOS（无论是在虚拟机中还是实体机）上进行测试。 - Kaiido

好的，谢谢 @Kaiido - Gaurav

Answer 2

全屏API在iOS Safari中不受支持，在Safari中具有部分支持：更多信息请参见。

建议查看 Sindre 的跨浏览器包装器 ，screenfull.js，用于全屏API，至少查看源代码并获取当前项目所需内容。

如果您创建一个Web应用程序，供用户安装使用，请在此处了解有关某些元标记的更多信息，以指定在全屏模式下运行您的Web应用程序。

- user7637745

---

我正在使用AngularJS Web应用程序中的全屏功能。我已经尝试了screenfull.js（https://github.com/sindresorhus/screenfull.js）。同样的代码在Chrome中可以工作，但在Safari中无法工作。 - Gaurav

当在Safari中请求全屏时，您是否有任何错误消息？ - user7637745

是的，在控制台中有两个错误消息：file://platform.twitter.com/widgets.js 找不到该服务器上请求的URL。file://www.google-analytics.com/ga.js 找不到该服务器上请求的URL。 - Gaurav

我已经从代码中删除了这些文件，但在Safari浏览器中代码无法正常工作。我认为这可能是Safari浏览器配置问题。 - Gaurav