下面是完整的例子，暫不做分析
<!DOCTYPE html>
<html>
<head>
<title> FullScreen API 演示</title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="http://davidwalsh.name/more-html5-apis">
<script>
// 處理全屏(需要全屏顯示DOM元素)
function launchFullScreen(element) {
// 先檢測最標准的方法
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
// 其次，檢測Mozilla的方法
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
// if 檢測 webkit的API
element.webkitRequestFullScreen();
}
};
// 退出全屏,不用管具體是哪個元素，因為屏幕是唯一的。
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
};
// 顯示全屏信息
function dumpFullscreen() {
var d = document;
var fullE = null;
var fullEnable = "fullScreen is disable!";
if(d.fullScreenElement){
fullE = d.fullScreenElement;
} else if(d.mozFullScreenElement){
// 如果有問題，把mozFullscreenElement 改為 mozFullScreenElement,S大寫
fullE = d.mozFullScreenElement;
} else if(d.webkitFullscreenElement){
// 本人的為chrome， Fullscreen 之中，s為小寫。
fullE = d.webkitFullscreenElement;
}
// 如果有問題，請切換 fullScreen 中 s 的大小寫。
if(d.fullScreenEnabled){
fullEnable = d.fullScreenEnabled;
} else if(d.mozFullScreenEnabled){
fullEnable = d.mozFullScreenEnabled;
} else if(d.webkitFullscreenEnabled){
// 注意 Fullscreen 的中間s大小寫
fullEnable = d.webkitFullscreenEnabled;
}
//
if(window.console){
console.dir(fullE);
} else if(fullE){
alert(fullE.tagName);
} else {
alert("全屏元素是:"+fullE);
}
//
if(window.console){
console.info("允許全屏:"+fullEnable);
} else if(fullEnable){
alert("允許全屏:"+fullEnable);
} else {
alert("允許全屏:"+fullEnable);
}
};
// 設置事件監聽，DOM內容加載完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// 獲取DOM元素
var enterfull = document.getElementById("enterfull");
var quitfull = document.getElementById("quitfull");
var dumpfull = document.getElementById("dumpfull");
// 事件監聽
enterfull.addEventListener("click", function() {
//
launchFullScreen(document.documentElement);
});
quitfull.addEventListener("click", function() {
//
cancelFullscreen();
});
dumpfull.addEventListener("click", function() {
//
dumpFullscreen();
});
}, false);
// 全屏事件Events
document.addEventListener("fullscreenchange", function(e) {
console.dir(e);
});
document.addEventListener("mozfullscreenchange", function(e) {
console.dir(e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
console.dir(e);
});
</script>
</head>
<body>
<div>
<button id="enterfull">進入全屏</button><br/>
<button id="quitfull">退出全屏</button><br/>
<button id="dumpfull"> 查看全屏的DOM元素</button><br/>
</div>
</body>
</html>