JS读写系统剪切板

·  阅读 279

项目需求

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

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

常规实现

先说常规实现:

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

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

image.png

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

image.png

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

完美实现

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

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

image.png

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

离上线仅一步之遥

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

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

分类:
前端