一種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 標準的 requestFullscreenexitFullscreen API 來實現全屏切換。這部分是ChatGPT幫忙實現的,不得不佩服,連W3C標準都搬出來了,從這方面來看人腦是永遠趕不上了,畢竟容量有限。

最後修改於: Monday, August 28, 2023

相關文章:

翻譯: