如何使用 JavaScript 使访问者的浏览器以适用于 IE、Firefox 和 Opera 的方式全屏显示？
如何使用 Javascript 使窗口全屏显示（在整个屏幕上拉伸）
IT技术
javascript
fullscreen
2021-01-09 06:49:31
6个回答
在 Chrome 15、Firefox 10、Safari 5.1、IE 10 等较新的浏览器中，这是可能的。根据浏览器设置，旧版 IE 也可以通过 ActiveX 使用。
这是如何做到的：
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
用户显然需要首先接受全屏请求，并且不可能在页面加载时自动触发，它需要由用户触发（例如按钮）
阅读更多：https : //developer.mozilla.org/en/DOM/Using_full-screen_mode
此代码还包括如何为 Internet Explorer 9 和可能的旧版本以及最新版本的 Google Chrome 启用全屏。接受的答案也可用于其他浏览器。
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
资料来源：
- Chrome 全屏 API（但是请注意，
requestFullscreen“仅在”“[m] 大多数 UIEvents 和 MouseEvents，例如单击和按键按下等”期间有效，“因此不能被恶意使用”。） - 如何通过 JavaScript 使用 F11 键事件使浏览器全屏
这是在 JavaScript 中尽可能接近全屏：
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
这是进入和退出全屏模式（又名取消、退出、退出）的完整解决方案
function cancelFullScreen() {
var el = document;
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
if (requestMethod) { // cancel 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}");
}
}
}
function requestFullScreen(el) {
// 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}");
}
}
return false
}
function toggleFullScreen(el) {
if (!el) {
el = document.body; // Make the body go full screen.
}
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen();
} else {
requestFullScreen(el);
}
return false;
}