要想讓頁面的某個元素全屏顯示，就像在網頁上看視頻的時候，可以全屏觀看一樣，該怎么實現呢？
一種最簡單的方式，就是動態改變你想要全屏顯示的部件的style，例如position變成absolute，height和width都設置成窗口大小，並且把背景顏色改成全白（為了遮住頁面上其余的元素）。這樣網頁上就只能看到你要突出的部件了，視覺上就等同於全屏。同時利用javascript監聽鍵盤事件，一旦用戶按了ESc退出鍵，就恢復原來的樣子。部分代碼如下：
document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 27) { //ESC鍵 $('.navbar-inner').fadeIn(100); var maintable = document.getElementById("holder"); maintable.style.position = "relative"; maintable.style.height = "100%"; maintable.style.width = "100%"; maintable = document.getElementById("main"); maintable.style.height = "100%"; maintable.style.width = "100%"; maintable.style.left = 0 + "px"; maintable.style.top = 0 + "px"; resizePlots(); } };
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來達到真正的全屏。
下面有一種方法不用自己按F11的：
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body > <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>
這個可以支持大部分的瀏覽器。但是討厭的IE還是不能支持HTML5的全屏功能，需要模擬按F11這個動作。讀者可以在代碼中看到。
還可以在代碼里面退出全屏界面：
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
關於全屏顯示，我還是很好奇，那么視頻網站是如何做到對IE等瀏覽器都兼容的全屏功能的。如果有誰知道的話，還請分享一下，感激不盡。
updated (2013/09/22)
很多時候，想在全屏切換的時候做一些自定義的事情。可以如下綁定事件：
document.addEventListener("fullscreenchange", function () {
doit();
}, false);
document.addEventListener("mozfullscreenchange", function () {
doit();
}, false);
document.addEventListener("webkitfullscreenchange", function () {
doit();
}, false);
它會在每次進入或者退出全屏的時候，觸發doit（）操作。
另外，有篇博客寫的很不錯：http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/