百度了下,用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来进行全屏预览。