Javascript 点击进入全屏

onclick go full screen

提问by David

I'm creating a web-app for the upcoming Chrome Web-store. Is there a way to simulate F11 being pressed? Or simply a command that will make the current window go full screen?

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

采纳答案by alex

It's possible with JavaScript.

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

回答by Zuul

I realize this is a very old question, and that the answers provided were adequate, since is active and I came across this by doing some research on fullscreen, I leave here one update to this topic:

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

There is a way to "simulate"the F11 key, but cannot be automated, the user actually needs to click a button for example, in order to trigger the full screen mode.

有一种方法来“模拟”的F11键，但不能自动的，用户实际需要点击例如按钮，以触发全屏模式。

• Toggle Fullscreen status on button click

  With this example, the user can switch to and from fullscreen mode by clicking a button:

  HTML element to act as trigger:

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

• Go to Fullscreen on button click

  This exampleallows you to enable full screen mode without making alternation, ie you switch to full screen but to return to the normal screen will have to use the F11 key:

  HTML element to act as trigger:

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

• 单击按钮时切换全屏状态

  在这个例子中，用户可以通过点击一个按钮来切换全屏模式：

  用作触发器的 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();  
      }  
    }  
  }
  

• 单击按钮转到全屏

  此示例允许您在不进行更改的情况下启用全屏模式，即您切换到全屏但要返回到正常屏幕必须使用 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}");
      }
    }
  }
  

---

---

Sources found along with useful information on this subject:

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

Mozilla Developer Network

Mozilla 开发者网络

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

如何在 Javascript 中制作全屏窗口（在整个屏幕上拉伸）

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

如何通过 JavaScript 使用 F11 键事件使浏览器全屏

Chrome Fullscreen API

Chrome 全屏 API

jQuery fullscreen event plugin, version 0.2.0

jQuery 全屏事件插件，版本 0.2.0

jquery-fullscreen-plugin

jquery-全屏插件

回答by Aaron Thoma

Short personal bookmarklet version

简短的个人书签版本

javascript: document.body.webkitRequestFullScreen(); 

go fullscreen← You can drag this link to your bookmark bar to create the bookmarklet, but you have to edit its URL afterwards: Delete everything before javascript, including the single slash: http://delete_me/javascript:[…]

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

This works for me in Google Chrome. You have to test whether it works in your environment and otherwise use a different wording of the function call, e.g. javascript:document.body.requestFullScreen();– see the other answers for the possible variants.

这在 Google Chrome 中对我有用。您必须测试它是否在您的环境中工作，否则使用函数调用的不同措辞，例如javascript:document.body.requestFullScreen();- 请参阅其他答案以了解可能的变体。

_{Based on the answers by @Zuul and @default – thanks!}

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

回答by default

If you want to switch the whole tab to fullscreen (just like F11 keypress) document.documentElementis the element you are looking for:

如果您想将整个选项卡切换到全屏（就像 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();
    }
}

回答by Lawrence Dol

I tried other answers on this question, and there are mistakes with the different browser APIs, particularly Fullscreenvs FullScreen. Here is my code that works with the major browsers (as of Q1 2019) and should continue to work as they standardize.

我在这个问题上尝试了其他答案，不同的浏览器 API 存在错误，特别是Fullscreenvs 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.");                                          }
    }

回答by KM?n

Here are a couple of ways to do that:

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

• The JavaScript Source: Navigation: Full Screen Window
• Javascript to open a full screen window

• JavaScript 源代码：导航：全屏窗口
• Javascript打开全屏窗口

I'd suggest, provide a popup asking the user if s/he wants to go full screen and then call this javascript accordingly.

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

回答by Udit mehra

so simple try this

这么简单试试这个

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

回答by Ruchi Sharma

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

回答by m b k

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.