Javascript 点击进入全屏

我正在为即将推出的Chrome网络商店创建一个web应用程序。有没有办法模拟F11被按下？或者只是一个命令，使当前窗口全屏显示？

---

以下是几种方法：

---

我建议，提供一个弹出窗口，询问用户是否想全屏显示，然后相应地调用此javascript。

我意识到这是一个非常古老的问题，提供的答案是足够的，因为它是活动的，我在全屏上做了一些研究后发现了这一点，我在这里对这个主题做了一个更新：

有一种方法可以“模拟”F11键，但不能自动执行，用户实际上需要单击按钮，例如，以触发全屏模式

• 在单击按钮时切换全屏状态 ，用户可以通过单击按钮切换全屏模式：
  要用作触发器的HTML元素：

  <input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
  

  <input type="button" value="click to go fullscreen" onclick="requestFullScreen()">
  

• 点击按钮进入全屏 允许您启用全屏模式而无需进行切换，即切换到全屏但要返回正常屏幕，必须使用F11键：
  要用作触发器的HTML元素：

  <input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
  

  <input type="button" value="click to go fullscreen" onclick="requestFullScreen()">
  

---

有关此主题的有用信息来源：

---

如果要将整个选项卡切换到全屏（就像F11按键）

文档。documentElement

是您要查找的元素：

function go_full_screen(){
    var elem = document.documentElement;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
}

简短个人书签版本 ← 您可以将此链接拖动到书签栏以创建bookmarklet，但之后必须编辑其URL：删除

javascript

之前的所有内容，包括单斜杠：

http://delete_me/

javascript:

[…]

这对我来说在谷歌浏览器上很有用。您必须测试它是否在您的环境中工作，或者在函数调用中使用不同的措辞，例如–有关可能的变体，请参阅其他答案

---

基于@Zuul和@default的答案–谢谢

我尝试了这个问题的其他答案，不同的浏览器API都有错误，尤其是

全屏

与

全屏

。以下是我在主要浏览器上使用的代码（从2019年第1季度开始），在标准化过程中应该继续使用

function fullScreenTgl() {
    let doc=document,elm=doc.documentElement;
    if      (elm.requestFullscreen      ) { (!doc.fullscreenElement   ? elm.requestFullscreen()       : doc.exitFullscreen()        ) }
    else if (elm.mozRequestFullScreen   ) { (!doc.mozFullScreen       ? elm.mozRequestFullScreen()    : doc.mozCancelFullScreen()   ) }
    else if (elm.msRequestFullscreen    ) { (!doc.msFullscreenElement ? elm.msRequestFullscreen()     : doc.msExitFullscreen()      ) }
    else if (elm.webkitRequestFullscreen) { (!doc.webkitIsFullscreen  ? elm.webkitRequestFullscreen() : doc.webkitCancelFullscreen()) }
    else                                  { console.log("Fullscreen support not detected.");                                          }
    }

这么简单 试试这个

+1。我讨厌调整浏览器大小的网站/应用程序。如果我需要调整大小或全屏，我会自己做！如果您希望平滑处理各种浏览器实现，请尝试Screenfull.js（）——它非常有用！它在页面加载时全屏显示。我能做些什么来防止呢？可能重复：@Zuul的可能重复-我引用了你的答案来回答，然而，我更新了JS代码以添加IE兼容性。@Zuul您的两个示例现在链接到dropbox hosted 404。IE特定的全屏方法是

msRequestFullscreen

和

msExitFullscreen

（注意小写的

s

），该代码如何仅针对Chrome进行修改（而不是跨浏览器）？链接断开：（使用

document.documentElement

和

document.body

（就像上面的@Zuul回答的那样）有什么区别吗？第一个链接断了。我发现我不得不在Firefox（移动和桌面）页面上添加一个触发器在安全限制内。我让按钮同时单击进入全屏和删除自身。

javascript:void%20document.body.appendChild（（e=%3E%7Be.onclick=（）=%3E%7Bdocument.documentElement.requestFullscreen（）；e.parentNode.removeChild（e）%7D；e.innerHTML='FULLSCREEN'；e.style='position:fixed；left:0；top:0；z-index:9999999999'；返回%20e%7D）（document.createElement（'BUTTON'））

并使用

void

避免用函数的返回值替换当前文档。

javascript: document.body.webkitRequestFullScreen(); 

//set height of html
$("html").css("height", screen.height);
//set width of html
$("html").css("width", screen.width);
//go to full screen mode
document.documentElement.webkitRequestFullscreen();

var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
      elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
  }
}
//Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.

function fullScreenTgl() {
    let doc=document,elm=doc.documentElement;
    if      (elm.requestFullscreen      ) { (!doc.fullscreenElement   ? elm.requestFullscreen()       : doc.exitFullscreen()        ) }
    else if (elm.mozRequestFullScreen   ) { (!doc.mozFullScreen       ? elm.mozRequestFullScreen()    : doc.mozCancelFullScreen()   ) }
    else if (elm.msRequestFullscreen    ) { (!doc.msFullscreenElement ? elm.msRequestFullscreen()     : doc.msExitFullscreen()      ) }
    else if (elm.webkitRequestFullscreen) { (!doc.webkitIsFullscreen  ? elm.webkitRequestFullscreen() : doc.webkitCancelFullscreen()) }
    else                                  { console.log("Fullscreen support not detected.");                                          }
    }