使用js读取剪切板内容的问题记录，开发环境可以，部署到线上之后无效，navigator.clipboard.readtext() 和 document.execCommand(‘paste‘)都不行

在工作中基于Guacamole.js做了H5图形网关，在Web浏览器中实现远程桌面和VNC连接。

 但是基于guacamole客户端是无法直接实现复制粘贴的功能的，复制还可以通过js代码去实现，但是粘贴功能无法实现，因为浏览器的安全策略，只有安全域名下，才能读取剪切板的内容。安全域包括本地访问与开启TLS安全认证的地址，如 https 协议的地址、127.0.0.1 或 localhost 。所以才会出现开发的时候可以读取剪切板的内容，部署上线了之后却不行，大概率是因为线上的环境是http协议的。

 这时候如果想实现粘贴的功能，就有两个方向：1、将环境的协议换成https的。2、利用文本框去监听paste事件，获取到剪切板的值。

 1、将环境的协议换成https的，浏览器会弹窗提醒，需要允许后，可以成功读取

 2、利用文本框去实现粘贴，这种也不是直接粘贴，多一道操作（Apache Guacamole官方也是用这种方法实现的）

 但是在看了jumpserver的demo后，发现竟然可以直接使用ctrl+c、ctrl+v

 在仔细翻看源码和查看网页元素之后发现，jumpserver是利用xterm.js实现的

https://demo.jumpserver.org/luna/

Xterm.js

 `xterm.js` 是一个用于在Web浏览器中实现终端仿真的JavaScript库。它允许您在网页中创建一个类似于命令行终端的界面，可以执行命令、显示输出并与用户进行交互。

        `xterm.js` 提供了一种简单而强大的方式来在Web应用程序中集成终端功能。它支持常见的终端特性，如颜色、字体样式、光标控制和键盘输入。您可以使用它来构建各种类型的应用程序，包括基于Web的SSH客户端、远程服务器管理工具、终端编辑器等。

`xterm.js` 的优点包括：

        1. 轻量级：它是一个轻量级的库，加载速度快，并且在各种浏览器中运行良好。
        2. 可定制性：您可以自定义终端的外观和行为，包括颜色、字体、光标样式等。
        3. 跨平台：它可以在各种操作系统和设备上运行，包括桌面电脑、移动设备和嵌入式系统。
        4. 易于集成：`xterm.js` 提供了简单的API和事件处理机制，使您可以轻松地将终端功能集成到现有的Web应用程序中。

        您可以通过 `xterm.js` 创建一个终端仿真界面，并使用JavaScript代码来控制终端的行为和输出。它还提供了与终端交互的方法，例如发送命令、接收输出和处理用户输入。

        总之，`xterm.js` 是一个功能强大且易于使用的JavaScript库，适用于构建基于Web的终端应用程序。

但是xterm.js是怎么实现直接ctrl + c、ctrl + v复制粘贴的呢？所以我看了源码，有如下发现：

 

 xterm是利用textarea实现的直接粘贴的功能，并且我去页面中验证了一下，调大textarea的透明度之后，页面的确显示了文本框。

 最后，不得不感慨，xterm.js这种写法真的妙啊，感兴趣的同学可以去看一下xterm.js的代码。https://github.com/xtermjs/xterm.js

 如果帮助到您了，可以留下一个赞👍告诉我