如何使用JavaScript使访问者的浏览器全屏显示，同时兼容IE、Firefox和Opera?
当前回答
<!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 width="100%" 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
其他回答
如果你是在一个“售货亭”的情况下，一个进入全屏的Q&D方法是在浏览器窗口启动并运行后输入一个F11。这不是一个很好的开始，用户可能可以在顶部戳一个触摸屏，获得半全屏的视图，但在紧急情况下，或者只是为了开始一个项目，可以使用F11。
<!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 width="100%" 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
简单的例子: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>
既然全屏api越来越广泛，而且似乎越来越成熟，为什么不试试Screenfull.js呢?我昨天第一次使用它，今天我们的应用程序在(几乎)所有浏览器中真正全屏!
确保它与CSS中的:fullscreen伪类相结合。详见https://www.sitepoint.com/use-html5-full-screen-api/。
这是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>
