浏览器全屏的JS代码实现
方法一：该方法是从一个网上的效果看到不错，然后自己就拿来下来实验了一下，还是比较满意度，下面直接给出代码
<!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" onclick="exitFull()">js控制页面的退出全屏显示</button>
</div>
</div>
</body>
<script language="JavaScript"> document.getElementById("btn").onclick=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 onload="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
================================================================================
浏览器全屏的JS代码实现的更多相关文章
- 页面全屏显示JS代码
1.直接在页面加载时就全屏. <body onload="window.open(document.location,'big','fullscreen=yes'):window.cl ...
- 浏览器全屏之requestFullScreen全屏与F11全屏
一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...
- HTML5 JS 实现浏览器全屏(F11的效果)
项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- html5 js实现浏览器全屏
全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...
随机推荐
- 【原创】Hibernate自动生成（2）
本实战是博主初次学习Java,分析WCP源码时,学习HibernateTools部分的实战,由于初次接触,难免错误,仅供参考,希望批评指正. 开发环境: Eclipse Version: Photon ...
- 逻辑英语 第四季 Speaking and Listening
1. 发音的变革 背字典:牛津双解/朗文英汉 a. 如何一分钟变伦敦腔 发音有两种:伦敦腔/其他 生理分析: ① 后置发音:瞬间华丽变声第一步 东方人靠嘴巴发音: 西方人用胸腔发音[有共鸣] 方法1: ...
- 怎样查看电脑登录过的wifi密码?
https://jingyan.baidu.com/album/fcb5aff770f7e6edaa4a71d9.html?picindex=7
- python的协程和_IO操作
协程Coroutine: 协程看上去也是子程序,但执行过程中,在子程序内部可中断,然后转而执行别的子程序,在适当的时候再返回来接着执行. 注意,在一个子程序中中断,去执行其他子程序,不是函数调用,有点 ...
- visual studio2017 无法添加引用 未能加载包ReferenceManagerPackage not such interface support 解决方法
安装完visual studio 2017 后添加引用总是提示 未能加载包ReferenceManagerPackage, 这个问题困扰了两天,直到在网上看到了下面这一段 I just got thi ...
- Netty环境搭建 (源码死磕2)
[正文]netty源码 死磕2: 环境搭建 本小节目录 1. Netty为什么火得屌炸天? 1.1. Netty是什么? 1.2. Netty火到什么程度呢? 1.3. Netty为什么这么火? 2 ...
- 【python】-- web开发之JavaScript
JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...
- Python菜鸟之路：Python基础-类（2）——成员、成员修饰符、异常及其他
三大成员 在Python的面向对象中,主要包括三大成员:字段.方法.属性 字段 类成员的字段又可分为普通字段.静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同,代码示例如下: ...
- C语言之基本算法12—谁是冠军
/* ================================================================== 题目:甲乙丙丁四人猜A,B,C,D,E,F6个人谁是冠军,甲 ...
- zipfile.BadZipFile: File is not a zip file
zipfile.BadZipFile: File is not a zip file 出现这个问题一般是文件损坏的可能性比较大