在网页中使一个元素全屏

Question

有没有办法让页面中的元素全屏显示？

例如，一个div或者一个img？

所谓“全屏”，就是它应该占据用户屏幕的所有空间，就像我们在全屏模式下观看视频一样。我不希望浏览器窗口的任务栏/菜单栏显示。

有什么好的想法吗？

  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;

    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    background-color:red
  }

我尝试了上面的代码，但它并不是我想要的，它只占据了浏览器内容区域的所有空间，而不是用户计算机屏幕的空间。

- hguser

---

不可能。除非用户将浏览器全屏显示。 - Felix Kling

可能是重复的问题：如何在Javascript中制作全屏窗口（覆盖整个屏幕）。 - Rob Allen

这不是重复的问题，他在这里要求仅针对小部分（如div）全屏显示，而不是整个页面。 - Sarin Jacob Sunny

Answer 1

有一个相对较新的全屏JavaScript API，可以使元素全屏显示。

必须在用户输入的结果下调用它，以防止可能的滥用，但使用起来相对简单：

_{来自MDN文章的代码：}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

- zzzzBov

Answer 2

HTML元素不能突破浏览器文档窗口的边界。菜单栏和工具栏位于文档窗口之外（文档窗口是浏览器窗口的子级），因此您无法“触及”它们。

我认为唯一的解决方案是使用JavaScript触发全屏模式。

以下答案展示了如何实现：如何使用JavaScript使窗口全屏（覆盖整个屏幕）

- Aaron Digulla

---

闪存能达到这个效果吗？我的意思是在页面中放置一个闪存？因为在一些视频网站上，比如YouTube，你可以选择全屏模式播放。 - hguser

实际上，我要尝试做的事情可以在这里找到：http://stackoverflow.com/questions/5192286/create-a-page-which-contain-a-flash-can-be-add-text-dynamiclly - hguser

是的，但那会完全隐藏浏览器窗口。你需要在 Flash 中进行显示（即不要在 HTML 中显示）。 - Aaron Digulla

谢谢，彻底隐藏浏览器窗口正是我想要的。有没有现成的例子？我以前从未开发过Flash。 - hguser

Answer 3

现在不可能实现，将来也很可能不会。

想象一下，如果每个你访问的网站都可以自由地接管你的桌面，会发生什么。

- Jon

---

每个安装的应用程序都可以自由地接管您的桌面...为什么不能给予Web应用程序同样的豁免权呢？ - zzzzBov

@zzzzBov：因为在第一种情况下，您已经明确决定安装该应用程序（很可能在安装过程中还授予了管理员权限），而在第二种情况下，您将面临各种驱动攻击的风险。显然，全屏浏览器窗口是一个选项，但即使这样，您也不会真正占据整个屏幕--只是分配给浏览器的部分。 - Jon

如果限制开发人员使用功能的方式，那么您就不会容易受到驱动攻击。 - zzzzBov

嗨@Jon。想象一下，如果你对网页设计的了解是永恒不变的法则会发生什么！你的“也许永远都不会”早就抛弃了2011年你既不了解也没有急于学习的那90%的CSS和JS。只要有需要...欢迎来到2023年。 - Ricardo

嗨@Jon。想象一下，如果你对网页设计的了解是不可改变的法则，会发生什么事情！你的“而且它可能永远不会改变”的说法将永远驱逐掉那些你在2011年既不了解，也不急于学习的90%的CSS和JS。当有问题时...欢迎来到2023年。 - undefined

Answer 4

为了实现这个目标，您可以使用screen.availWidth和screen.availHeight属性来获取屏幕大小。接下来，在js中将元素大小设置为它们对应的属性。

- Paxon Kymissis

---

screen.availWidth和availHeight确实返回用户屏幕/桌面上的可用空间，但它们不适用于设置网页布局和大小，因为它们完全独立于视口大小，并且脚本无法调整浏览器窗口大小。 - Dai

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

错过了重点。可用的宽度/高度全屏并不起作用。 - Ricardo

不明白重点。可用的宽度/高度全屏并不起作用。 - undefined