logo标签列表

点击进入全屏模式

javascripthtml
62
我正在为即将推出的Chrome Web商店创建一个Web应用程序。有没有一种方式来模拟按下F11？或者只是一个命令，可以使当前窗口全屏显示？
我正在为即将推出的Chrome Web商店创建一个Web应用程序。是否有一种方法可以模拟按下F11？或者只需一个命令即可使当前窗口全屏显示？
可能是重复问题：https://dev59.com/8nNA5IYBdhLWcg3wBo5m - Anderson Green
可能是通过JavaScript将窗口设置为全屏（真正的全屏；F11功能）的重复问题。 - Jamie Barker
可能是[如何使用Javascript使窗口全屏（覆盖整个屏幕）]的重复问题(https://dev59.com/8nNA5IYBdhLWcg3wBo5m)。 - Shawn J. Molloy
9个回答
145

我意识到这是一个非常古老的问题，并且提供的答案已经足够了。由于这个问题仍然活跃，而我正在研究全屏模式，所以在这里我给出一个更新：

有一种方法可以“模拟”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}");
    }
  }
}

在这个主题中发现的有用信息来源：

Mozilla 开发者网络文档

如何使用JavaScript创建全屏窗口（覆盖整个屏幕）

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

Chrome 全屏 API

jQuery 全屏事件插件，版本 0.2.0

jquery-fullscreen-plugin

1
@Zuul - 我参考了你的答案来回答这个问题，但是我更新了JS代码以添加IE兼容性。 - Jamie Barker
3
你的两个示例现在链接到Dropbox托管的404错误页面。 - jnowland
1
IE特定的全屏方法是msRequestFullscreen和msExitFullscreen（注意小写s）。 - RevanProdigalKnight
1
链接失效了 :( - JBis
很确定第一个测试应该是 if (!document.fullScreenElement && !document.mozFullScreen && !document.webkitIsFullScreen) {。 - Lawrence Dol
显示剩余4条评论
57

可以使用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();
}
10
我讨厌网站/应用自动调整我的浏览器大小。如果我需要调整大小或全屏，我会自己去做！ - Azz
2
如果您喜欢平滑处理各种浏览器实现，请尝试使用Screenfull.js（https://sindresorhus.com/screenfull.js/）-它非常好用！ - simonhamp
1
它在页面加载时全屏存在。我该怎么做才能防止这种情况发生？ - Arash Ghasemi Rad
我尝试过用它来处理视频，它可以正常工作，但是我似乎无法让它处理其他文件，比如gltf。你有任何想法为什么会发生这种情况吗？ - TheQuantumMan
6

简短个人书签脚本

javascript: document.body.webkitRequestFullScreen();

进入全屏模式 ← 你可以将此链接拖动到书签栏中创建书签，但是之后你需要编辑它的URL：删除http://delete_me/及其后面的单斜杠，只保留javascript:[…]

这个方法在Google Chrome中适用。你需要测试它是否适用于你的环境，并使用其他函数调用的不同措辞，例如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 避免替换当前文档与函数返回值。 - Walf
5

如果你想将整个选项卡切换到全屏模式（就像按下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在上面的旧答案中所做的那样）？ - Aaron Thoma
2

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

最初的回答：

我尝试了其他答案，但发现不同浏览器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.");                                          }
    }
1
https://meta.stackexchange.com/questions/225370/your-answer-is-in-another-castle-when-is-an-answer-not-an-answer - T.J. Crowder
第一个链接已经失效。 - Brad Ahrens
0
//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();
0

非常简单，试试这个

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

0
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.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接