JavaScript 控制浏览器全屏展示 前言一、全屏区分二、HTML Dom 全屏模式展开全屏退出全屏 三、兼容 IE 10 及 以下方式DEMO总结
前言
浏览器全屏功能解释
一、全屏区分
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 下载
原本是想放一个在线版本的，由于在线工具使用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