如何使用JavaScript使访问者的浏览器全屏显示,同时兼容IE、Firefox和Opera?
当前回答
你能试试吗:
<script type="text/javascript"> function go_full_screen(){ var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } } </script> <a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>
其他回答
这个函数非常好用
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();
幸运的是,对于毫无戒心的网络用户来说,这不能用javascript完成。你需要编写特定于浏览器的插件,如果它们还不存在的话,然后以某种方式让人们下载它们。你能得到的最接近的是一个最大化的窗口,没有工具或导航栏,但用户仍然能够看到url。
窗口.open(“http://www.wege.com”,“标题”,“类型”=fullWindow, fullscreen, scrollbars=yes);“>
这通常被认为是不好的做法,因为它从用户那里删除了很多浏览器功能。
这是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>
screenfull.js试试。这是一个很好的跨浏览器解决方案,应该也适用于Opera浏览器。
JavaScript全屏API跨浏览器使用的简单包装器,它允许您将页面或任何元素显示为全屏。消除了浏览器实现的差异,所以您不必这样做。
演示。
这可能支持
<%@ 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>