如何使用JavaScript以一种适用于IE,Firefox和Opera的方式使访问者的浏览器全屏显示?
在较新的浏览器中,例如Chrome 15,Firefox 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);
用户显然需要首先接受全屏请求,并且不可能在页面加载时自动触发,它需要由用户触发(例如,按钮)
阅读更多: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 Fullscreen API(但请注意,
requestFullscreen
"只能在"[m] ost UIEvents和MouseEvents中使用,例如点击和键盘等),"因此不能恶意使用".)
如何通过JavaScript使用F11键事件使浏览器全屏显示
这与JavaScript中的全屏一样接近:
这是进入和退出全屏模式的完整解决方案(也就是取消,退出,退出)
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提供了一种使用用户整个屏幕呈现Web内容的简便方法.本文提供有关使用此API的信息.
我用过这个......
Open In Full Screen
全新的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
简单的例子来自:http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
创建功能
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中