一种最简单的方式，就是动态改变你想要全屏显示的部件的style，例如position变成absolute，height和width都设置成窗口大小，并且把背景颜色改成全白（为了遮住页面上其余的元素）。这样网页上就只能看到你要突出的部件了，视觉上就等同于全屏。同时利用javascript监听键盘事件，一旦用户按了ESc退出键，就恢复原来的样子。部分代码如下：
fullScreenClick: function () {
$('.navbar-inner').fadeOut(100);
var maintable = document.getElementById("holder");
maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style.zIndex = 5;
maintable.style.height = $(window).height() + "px";
maintable.style.width = $(window).width() + "px";
maintable.style.left = 0 + "px";
maintable.style.top = 0 + "px";
maintable = document.getElementById("main");
maintable.style.height = "90%";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 + "px";
maintable.style.top = $(window).height() * 0.02 + "px";
resizePlots();
},
下面有一种方法不用自己按F11的：
<button id="btn" > full screen </button>
<div id="content" style="height:500px;width:500px;background:#fff">
<h1>欢迎微博互粉！</h1>
<h2>weibo.com/leavingseason</h2>
<p>相信音乐，相信五月天</p>
</div>
</body>
<script language="JavaScript">
document.getElementById("btn").onclick=function(){
var elem = document.getElementById("content");
requestFullScreen(elem);
};
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
还可以在代码里面退出全屏界面：
updated (2013/09/22)
很多时候，想在全屏切换的时候做一些自定义的事情。可以如下绑定事件：
