A full-screen solution for Xterm.js

Xterms.js is a front-end component written in TypeScript, which can bring you a full range of terminal experience in the browser. The terminal function of VS Code is realized by using it, which feels the same as a real terminal.

Since it is running in a browser, the page generally contains other elements. Too many elements will occupy limited screen space and distract the user's attention. In some scenarios, there is a need for full-screen display. This article introduces a comprehensive full-screen implementation solution for readers' reference. You must have been tossing for a long time to find this article. When I wrote this article, in the components of vue3, because of some bizarre and unknown reasons, it took a long time to debug successfully.

The preparation of the basic environment is not long-winded, the content is simple, just look at the official documents.

The following is just a vue example for reference only:

 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// ... omitted here import { Terminal } from 'xterm' import { FitAddon } from
10'xterm-addon-fit'; import "xterm/css/xterm.css"; // ... omitted here

core logic

 1const term = new Terminal({
 2  cursorBlink: true,
 3  // Various configurations are omitted, there are a bunch of examples on the Internet.
 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. Press F11 for full screen
18document.addEventListener("keydown", (e) => {
19  if (e.key === "F11") {
20    toggleFullscreen();
21  }
22});
23
24// 2. Click the button for full screen, for readers' reference
25// document.getElementById("fullbtn").addEventListener("click", toggleFullscreen)
26
27// The credit of chatGPT is enough for the bottom layer. If you don't accept it, you can't accept it. The bottom line comes from here.
28function toggleFullscreen() {
29  const doc = window.document;
30  const docEl = doc.documentElement;
31
32  const requestFullScreen =
33    docEl.requestFullscreen ||
34    docEl.mozRequestFullScreen ||
35    docEl.webkitRequestFullScreen ||
36    docEl.msRequestFullscreen;
37  const cancelFullScreen =
38    doc.exitFullscreen ||
39    doc.mozCancelFullscreen ||
40    doc.webkitExitFullscreen ||
41    doc.msExitFullscreen;
42
43  if (
44    !doc.fullscreenElement &&
45    !doc.mozFullscreenElement &&
46    !doc.webkitFullscreenElement &&
47    !doc.msFullscreenElement
48  ) {
49    requestFullScreen.call(docEl);
50  } else {
51    cancelFullScreen.call(doc);
52  }
53}

In this example, the Terminal class is used to create a terminal object and render it to an element on the page. When the page is first loaded, the fitTerminal function is called to adapt the terminal object to the size of the parent element and adjust the scroll bar to the bottom. Then, use addEventListener to listen to the resize event, so that the terminal can adjust adaptively as the size of the parent element changes. In addition, the keydown event is also monitored, and the full screen is switched when the user presses the F11 key (you can also click the button to go full screen and bind it to a full screen button icon, refer to code note 2).

In the toggleFullscreen function, the W3C standard requestFullscreen and exitFullscreen APIs are used to achieve full-screen switching. This part is realized with the help of ChatGPT. I have to admire that even the W3C standard has been moved out. From this aspect, the human brain will never catch up. After all, the capacity is limited.