javascript - 在 Safari 中无法使用全屏 API

Question

我有使全屏效果的按钮。它适用于除 Safari 之外的所有浏览器。

我试过这段代码，但没有任何效果。 可能是什么问题？

document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

document.documentElement.webkitRequestFullScreen();

document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);

整个代码看起来像这样http://jsfiddle.net/8yryvoee/1/它在 jsfiled 中不起作用，但它在 React 项目中起作用

Answer 1

我目前正在寻求使 Safari 5.1 正确退出(无法测试原始退出在稍新版本上的工作时间，因为 OS X 带有更现代的版本)，但您可以尝试我的代码。我将在本周六连接我的 Mac(如果您在格林威治标准时间以东，我们的时区差异可能会超过 12 小时)，我会记下来更新我的代码/答案。

浏览器真的对你进入全屏的方式很挑剔，大多数情况下他们希望它从事件处理程序中产生，所以我已经包含了它。以下是纯 JavaScript 代码，因此不应有任何框架/库要求。你没有提到哪个版本的 Safari，我目前只能有效地测试几个。

function $(o) {var r = false; if (document.querySelectorAll) {r = document.querySelectorAll(o);} return r;}


function editor_fullscreen(e)
{
 e.preventDefault();

 if (document.fullscreen)
 {
  if (document.exitFullscreen) {document.exitFullscreen();}
  else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();}
  else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
  else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}
  else if (document.msExitFullscreen) {document.msExitFullscreen();}
 }
 else
 {
  if ($('.editor_fullscreen')[0].requestFullscreen) {$('.editor_fullscreen')[0].requestFullscreen();}
  else if ($('.editor_fullscreen')[0].mozRequestFullScreen) {$('.editor_fullscreen')[0].mozRequestFullScreen();}
  else if ($('.editor_fullscreen')[0].webkitRequestFullScreen) {$('.editor_fullscreen')[0].webkitRequestFullScreen();}
  else if ($('.editor_fullscreen')[0].msRequestFullscreen) {$('.editor_fullscreen')[0].msRequestFullscreen();}
  else if (e.target.msRequestFullScreen) {alert('e.targe.parent.parent.parent.parent....');}
  else {console.log('DEveloper: full screen support is not detected; check method letter casing?');}
 }
}


window.onclick = function(e)
{
 $('.fullscreen')[0].onclick = function(e) {editor_fullscreen(e);}
}