案例是通過一張圖片展示，通過兩個按鈕來確定是否全屏顯示，一個按鈕來確定是否處於全屏狀態，對主流瀏覽器都支持。
代碼實例如下：
通過判斷使用的瀏覽器進行選擇選用什么瀏覽器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img src="../image/1.jpg"/>
<input type="button" id="full" value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
</div>
<script>
window.onload = function () {
var div = document.querySelector("div");
document.querySelector("#full").onclick = function () {
//使用Chrome瀏覽器需要加上webkit
// div.webkitRequestFullScreen();
// div.requestFullscreen();
//使用FireFox瀏覽器需要加上moz
// div.mozRequestFullScreen();
// 所有瀏覽器都可以全屏，使用能力測試
if (div.requestFullscreen) {
div.requestFullscreen();
} else if (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen();
} else if (div.mozRequestFullScreen) {
div.mozRequestFullScreen();
} else if (div.msRequestFullScreen) {
div.msRequestFullScreen();
}
}
// 退出全屏,只能使用document實現
document.querySelector("#cancelFull").onclick = function () {
if (document.cancelFullscreen) {
document.cancelFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msCancelFullScreen) {
document.msCancelFullScreen();
}
}
//是否是全屏狀態 也是使用document
document.querySelector("#isFull").onclick = function () {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
alert(true);
} else {
alert(false);
}
}
}
</script>
</body>
</html>