如何使用Javascript使窗口全屏（在屏幕上伸展）
Posted
技术标签:
【中文标题】如何使用Javascript使窗口全屏（在屏幕上伸展）【英文标题】：How to make the window full screen with Javascript (stretching all over the screen) 【发布时间】：2010-11-10 15:18:56 【问题描述】：如何使用 javascript 让访问者的浏览器全屏显示，以与 IE、Firefox 和 Opera 兼容？
【问题讨论】：
它的内部应用程序，不为公众。我不会虐待任何人 您可以务实地询问用户：sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
我很好奇 youtube 全屏是如何工作的。有人知道答案吗？
这是由 Flash 播放器而不是浏览器完成的
查看最新技术概览：hacks.mozilla.org/2012/01/…
【参考方案1】：
在 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
【讨论】：
目前在 Chrome 15、Firefox 10 和 Safari 5.1 中可用。有关当前播放状态的详细信息，请参阅此hacks.mozilla.org blog post。 太棒了，有什么方法可以退出全屏？ 一些事情。在 IE 中，这显然会忽略元素并全屏显示所有内容。如果您确实想全屏显示document.documentElement 中的所有内容，这将确保您获得正确的根元素（'html' 或'body'）。并且使用可以使用cancelFullscreen()来关闭它（或者IE再次发送'F11'）。
它只能由用户触发（例如通过全屏按钮）。无法在加载期间自动全屏。
IE 的拼写错误，应为 msRequestFullScreen，如文档 msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx【参考方案2】：
此代码还包括如何为 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 Fullscreen API（但请注意，requestFullscreen "只在" "[m]ost UIEvents and MouseEvents, 例如click and keydown等", "所以不能被恶意使用".)
How to make browser full screen using F11 key event through JavaScript
【讨论】：
在 IE 8 以上，FF10 以上工作（在 FF 9 中试过，它不起作用），在 Chrome 18 上测试 @Peter O.“应该放在一个事件处理程序中”，有什么方法可以在加载时触发它？ @FrancisP：不； “load”和“DOMContentLoaded”都不是适用于 Fullscreen API 的 UIEvent 或 MouseEvent。 感谢“（但请注意，requestFullScreen“仅在”“[m]ost UIEvents 和 MouseEvents，例如 click 和 keydown 等”期间有效，“所以它不能被恶意使用” .)" 是的documentElement 对我来说比 body 好。【参考方案3】：
这是尽可能接近 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>
【讨论】：
查看 haim evgi 发布的链接中的链接/接受的答案......您不应该能够调整浏览器的大小。但是，您可以在浏览器窗口中最大化（我的阅读方式） 取决于您在选项中的 javascript 权限设置。您可以切换 js 对窗口功能的控制。 上次网站使用这样的代码时发生了这种情况，我没有阻止它：dorward.me.uk/tmp/fullscreen.jpeg 看看 webkit-fullscreen API：bleeding-edge-tlv.appspot.com/#28（来自#gdd2011） 这是旧的。在下面寻找解决方案！【参考方案4】：这是进入和退出全屏模式（也就是取消、退出、退出）的完整解决方案
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;
【讨论】：
msIsFullScreen 呢？
规格已更改。 webkitCancelFullScreen 现在是 webkitExitFullscreen。 generatedcontent.org/post/70347573294/…
这个逻辑和操作的第一部分是多余的，应该删除document.fullScreenElement && document.fullScreenElement !== null
将toggleFull()中的elem从document.body更改为document.documentElement以修复左右边距问题【参考方案5】：
您可以使用The fullscreen API 可以看an example here
全屏 API 提供了一种简单的方式来显示 Web 内容 使用用户的整个屏幕呈现。本文提供 有关使用此 API 的信息。
【讨论】：
【参考方案6】：新的 html5 技术 - 全屏 API 为我们提供了一种简单的方法 以全屏模式呈现网页内容。我们即将给予 您有关全屏模式的详细信息。只是尝试 想象一下您可以使用它获得的所有可能的优势 技术——全屏相册、视频，甚至游戏。
但在我们描述这项新技术之前，我必须指出，这项技术是实验性的，并且所有主要浏览器都支持。
你可以在这里找到完整的教程：http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
这里是工作演示： http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
【讨论】：
@Ian 它在 IE 边缘工作。旧版 IE 不支持此功能。【参考方案7】：简单示例来自：http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id)
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen)
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
else if (element.webkitRequestFullScreen)
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
// Hooray, now we're in fullscreen mode!
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
【讨论】：
【参考方案8】：我用过这个……
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL)
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
// End -->
</script>
</head>
<body>
<h1 style="text-align: center;">
Open In Full Screen
</h1>
<div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>
【讨论】：
window.open(theURL, '', 'fullscreen=yes', 'scrollbars=auto');此行存在括号问题 那是来自父母的。当窗口已经打开时没有帮助。【参考方案9】：创建函数
function toggleFullScreen()
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen))
$scope.topMenuData.showSmall = true;
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
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen)
document.cancelFullScreen();
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if (document.webkitCancelFullScreen)
document.webkitCancelFullScreen();
在 Html 中放入类似代码
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>
【讨论】：
if 语句似乎没有在 IE 11 的全屏模式下检测到这一点（因此不会关闭）。【参考方案10】：试试screenfull.js。这是一个不错的跨浏览器解决方案，应该也适用于 Opera 浏览器。
用于跨浏览器使用 JavaScript Fullscreen API 的简单包装器，可让您将页面或任何元素全屏显示。消除浏览器实现差异，因此您不必这样做。
Demo.
【讨论】：
【参考方案11】：幸运的是，对于毫无戒心的网络用户来说，仅使用 javascript 无法做到这一点。您需要编写特定于浏览器的插件，如果它们尚不存在，然后以某种方式让人们下载它们。您可以获得的最接近的是没有工具或导航栏的最大化窗口，但用户仍然可以看到网址。
window.open('@987654321@', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
这通常被认为是不好的做法，因为它会从用户那里删除很多浏览器功能。
【讨论】：
【参考方案12】：现在全屏 API 更加普及并且似乎正在成熟，为什么不试试Screenfull.js？我昨天第一次使用它，今天我们的应用程序在（几乎）所有浏览器中都实现了全屏显示！
请务必将其与 CSS 中的 :fullscreen 伪类结合使用。请参阅https://www.sitepoint.com/use-html5-full-screen-api/ 了解更多信息。
【讨论】：
惊人的小脚本。现在在我的网站 www.StarCommanderOnline.com 上使用它。谢谢！【参考方案13】：这个功能就像一个魅力
function toggle_full_screen()
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
if (document.documentElement.requestFullScreen)
document.documentElement.requestFullScreen();
else if (document.documentElement.mozRequestFullScreen) /* Firefox */
document.documentElement.mozRequestFullScreen();
else if (document.documentElement.webkitRequestFullScreen) /* Chrome, Safari & Opera */
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
else if (document.msRequestFullscreen) /* IE/Edge */
document.documentElement.msRequestFullscreen();
else
if (document.cancelFullScreen)
document.cancelFullScreen();
else if (document.mozCancelFullScreen) /* Firefox */
document.mozCancelFullScreen();
else if (document.webkitCancelFullScreen) /* Chrome, Safari and Opera */
document.webkitCancelFullScreen();
else if (document.msExitFullscreen) /* IE/Edge */
document.msExitFullscreen();
要使用它，只需调用：
toggle_full_screen();
【讨论】：
【参考方案14】：这可能支持
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>
【讨论】：
【参考方案15】：你能试试吗：
<script type="text/javascript">
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();
</script>
<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>【讨论】：
在 Ubuntu 上的 Chrome 76 中对我来说似乎失败了【参考方案16】：这可以全屏显示您的窗口
注意： 为此，您需要 Query from http://code.jquery.com/jquery-2.1.1.min.js
或者制作像这样的javascript链接。
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element)
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
function GoOutFullscreen()
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
function IsFullScreenCurrently()
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
$("#go-button").on('click', function()
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
);
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function()
if(IsFullScreenCurrently())
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
else
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
);</script>
【讨论】：
这似乎适用于大多数浏览器，似乎不适用于 ios 上的 Safari。您找到解决方法了吗？【参考方案17】：试试这个脚本
<script language="JavaScript">
function fullScreen(theURL)
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
</script>
要从脚本调用，请使用此代码，
window.fullScreen('fullscreen.jsp');
或者通过超链接使用这个
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>
【讨论】：
【参考方案18】：在 Firefox 10 中，您可以使用以下 javascript 使当前页面变为全屏（没有窗口镶边的真正全屏）：
window.fullScreen = true;
【讨论】：
“应该”这个词在软件中实在是太重了。在某些浏览器中，它是只读的。 Firefox 10 允许您设置它。【参考方案19】：如果您处于“信息亭”的情况下，进入全屏的问答方式是在浏览器窗口启动并运行后将 F11 输入到浏览器窗口。这不是很好的启动，用户可能能够在顶部戳触摸屏并获得半全屏视图，但喂 F11 可能会在紧要关头或只是为了开始一个项目。
【讨论】：
【参考方案20】：这是我对Full Screen 和Exit Full Screen 的完整解决方案（非常感谢上述塔楼回答的帮助）：
$(document).ready(function()
$.is_fs = false;
$.requestFullScreen = function(calr)
var element = document.body;
// 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");
$.is_fs = true;
$(calr).val('Exit Full Screen');
$.cancel_fs = function(calr)
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
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");
$(calr).val('Full Screen');
$.is_fs = false;
$.toggleFS = function(calr)
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
);
// 来电：
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
【讨论】：
【参考方案21】：function fs()plr.requestFullscreen();document.exitFullscreen(); 或 function fs()(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()
<!DOCTYPE html><html><head>
<style>
bodybackground:#000
#plrposition:relative;background:#fff;width:360px
#vdwidth:100%;background:grey
buttonwidth:48px;height:48px;border:0;background:grey
</style>
</head><body>
<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>
</body></html>
【讨论】：
【参考方案22】： <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var elem = document.getElementById("myvideo");
function openFullscreen()
if (elem.requestFullscreen)
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /* Safari */
elem.webkitRequestFullscreen();
else if (elem.msRequestFullscreen) /* IE11 */
elem.msRequestFullscreen();
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
</body>
</html>
来源：https://www.w3schools.com/howto/howto_js_fullscreen.asp
【讨论】：
以上是关于如何使用Javascript使窗口全屏（在屏幕上伸展）的主要内容，如果未能解决你的问题，请参考以下文章