如何 - 全屏
瞭解如何使用 JavaScript 建立全屏視窗。
全屏視窗
如何使用 JavaScript 將元素以全屏模式檢視。
點選按鈕以全屏模式開啟影片
全屏影片
要將元素設定為全屏，我們使用 element.requestFullscreen() 方法
示例
<script>
/* 獲取您希望以全屏模式顯示的元素（本例中為影片）： */
var elem = document.getElementById("myvideo");
/* 當 openFullscreen() 函式執行時，以全屏模式開啟影片。
請注意，我們必須為不同的瀏覽器包含字首，因為它們尚未支援 requestFullscreen 方法 */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
自己動手試一試 »
全屏文件
要將整個頁面設定為全屏，請使用 document.documentElement 而不是 document.getElementById("element")。在此示例中，我們還使用了一個關閉函式來關閉全屏
示例
<script>
/* 獲取 documentElement (<html>) 以全屏顯示頁面 */
var elem = document.documentElement;
/* 全屏檢視 */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
/* 關閉全屏 */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
您還可以使用 CSS 來設定頁面全屏模式下的樣式
示例
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* 標準語法 */
:fullscreen {
background-color: yellow;
}
自己動手試一試 »
相關頁面
HTML DOM 參考：requestFullscreen() 方法。
HTML DOM 參考：exitFullscreen() 方法。
HTML DOM 參考：documentElement 屬性。
