js页面全屏功能，相当于按F11

我爱模板网在做项目的时候，遇到一个问题，就是点击下面的按钮，让屏幕全屏起来。类似于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上：

<button id='btn'>全屏按钮</button>  
<div id="content" style="background:yellow;width:500px;height:500px;">
    这里放的是你网站的内容。。。。。。。
    <div id="quite" class="btn">退出全屏</div>  
</div>  

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

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来进行全屏预览。