一種Xterm.js的全屏方案
Xterms.js是一個TypeScript編寫的前端組件，能在瀏覽器中帶給你全方位終端體驗， VS Code的終端功能就是使用的它實現，感覺就和真的終端一樣。
既然是在瀏覽器中運行，頁面中一般包含其它元素，過多的元素會佔用有限屏幕空間，分散用戶注意力。在部分場景下，有全屏展示的需求，本文介紹一種兜底的全屏實現方案，供讀者參考。你能搜到這個文章，一定是折騰了很久的，我寫這個文章的時候，在vue3的組件中，因爲一些離奇的未知原因，調試很久才成功。
基礎環境準備就不囉嗦了，內容簡單，看看官方文檔即可。
下面只是個vue示例，僅供參考:
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全屏
18document.addEventListener('keydown', (e) => {
19 if (e.key === 'F11') {
20 toggleFullscreen();
21 }
22});
23
24// 2. 點擊按鈕全屏, 供讀者參考
25// document.getElementById("fullbtn").addEventListener("click", toggleFullscreen)
26
27// chatGPT的功勞，夠底層，不服不行，兜底的底氣來自這裏。
28function toggleFullscreen() {
29 const doc = window.document;
30 const docEl = doc.documentElement;
31
32 const requestFullScreen =
33 docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
34 const cancelFullScreen =
35 doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
36
37 if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
38 requestFullScreen.call(docEl);
39 } else {
40 cancelFullScreen.call(doc);
41 }
42}
該示例中，使用了 Terminal 類創建了一個終端對象，並將其渲染到頁面上的某個元素中。在頁面初次加載時，調用了 fitTerminal 函數，將終端對象自適應父元素的大小，並將滾動條調整到底部。隨後，使用 addEventListener 監聽了 resize 事件，使得終端可以隨着父元素大小的變化而自適應調整。此外，還監聽了 keydown 事件，當用戶按下 F11 鍵時切換全屏(也可以點擊按鍵全屏，綁定到一個全屏按鈕圖標上，參考代碼註釋2)。
toggleFullscreen 函數中，使用了 W3C 標準的 requestFullscreen、exitFullscreen API 來實現全屏切換。這部分是ChatGPT幫忙實現的，不得不佩服，連W3C標準都搬出來了，從這方面來看人腦是永遠趕不上了，畢竟容量有限。
最後修改於： Monday, August 28, 2023
版權申明:
- 未標註來源的內容皆為原創，未經授權請勿轉載（因轉載後排版往往錯亂、內容不可控、無法持續更新等）;
- 非營利為目的，演繹本博客任何內容，請以'原文出處'或者'參考鏈接'等方式給出本站相關網頁地址(方便讀者)。