如何使用JavaScript使访问者的浏览器全屏显示,同时兼容IE、Firefox和Opera?
当前回答
新的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
其他回答
这可能支持
<%@ 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>
screenfull.js试试。这是一个很好的跨浏览器解决方案,应该也适用于Opera浏览器。
JavaScript全屏API跨浏览器使用的简单包装器,它允许您将页面或任何元素显示为全屏。消除了浏览器实现的差异,所以您不必这样做。
演示。
试试这个脚本
<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>
如果你是在一个“售货亭”的情况下,一个进入全屏的Q&D方法是在浏览器窗口启动并运行后输入一个F11。这不是一个很好的开始,用户可能可以在顶部戳一个触摸屏,获得半全屏的视图,但在紧急情况下,或者只是为了开始一个项目,可以使用F11。
以下是我对全屏和退出全屏的完整解决方案(非常感谢上面塔的回答):
$(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);" />