如何使JavaScript全屏幕（全屏幕伸展）
我怎样才能使访问者的浏览器全屏使用JavaScript，在IE，Firefox和Opera的方式？
这与您在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>
在新的浏览器，如Chrome 15，火狐10，Safari 5.1，IE 10这是可能的。 根据浏览器的设置，也可以通过ActiveX来访问较老的IE。
以下是如何做到这一点：
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);
用户显然需要首先接受全屏请求，并且不能在页面载入中自动触发，需要由用户（例如button）触发，
阅读更多： https ： //developer.mozilla.org/en/DOM/Using_full-screen_mode
此代码还包括如何为Internet Explorer 9启用全屏，可能还有旧版本，以及Google Chrome的最新版本。 接受的答案也可以用于其他浏览器。
var el = document.documentElement , rfs = // for newer Webkit and Firefox el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen ; if(typeof rfs!="undefined" && rfs){ rfs.call(el); } else if(typeof window.ActiveXObject!="undefined"){ // for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript!=null) { wscript.SendKeys("{F11}"); } }
资料来源：
- Chrome全屏API （但是，请注意，
requestFullScreen只能在“”UIEvents和MouseEvents，如click和keydown等“，”所以不能恶意使用“）。 - 如何通过JavaScript使用F11键事件使浏览器全屏
这是一个完整的解决scheme进出全屏模式（即取消，退出，逃生）
function cancelFullScreen(el) { var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen; 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 toggleFull() { var elem = document.body; // Make the body go full screen. var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen); if (isInFullScreen) { cancelFullScreen(document); } else { requestFullScreen(elem); } return false; }
你可以使用全屏API你可以在这里看到一个例子
全屏API为使用用户的整个屏幕显示网页内容提供了一个简单的方法。 本文提供了有关使用此API的信息。
新的html5技术 –全屏API使我们能够以全屏模式呈现网页内容。 我们即将向您提供有关全屏模式的详细信息。 试着想象一下，使用这种技术可以获得的所有优势 – 全屏相册，video甚至是游戏。
但是在我们描述这个新技术之前，我必须注意到这个技术是实验性的，并且受到所有主stream浏览器的支持 。
你可以在这里find完整的教程： 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
我用过这个…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> function fullScreen(theURL) { window.open(theURL, '', 'fullscreen=yes, scrollbars=auto'); } // End --> </script> </head> <body><h1 style="text-align: center;"> Open In Full Screen </h1><div style="text-align: center;"><br> <a href="javascript:void(0);" onclick="fullScreen('http://google.com');"> Open Full Screen Window </a> </div> </body> </html>
简单的例子： 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>
创build函数
function toggleFullScreen() { if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { $scope.topMenuData.showSmall = true; if (document.documentElement.requestFullScreen) { document.documentElement.requestFullScreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullScreen) { document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else { $scope.topMenuData.showSmall = false; if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } }
在Html Put Code中
<ul class="unstyled-list fg-white"> <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li> <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li> </ul>
现在全屏API已经越来越普及，似乎正在成熟，为什么不尝试Screenfull.js ？ 我昨天第一次使用它，今天我们的应用程序真正在全屏（几乎）所有的浏览器！
一定要将它与CSS中的:fullscreen伪类相结合。 有关更多信息，请参阅https://www.sitepoint.com/use-html5-full-screen-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>
幸运的是，对于毫无戒心的networking用户来说，这只能用javascript来完成。 你需要编写浏览器特定的插件（如果它们不存在的话），然后以某种方式让人们下载它们。 你可以得到最接近的是没有工具或导航栏的最大化的窗口，但用户仍然能够看到的url。
window.open(' http://www.web-page.com ', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
这通常被认为是不好的做法，因为它从用户中删除了很多浏览器function。
试试这个脚本
<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>
在Firefox 10中，您可以使用此javascript将当前页面变成全屏（实时全屏，无窗口镶边）：
window.fullScreen = true;
如果您处于“信息亭”状态，Q＆D全屏显示的方式是在浏览器窗口启动并运行后将F11提供给浏览器窗口。 这不是很漂亮的启动，用户可能会捅一个触摸屏在顶部，并获得半全屏视图，但喂F11可能会在一个捏或刚刚开始一个项目。
