JS读写系统剪切板

项目需求

来说说最近做过的一个项目，一个游戏项目，需求是实现游戏内外的复制粘贴，即:

1. 游戏内复制游戏内粘贴
2. 游戏内复制游戏外粘贴
3. 游戏外复制游戏内粘贴

常规实现

先说常规实现:

1. 游戏内部的复制粘贴还是比较好实现的，因为整个游戏过程就是一直在监听键盘操作，当服务端监听到复制<Ctrl+C>粘贴<Ctrl+V>动作的时候，会根据相应的动作执行相应的操作，貌似可以实现

2. 游戏外复制游戏内粘贴，就是在游戏外执行了复制<Ctrl+C>，在游戏内去执行粘贴<Ctrl+V>时，通过指定通道，把系统剪切板内容，即我们要粘贴的内容>发送到游戏服务端，貌似也可以实现

3. 游戏内复制游戏外粘贴，需要我们在游戏内执行了复制<Ctrl+C>动作之后，立刻去修改系统剪切板内容，服务端要把我们在游戏内复制的内容，通过数据通道，发送到客户端，客户端接收到这个内容以后，替换掉系统剪切板内容，然后就可以实现在游戏外粘贴游戏内复制的内容。但这个就麻烦了，它的常规实现，要求我们执行复制动作的瞬间，或者在我们执行复制动作之前就得拿到我们要复制的内容，但常规情况下我们只能在监听到copy或者paste的时候才能拿到系统剪切板的相关内容，并且是我们执行了复制动作以后，一段时间，服务端才会通过数据通道把我们复制的内容发送到我们客户端，哪怕这个一段时间是N毫秒，它也是不满足我们修改系统剪切板内容的时机，不能实现

至此，尚未进行交叉实现，如果交叉实现，问题可能更多

完美实现

后来经高人指点，在mdn上找到专门的 clipboard API ，可以获取或者修改系统剪切板数据<mdn才是我们前端的百科全书>，此后开挂，一路高歌，爽到爆炸。

游戏内复制游戏内粘贴可以实现，游戏外复制游戏内粘贴也可以实现，并且可以交叉实现都不会出现问题，剩下游戏内复制游戏外粘贴，可以在拿到复制内容以后再去修改系统剪切板内容，也可以实现了

但是这个有一个权限问题，即每次打开页面，都会提示是否允许获取系统剪切板读写权限，如果用户选择了否，也一样不能实现以上需求

离上线仅一步之遥

线下自测时就遇到一个问题，我通过webpack起的服务，项目地址是自己的本机 ip:port ，系统剪切板直接不给权限，连询问都不询问，直接给禁用了，也不能修改。但是在 localhost 域名下就是可以的，有读写权限，直接给我整懵了，这是为什么？后来经过多方查证资料，发现是浏览器厂商的规定，Clipboard API 只支持 https协议和 localhsot 环境，至于 http协议，正在被淹没在历史的洪流中，以后会有很多的限制。

对了对了，目前测试发现，此方法在chrome浏览器，Edge浏览器都没有问题，但是 firefox浏览器不行，https也不行，它直接不给你选择的机会，应该也是为了用户的信息安全吧!!!