如果想要讓整個頁面或某個區塊變成全螢幕的形式,可以使用這個 HTML5 fullscreen API,使用方法也很簡單,只要像這樣去指定要變全螢幕的區塊再去呼叫 requestFullscreen() 就好了。
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
其中選擇範圍可以像這樣寫:
openFullscreen(document.documentElement); //整個網頁
openFullscreen(document.getElementById('id'); //指定元素
離開全螢幕模式可以使用 exitFullscreen()
function closeFullscreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
closeFullscreen()
但由於在全螢幕模式時只要按下 esc 就可以退出,所以不一定要使用 .exitFullscreen()