如何使用JavaScript使访问者的浏览器全屏显示，同时兼容IE、Firefox和Opera?
当前回答
函数f () {plr.requestFullscreen (); document.exitFullscreen ()};plr.requestFullscreen():document.exitFullscreen()}
<!DOCTYPE html><html><head>
<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width: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>
其他回答
既然全屏api越来越广泛，而且似乎越来越成熟，为什么不试试Screenfull.js呢?我昨天第一次使用它，今天我们的应用程序在(几乎)所有浏览器中真正全屏!
确保它与CSS中的:fullscreen伪类相结合。详见https://www.sitepoint.com/use-html5-full-screen-api/。
这里有一个完整的解决方案，以进入和退出全屏模式(即取消，退出，退出)
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;
}
这个函数非常好用
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();
新的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
在较新的浏览器中，如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
