Xterm.js の全画面ソリューション

 1<template>
 2  <div v-if="loading">loading...</div>
 3  <div v-if="error">failed to fetch</div>
 4  <div>
 5    <div id="terminal"></div>
 6  </div>
 7</template>
 8
 9// ... ここでは省略
10import { Terminal } from 'xterm';
11import { FitAddon } from 'xterm-addon-fit';
12import "xterm/css/xterm.css";
13// ... ここでは省略

 1const term = new Terminal({
 2    cursorBlink: true,
 3    // さまざまな設定は省略されていますが、インターネット上にサンプルがたくさんあります。
 4});
 5
 6term.loadAddon(fitAddon)
 7function fitTerminal() {
 8    fitAddon.fit();
 9    term.scrollToBottom();
10}
11
12term.open(document.getElementById('terminal'));
13fitTerminal();
14
15window.addEventListener('resize', fitTerminal);
16
17// 1. F11 を押して全画面表示にします
18
19document.addEventListener('keydown', (e) => {
20    if (e.key === 'F11') {
21        toggleFullscreen();
22    }
23});
24
25// 2. ボタンをクリックすると、読者の参照用に全画面表示になります。
26// document.getElementById("fullbtn").addEventListener("click", toggleFullscreen)
27
28// 最下位レベルは、chatGPT のクレジットだけで十分です。受け入れられない場合は受け入れられません。自信はここから来ます。
29function toggleFullscreen() {
30    const doc = window.document;
31    const docEl = doc.documentElement;
32
33    const requestFullScreen =
34        docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
35    const cancelFullScreen =
36        doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
37
38    if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
39        requestFullScreen.call(docEl);
40    } else {
41        cancelFullScreen.call(doc);
42    }
43}