如何使用JavaScript使访问者的浏览器全屏显示,同时兼容IE、Firefox和Opera?
当前回答
在较新的浏览器中,如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
其他回答
这可能支持
<%@ 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>
在较新的浏览器中,如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
您可以使用全屏API 你可以在这里看到一个例子
全屏API为web内容提供了一种简单的方式 使用用户的整个屏幕呈现。本文提供了 有关使用此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;
}
既然全屏api越来越广泛,而且似乎越来越成熟,为什么不试试Screenfull.js呢?我昨天第一次使用它,今天我们的应用程序在(几乎)所有浏览器中真正全屏!
确保它与CSS中的:fullscreen伪类相结合。详见https://www.sitepoint.com/use-html5-full-screen-api/。