如果想要讓整個頁面或某個區塊變成全螢幕的形式,可以使用這個 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()