js模仿f11全屏_js页面全屏功能，相当于按F11_js教程,jquery教程,ES5教程,ES6教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！...

我爱模板网在做项目的时候，遇到一个问题，就是点击下面的按钮，让屏幕全屏起来。类似于F11：

百度了下，用javascript即可实现，效果几乎和F11类似，只有一个问题到现在没有解决，即，当body背景设置为半透明或者不设置的时候，全屏后背景为黑色，而F11全屏和不全屏背景色没有任何变化。当然，如果body的背景色设置为不透明的颜色，这个问题就没了。

首先第一步，定义两个全屏和退出全屏的函数：

function fullScreen(el) {

var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

wscript;

if(typeof rfs != "undefined" && rfs) {

rfs.call(el);

return;

}

if(typeof window.ActiveXObject != "undefined") {

wscript = new ActiveXObject("WScript.Shell");

if(wscript) {

wscript.SendKeys("{F11}");

}

}

}

function exitFullScreen(el) {

var el= document,

cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,

wscript;

if (typeof cfs != "undefined" && cfs) {

cfs.call(el);

return;

}

if (typeof window.ActiveXObject != "undefined") {

wscript = new ActiveXObject("WScript.Shell");

if (wscript != null) {

wscript.SendKeys("{F11}");

}

}

}

第二步：设置全屏的容器和全屏按钮，这个全屏的ID可以加在容器上，也可以加在body上：

全屏按钮

这里放的是你网站的内容。。。。。。。

退出全屏

第三步：给全屏按钮添加事件：

var btn = document.getElementById('btn');

var content = document.getElementById('content');

btn.onclick = function(){

fullScreen(content);

}

var quite = document.getElementById('quite');

quite.onclick = function(){

exitFullScreen();

}

以上代码不仅可以实现整个document全屏预览，还能实现特定的div来进行全屏预览。