【问题标题】：onclick go full screen点击进入全屏
【发布时间】：2011-04-23 11:26:23
【问题描述】：

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

【问题讨论】：

可能重复：stackoverflow.com/questions/1125084/…
Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript的可能重复
How to make the window full screen with Javascript (stretching all over the screen)的可能重复

【解决方案1】：

如此简单试试这个

<div dir="ltr" style="text-align: left;" trbidi="on">
<!-- begin snippet: js hide: false console: true babel: null -->

【讨论】：

【解决方案2】：

我在这个问题上尝试了其他答案，但不同的浏览器 API 存在错误，特别是 Fullscreen 与 FullScreen。这是我的代码，它适用于主要浏览器（截至 2019 年第一季度），并且应该在它们标准化时继续工作。

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.");                                          }
    }

【讨论】：

【解决方案3】：

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.

【讨论】：

【解决方案4】：

个人小书签短版

javascript: document.body.webkitRequestFullScreen();

go fullscreen ← 您可以将此链接拖到书签栏以创建书签，但之后您必须编辑其 URL：删除javascript 之前的所有内容，包括单斜杠：~~http://delete_me/ s>javascript:[…]~~

这适用于我在谷歌浏览器中。您必须测试它是否在您的环境中工作，否则使用函数调用的不同措辞，例如javascript:document.body.requestFullScreen(); – 查看其他答案以了解可能的变体。

_{基于@Zuul 和@default 的回答——谢谢！}

【讨论】：

我发现我必须在 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:999999999999';return%20e%7D)(document.createElement('BUTTON'))) 并使用 void 避免将当前文档替换为函数的返回值。

【解决方案5】：

//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();

【讨论】：

【解决方案6】：

如果您想将整个选项卡切换到全屏（就像 F11 按键一样）document.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();
    }
}

【讨论】：

使用document.documentElement 和document.body 有区别吗（就像@Zuul 在上面的旧答案中所做的那样）？

【解决方案7】：

It's possible with JavaScript.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

【讨论】：

+1。我讨厌调整浏览器大小的网站/应用程序。如果我需要调整它的大小或全屏，我会自己做！
如果您更喜欢平滑各种浏览器实现，请尝试使用 Screenfull.js (sindresorhus.com/screenfull.js) - 它很管用！
页面加载时全屏显示。我能做些什么来防止这种情况发生？

【解决方案8】：

我意识到这是一个非常古老的问题，并且提供的答案是足够的，因为它是活跃的，我通过全屏进行一些研究时遇到了这个问题，我在这里留下一个关于这个主题的更新：

有办法“模拟” F11键，但不能自动化，用户实际上需要点击一个按钮例如，为了触发全屏模式。

点击按钮时切换全屏状态

With this example，用户可以通过点击按钮来切换全屏模式：

作为触发器的 HTML 元素：

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

JavaScript：

function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    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();  
    }  
  }  
}

点击按钮进入全屏

This example 让您无需切换即可启用全屏模式，即切换到全屏但返回正常屏幕必须使用 F11 键：

作为触发器的 HTML 元素：

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

JavaScript：

function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

找到的来源以及有关此主题的有用信息：

Mozilla Developer Network

How to make in Javascript full screen windows (stretching all over the screen)

How to make browser full screen using F11 key event through JavaScript

Chrome Fullscreen API

jQuery fullscreen event plugin, version 0.2.0

jquery-fullscreen-plugin

【讨论】：

@Zuul - 我参考了你对this question 的回答，但是我更新了 JS 代码以添加 IE 兼容性。
@Zuul 您的两个示例现在链接到托管 404 的保管箱
IE 特有的全屏方法是msRequestFullscreen 和msExitFullscreen（注意小写的s）
如何为仅限 Chrome（而非跨浏览器）修改此代码？
链接损坏 :(

【解决方案9】：

这里有几种方法可以做到这一点：

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

【讨论】：

meta.stackexchange.com/questions/225370/…
第一个链接坏了。