Xterm 不适用于 Bootstrap 导航选项卡答案

【问题标题】：Xterm not working with Bootstrap Nav TabsXterm 不适用于 Bootstrap 导航选项卡
【发布时间】：2020-03-09 11:59:29
【问题描述】：

我正在尝试让 xterm 在我的电子单页应用程序中工作。我的问题是 xterm 的 div 元素在另一个选项卡中，在启动/初始化时不可见。如果应用程序启动并且我单击 xterm div 元素的导航选项卡，它只是一个没有任何输出的小黑框。

如果我在不加载 bootstrap.css 的情况下启动我的应用程序，它可以工作，并且我可以在 xterm div 元素中看到我的输出。但问题是没有任何引导功能。

我该如何解决这个问题？

【问题讨论】：

标签： bootstrap-4 electron xtermjs

【解决方案1】：

我找到了解决问题的方法。我的应用程序启动后，我不会直接初始化 xterm。我会等到用户点击带有终端的“Nav Tab”，然后在它之后初始化xterm。

$('a[data-toggle="tab"]').on('shown.bs.tab', (e) => {
    if (/#MyTabID/gi.test(e.target.href) && this.MySshObjRef === null) {
        this.initMySshObj()
    }
})

【讨论】：