由于我们的项目组是基于硬件进行的，所以一般的代码都会跑在这个硬件上面，就相当于是一个小的服务器，只不过会比服务器的配置低很多。所以在前几天接到了产品的一个需求就是在页面上实现一个终端输入窗口，可以让用户在页面上实现终端调试。
在接到这个需求的也是一个头俩个大，根本不知道如何下手，所以也只能四处求学，大多都是使用xterm.js，最后搞到前端应用程序中。然后再用websocket和后台建立连接，把页面输入的内容给到后台，再把后台运行之后返回的内容回显到页面上。期间也调研了3天左右，问题一大堆，直到有一天发呆时突然想到，浏览器是可以直接输入后台的服务地址进行调试的，于是一个大胆的想法出现了，直接在页面嵌套一个浏览器页面不就可以了。
<iframe style={{width:952,height:800}} src="http://192.168.101.107:7681"></iframe>
效果如图：
而嵌套页面就不得不用到标签。
iframe 是 HTML 中的一个标签，用于在当前 HTML 页面中嵌入另一个 HTML 页面。它可以将一个 HTML 页面嵌入到另一个 HTML 页面中的指定区域，从而实现在一个页面中显示另一个页面的效果。
iframe 的主要作用包括： 在一个网页中嵌入另一个网页，实现页面的复用和模块化。 加载外部网页，例如广告或嵌入其他网站的内容。 实现网页的分块加载，提高页面的性能和用户体验。 用于显示 PDF 文件、视频、音频等多媒体内容。
需要注意的是，iframe 也存在一些安全风险，例如可能被用于钓鱼攻击、点击劫持等攻击方式。因此，在使用 iframe 的时候需要注意安全性，并遵循相关的安全最佳实践。
如果有大佬使用xterm.js + react + ts手动实现了这一功能希望可以分享一下，上面也是我在使用xterm.js实现时出现的很多问题无法解决之后的投机取巧之举，希望可以帮助到大家。
