JavaScript实现页面元素全屏显示的两种方案与兼容处理

CSS样式模拟全屏方案

实现元素全屏显示的一种简易方法是动态修改目标部件的CSS样式。具体操作是将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();
},

然而，这种CSS模拟方式存在一个明显缺点：它无法触发浏览器的真正全屏模式，用户仍需手动按下F11键才能实现完整的全屏体验。

HTML5 Fullscreen API及IE兼容处理

下面介绍一种无需手动按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>

该方案支持大多数现代浏览器。但对于不支持HTML5全屏API的旧版IE浏览器，代码通过创建WScript.Shell对象并调用SendKeys("{F11}")来模拟按下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()函数中的自定义操作。