在Safari中不使用FullScreen 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);}
}