一种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
版权申明:
- 未标注来源的内容全部为原创，未经授权请勿转载（因转载后排版往往错乱、内容不可控、无法持续更新等）;
- 非营利为目的，演绎本博客任何内容，请以'原文出处'或者'参考链接'等方式给出本站相关网页地址(方便读者)。