我正在为即将推出的 Chrome 网上商店创建一个网络应用程序。有没有办法模拟按下F11?或者只是一个让当前窗口全屏显示的命令?
点击进入全屏
IT技术
javascript
html
2021-02-11 05:56:54
6个回答
我意识到这是一个非常古老的问题,并且提供的答案已经足够了,因为它是活跃的,并且我通过对全屏进行了一些研究而遇到了这个问题,我在这里留下了对该主题的一个更新:
有一种方法来“模拟”的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}"); } } }
找到的来源以及有关此主题的有用信息:
如何在 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();
}
简短的个人书签版本
javascript: document.body.webkitRequestFullScreen();
转到全屏← 您可以将此链接拖到您的书签栏以创建书签,但之后您必须编辑其 URL:删除之前的所有内容javascript
,包括单斜杠:[...]http://delete_me/
javascript:
这在 Google Chrome 中对我有用。您必须测试它是否在您的环境中工作,否则使用函数调用的不同措辞,例如javascript:document.body.requestFullScreen();
- 请参阅其他答案以了解可能的变体。
基于@Zuul 和@default 的回答——谢谢!
如果您想将整个选项卡切换到全屏(就像 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();
}
}
我在这个问题上尝试了其他答案,不同的浏览器 API 存在错误,特别是Fullscreen
vs 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."); }
}