requestFullscreen()とexitFullscreen()でフルスクリーンを制御する

Webページの特定のエリアのみをフルスクリーンで表示したい場合、Element#requestFullscreen()を使う。逆にフルスクリーンを終了するにはDocument#exitFullscreen()を使う。

また一部ブラウザではあるが、options引数でナビゲーションUIの表示やキーボードロックを有無を指定できる。

// フルスクリーンで表示する要素
const target = document.querySelector('#target')

try {
  await target.requestFullscreen({
    navigationUI: "hide",
    keyboardLock: "browser"
  })
} catch (err) {
  console.error(`フルスクリーンのリクエストに失敗: ${err.message}`)
}

// フルスクリーンを終了する
try {
  await document.exitFullscreen()
} catch (err) {
  console.error(`フルスクリーンの終了に失敗: ${err.message}`)
}

Options

navigationUI

フルスクリーンにしたときに、ブラウザのナビゲーション（URLバーやBackボタンなど）を表示するか指定する。 ただしJavaScriptからブラウザに要求するだけで、実際にナビゲーションUIを表示するかどうかはブラウザの実装に委ねられる。

• auto: ブラウザが必要に応じてナビゲーションUIを表示する（デフォルト）
• hide: ナビゲーションUIを常に非表示にする
• show: ナビゲーションUIを常に表示する

keyboardLock

フルスクリーンにしたときに、一部のキーボード操作をロックするか指定する。たとえば「ブラウザゲームにおいてESC押下でフルスクリーンを終了させたくない」などの用途で使われる。

• none: キーボードロックなし（デフォルト）
• browser: ブラウザやOSが使う特定のキーをロックする

ただし、執筆時点（2026年5月）ではFirefox 151でのみサポートされている。Chrome系はKeyboard Lock APIで対応が必要。

FirefoxでkeyboardLockオプションを指定するとフルスクリーン時に「Exit Full Screen (Press and hold esc)」と表示される。

デモ