方法一:该方法是从一个网上的效果看到不错,然后自己就拿来下来实验了一下,还是比较满意度,下面直接给出代码
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>全屏</title> <script type="text/javascript"> (function(a, b) { "use strict"; var c = function() { var a = [["requestFullscreen", "exitFullscreen", "fullscreenchange", "fullscreen", "fullscreenElement"], ["webkitRequestFullScreen", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitIsFullScreen", "webkitCurrentFullScreenElement"], ["mozRequestFullScreen", "mozCancelFullScreen", "mozfullscreenchange", "mozFullScreen", "mozFullScreenElement"]]; for (var c = 0, d = a.length; c < d; c++) { var e = a[c]; if (e[1] in b) return e } } (); if (!c) return a.screenfull = !1; var d = "ALLOW_KEYBOARD_INPUT" in Element, e = { init: function() { return b.addEventListener(c[2], function(a) { e.isFullscreen = b[c[3]], e.element = b[c[4]], e.onchange(a) }), this }, isFullscreen: b[c[3]], element: b[c[4]], request: function(a) { a = a || b.documentElement, a[c[0]](d && Element.ALLOW_KEYBOARD_INPUT), b.isFullscreen || a[c[0]](); //alert("dd"); }, exit: function() { b[c[1]]() }, toggle: function(a) { this.isFullscreen ? this.exit() : this.request(a) }, onchange: function() {} }; a.screenfull = e.init() })(window, document) </script> </head> <body> <div id="loading" style="margin:10px auto;width:600px">正在加载...</div> <div id="theEnd"></div> <script type="text/javascript"> function ck() { screenfull && screenfull.request(); }; // 在这里写你的代码... var loading = document.getElementById('loading'); loading.style.cursor = 'pointer'; loading.innerHTML = '点击开始'; loading.onclick = ck </script> </body> </html>
上面的代码很简单,功能主要是在head中的script脚本代码---并且是经过我格式化后的代码,在body中的代码只是去调用。
说明:没有实验成功在页面打开的时候就直接全屏,不知道为什么必须要绑定到某个对象的onclick事件上来调用?
下面的是最开始未格式化的代码,应该是压缩过的
<script type="text/javascript"> (function(a,b){"use strict";var c=function(){var a=[["requestFullscreen","exitFullscreen","fullscreenchange","fullscreen","fullscreenElement"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitfullscreenchange","webkitIsFullScreen","webkitCurrentFullScreenElement"],["mozRequestFullScreen","mozCancelFullScreen","mozfullscreenchange","mozFullScreen","mozFullScreenElement"]];for(var c=0,d=a.length;c<d;c++){var e=a[c];if(e[1]in b)return e}}();if(!c)return a.screenfull=!1;var d="ALLOW_KEYBOARD_INPUT"in Element,e={init:function(){return b.addEventListener(c[2],function(a){e.isFullscreen=b[c[3]],e.element=b[c[4]],e.onchange(a)}),this},isFullscreen:b[c[3]],element:b[c[4]],request:function(a){a=a||b.documentElement,a[c[0]](d&&Element.ALLOW_KEYBOARD_INPUT),b.isFullscreen||a[c[0]]()},exit:function(){b[c[1]]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(){}};a.screenfull=e.init()})(window,document) </script>
具体怎么用,你就自己斟酌使用
================================================================================
方法二:
这个方法和方法一很类似,也是我从网上找来的,用来一下效果也还不错。
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;height:600px;width:700px;"> <button id="btn">js控制页面的全屏展示和退出全屏显示</button> <div id="content" style="margin:0 auto;height:500px;width:700px; background:#900;" > <h1 id="h1">js控制页面的全屏展示和退出全屏显示</h1> <button id="btn" οnclick="exitFull()">js控制页面的退出全屏显示</button> </div> </div> </body> <script language="JavaScript"> document.getElementById("btn").οnclick=function(){ var elem = document.getElementById("content"); var h1 = document.getElementById("h1"); requestFullScreen(elem);// 某个页面元素 //requestFullScreen(document.documentElement);// 整个网页 }; function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } //退出全屏 判断浏览器种类 function exitFull() { // 判断各种浏览器,找到正确的方法 var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </html>
说明:没有实验成功在页面打开的时候就直接全屏,不知道为什么必须要绑定到某个对象的onclick事件上来调用?
参考出处:
http://www.jb51.net/article/61940.htm
http://www.jb51.net/article/47038.htm
http://www.2cto.com/kf/201410/346205.html
================================================================================
方法三:这个方法有点牵强,我感觉其实就是指的最大化,你自己可以试试代码,并且我都做了一些说明
<!DOCTYPE html> <html> <HEAD> <title>实现浏览器真正全屏的JS代码 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript"> //ps:这是实现屏幕最大化 方法一 function openwin_max(url){ var scrWidth=screen.availWidth; var scrHeight=screen.availHeight; var self=window.open(url,"PowerBOS","resizable=1"); self.moveTo(-4,-4); self.resizeTo(scrWidth+9,scrHeight+9); } // ps:这是实现窗口最大化 方法二 function openwin_full(url) { var scrWidth=screen.availWidth; var scrHeight=screen.availHeight; var opt='top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,fullscreen=1'; var self = window.open(url, "aaaa", opt); //var self=window.open(url,"PowerBOS","resizable=1"); self.moveTo(0,0); self.resizeTo(scrWidth,scrHeight); } </script> <script> window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); window.outerWidth=screen.availWidth; window.outerHeight=screen.availHeight; //这是实现屏幕最大化! 方法三 function fullScreen(){ var opt='top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'; //window.open(document.location, 'aaa', 'fullscreen') window.open(document.location, "aaa", opt); } </script> </head> <body> <input type="BUTTON" value="全屏显示一" onClick="openwin_max(document.location)"> <br /> <input type="BUTTON" value="全屏显示二" onClick="openwin_max(document.location)"> <br /> <input type="BUTTON" value="全屏显示三" onClick="fullScreen()">
<p style="font-size:16px; text-indent:2em; ">这个网页特代码实现了浏览器的最大化完全全屏</p> <p style="font-size:16px; text-indent:2em; font-weight:bold; margin-top:30px;"> 关闭方法: 按键盘 alt+f4 不过对于火狐浏览器不能完全全仍然显示地址栏和关闭按钮。 </p> <p style="font-size:16px; text-indent:2em; font-weight:bold; margin-top:30px;">O(∩_∩)O哈哈~</p> </body> </HTML>
网上有很多人说要将第三中方式的方法写到body的onload事件中可以实现页面在载人的时候就显示最大化 :如<body οnlοad="fullScreen();">
我测试下来是有点问题的:
①:window.open(document.location, '', 'fullscreen')在该方法的第二个参数如果为空,在body的onload事件中是一个open指定页面的死循环的调用打开,也就是说会无限制的打开一个新的窗口,你可以自己测试,注意你的任务管理器的性能选项卡中CPU的变化。
②:如果给出window.open方法的第二个参数,例如:window.open(document.location, 'aaa', 'fullscreen'),则在body的onload事件中调用的的时候也是死循环,只是都是同一个页面窗口而已,你可以自己测试,注意你的任务管理器的性能选项卡中CPU的变化。
以上出现的问题,希望有兴趣的朋友自己研究下,并告诉我最好的解决方案
参考出处:
http://blog.sina.com.cn/s/blog_4f8f56850100c0ig.html
http://fluagen.blog.51cto.com/146595/186101
http://www.51xuediannao.com/js/texiao/IEquanping.html
================================================================================