JavaScript 控制浏览器全屏展示

---

前言

浏览器全屏功能解释

---

一、全屏区分

1.浏览器有两种全屏模式，第一种为浏览器窗口行为 称为 视图全屏，在浏览器工具栏中 缩放 一栏
点击全屏按钮，或者按 F11 键（几乎所有软件都会支持的通用功能）。

2.浏览器 HTML 全屏模式，意思就是使浏览器 HTML Dom 铺满整个屏幕展示的全屏模式。

以上两种，由于安全策略原因，在非低版本 IE 浏览器中，都不支持使用脚本控制。
也就是说只能使用第二种 HTML Dom 控制全屏的方式

两种全屏属于两种模式，并行使用使视觉效果存在一些冲突，Firefox 浏览器比较明显。但并不属于 bug

---

二、HTML Dom 全屏模式

IE浏览器只兼容 IE11

展开全屏

使用 请求全屏的方法 requestFullscreen 实现

var el = document.documentElement;
// 兼容各个浏览器请求全屏方法
 ( el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen 
|| el.msRequestFullscreen).call(el);

使用 call 方法为了 把 this 指向回 el

还有 上诉方法中，除了前缀不一样，后面的 S 也有大小写区分，千万不要写错

---

退出全屏

使用退出全屏方法 exitFullscreen

// 兼容各个浏览器退出全屏方法
 ( document.exitFullscreen
|| document.msExitFullscreen
|| document.mozCancelFullScreen
|| document.webkitExitFullscreen).call(document);

使用 call 方法为了 把 this 指向回 document

还有 上诉方法中，除了前缀不一样，后面的 S 也有大小写区分，千万不要写错

---

三、兼容 IE 10 及 以下方式

使用 ActiveXObject 对象 触发 F11 按键

document.documentElement.onclick = function(){
	var wscript = new ActiveXObject("WScript.Shell");
	if (wscript!=null) {
	   wscript.SendKeys("{F11}");
	}
}

此方法对于现在的IE 浏览器默认设置并不支持，也受限于安全影响，想体验一下此方法的童鞋可以 点此处 查看如何修改 IE 配置，允许使用 ActiveXObject 对象。

下面 gif 图演示上面代码效果

DEMO

Demo 下载 地址 全屏演示Demo 下载

原本是想放一个在线版本的，由于在线工具使用iframe 嵌套
不容易直接实现，有兴趣可以去看看在线代码是怎么样的
想直接尝试效果，下载上面的Demo尝试

总结

为了解释完善，看了一堆资料，下面把看的资料贴出来，有兴趣的童鞋可以点进去瞅瞅。

1.https://stackoverflow.com/questions/1125084/how-to-make-the-window-full-screen-with-javascript-stretching-all-over-the-scre/7525760#7525760

2.https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/

3.https://gist.github.com/1710727