使用 jquery 为我的浏览器获取全屏模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13303151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting fullscreen mode to my browser using jquery
提问by deepthi
How can I enter full screen mode using just Javascript/JQuery code? The goal is to enter fullscreen mode like when you press F11 in the browser, but then programmatically.
如何仅使用 Javascript/JQuery 代码进入全屏模式？目标是进入全屏模式，就像在浏览器中按 F11 一样，然后以编程方式。
回答by Dinesh
You can activate full screen mode using vanilla JavaScript without jQuery.
您可以使用没有 jQuery 的 vanilla JavaScript 激活全屏模式。
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Test</title>
</head>
<body id="body">
<h1>test</h1>
<script>
var elem = document.getElementById("body");
elem.onclick = function() {
req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
req.call(elem);
}
</script>
</body>
</html>
One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action[1](e.g. on page load).
需要注意的重要一点是，您只能在用户执行操作（例如单击）时请求全屏模式。您不能在没有用户操作的情况下请求全屏模式[1]（例如在页面加载时）。
Here is a cross browser function to toggle full screen mode (as obtained from the MDN):
这是切换全屏模式的跨浏览器功能（从 MDN 获得）：
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
For more information, check out the MDN page on full screen APIs.
回答by Vivek S
Here's a working demo for making the browser full screen
这是一个使浏览器全屏的工作演示
回答by Buzz
You can use freely available jquery plugins for this purpose, check these- jquery full screen, Jquery full screen,jquery full screen
您可以使用免费提供的jQuery插件用于此目的，检查these- jQuery的全屏幕， jQuery的全屏幕，jQuery的全屏
回答by Scott
If you need a plugin that supports versions of IE prior to IE11 (IE8-10), take a look at jQuery.fullscreen. IE did not support this feature natively until IE11.
如果您需要一个支持 IE11 (IE8-10) 之前的 IE 版本的插件，请查看jQuery.fullscreen。IE 直到IE11才原生支持此功能。
回答by frazras
If you need JQuery to get ease of element selection, then you can do this:
如果您需要 JQuery 来轻松选择元素，那么您可以这样做：
var viewer = $("#parentid .classname .childelement")[0];
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen;
rFS.call(viewer);
回答by Dhiraj
The new html5 technology –fullscreen API gives us an easy way to present a web page content in full-screen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – full-screen photo albums, videos, and even games.
新的 html5 技术——全屏 API 为我们提供了一种以全屏模式呈现网页内容的简单方法。我们即将为您提供有关全屏模式的详细信息。试着想象一下使用这项技术可以获得的所有可能的优势——全屏相册、视频，甚至游戏。
But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.
但在我们描述这项新技术之前，我必须指出，这项技术是实验性的，所有主要浏览器都支持。
You can find the full tutorial here :http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
你可以在这里找到完整的教程：http : //www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Here is working Demo :http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
这是工作演示：http : //demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
回答by Shivprasad P
Please try below code
请尝试以下代码
var el = document.documentElement,
rfs = el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
rfs.call(el);
回答by Caner SAYGIN
This is an old question but maybe somebody could need this. I was looking for a solution for getting fullsreen mode for browser by jQuery and i've found this solution. I highly recommend Sindre Sorhus's screenfull.js plugin. Here you can get the file.
这是一个老问题，但也许有人可能需要这个。我正在寻找一种通过 jQuery 为浏览器获取 fullsreen 模式的解决方案，我找到了这个解决方案。我强烈推荐 Sindre Sorhus 的 screenfull.js 插件。在这里你可以得到文件。
https://github.com/sindresorhus/screenfull.js
https://github.com/sindresorhus/screenfull.js
There are also how tos and demos available in the page.
页面中还有可用的操作方法和演示。
回答by Shivprasad P
Try with window.resizeTo(x,y) method.
尝试使用 window.resizeTo(x,y) 方法。
var w = window.open('','', 'width=100,height=100');
w.resizeTo(w.screen.availHeight, w.screen.availWidth);
w.focus();
回答by Duy H?ng Androgyne Tenor
In case have a button or anything else, We can use this script :
如果有按钮或其他任何东西，我们可以使用这个脚本：
<script language="JavaScript">
function fullScreen() {
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}");
}
}
}
// End -->
With a button. Everything is easy by <a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
But How can I load that script on pageload. That's mean that webform will be fullscreen on pageload without any click on anything.
用一个按钮。一切都很简单<a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
但是我如何在页面加载时加载该脚本。这意味着 webform 将在页面加载时全屏显示，而无需单击任何内容。
