在最近的浏览器中将整个窗口设置为全屏答案

【问题标题】：Setting the whole window to be fullscreen in recent browsers在最近的浏览器中将整个窗口设置为全屏
【发布时间】：2012-02-18 00:34:41
【问题描述】：

我希望允许用户单击链接以使我的网页完全全屏，使用浏览器正在部署的 RequestFullScreen 功能。你可以看到页面here。正如here 建议的那样，我正在调用document.documentElement 的requestFullScreen 方法。代码如下所示：

var el = document.documentElement
    , rfs = el.requestFullScreen
         || el.webkitRequestFullScreen
         || el.mozRequestFullScreen
         || el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
}

问题是，这样做我得到了非常奇怪的工件，在我的情况下，背景大多是黑色的（如果你点击链接，你可以看到）。难道我做错了什么？在浏览器中手动设置全屏在我测试过的所有浏览器中都可以正常工作，这让我觉得 documentElement 可能在某种程度上不够包容。

换句话说：

似乎document.documentElement.mozRequestFullScreen 不像用户手动设置全屏那样做同样的事情。有什么不同？为什么这种差异会导致问题？

【问题讨论】：

标签： javascript firefox webkit fullscreen

【解决方案1】：

我检查了网站并感到困惑，代码看起来不错，但你可以试试这个http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

【讨论】：

嗨，谢谢，我看到了但没有使用它，因为它看起来最终会与我当前的代码完全相同，至少在 Firefox 和 Chrome 上，但我会还是试试吧。
试过了。正如我所怀疑的，它没有帮助。有趣的是我 $(window).requestFullScreen 和 $(document).requestFullScreen 都表现出同样的怪异效果。

【解决方案2】：

用这个函数搞定了。

// Launch full screen
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

Full article

【讨论】：