项目场景:

本文主要介绍的是 复制粘贴文本文字 功能的实现 

主要应用的是 Clipboard.writeText方法


代码描述

Clipboard 接口的 writeText() 方法用于将特定的字符串写入到操作系统的剪贴板中。这个方法会返回一个 Promise,一旦剪贴板的内容被更新,Promise 就会被解析。如果调用者没有写入剪贴板的权限,则 Promise 会被拒绝。

需要注意的是,由于安全性和隐私性的原因,这个方法在非安全上下文(如 HTTP 页面)中可能无法使用。同时,用户需要明确授权网站访问剪贴板,否则此方法也会失败。

此外,由于 navigator.clipboard.writeText() 是异步的,因此需要使用 Promise 来处理其结果。如果复制成功,Promise 会被解析;如果复制失败(例如,由于用户拒绝了权限或由于其他错误),Promise 会被拒绝,并传递一个错误对象。大部分浏览器支持该方法,但并非所有浏览器支持,使用前最好检查下兼容问题。

  copyBtn () {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(this.AnswerText.response)
          .then(() => {
            this.$message.success('复制成功')
          }).catch(err => {  
          // 处理错误,比如用户拒绝了剪贴板权限  
           console.error('无法复制文本: ', err);  
     });
      } else {
        const textarea = document.createElement('textarea')
        textarea.value = this.AnswerText.response
        document.body.appendChild(textarea)
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)
        this.$message.success('复制成功')
        this.isCopied = true
      }
    }

使用遇到的问题:

  1. HTTP协议下的不可用性:浏览器禁用了非安全域的 navigator.clipboard 对象。安全域包括本地访问(如 127.0.0.1 或 localhost)以及开启TLS安全认证的地址,如HTTPS协议的地址。如果网站使用HTTP协议而不是HTTPS,则无法使用此功能。
  2. Safari浏览器的限制:在Safari浏览器中,如果在一个Promise后使用 navigator.clipboard.writeText,可能会报一个没有权限的错误(Unhandled Rejection (NotAllowedError))。这可能是因为用户代理或平台在当前上下文中不允许该请求,可能是因为用户拒绝了权限。
  3. 用户权限:在使用 navigator.clipboard.writeText 之前,需要明确获得用户的许可。如果用户没有授权或拒绝了权限请求,则无法将文本写入剪贴板。
  4. 跨域限制:如果页面试图跨域访问剪贴板,可能会遇到安全问题。因此,需要确保页面在相同的源(即相同的协议、主机和端口)上运行。
  5. 浏览器兼容性:虽然现代浏览器大多支持 navigator.clipboard.writeText,但并非所有浏览器都支持。因此,在使用此功能之前,最好检查目标浏览器的兼容性。
  6. 错误处理:当使用 navigator.clipboard.writeText 时,应该添加适当的错误处理代码,以捕获和处理可能出现的任何错误。

采取措施: 

  • 确保网站使用HTTPS协议。
  • 在调用 navigator.clipboard.writeText 之前,检查用户是否已授权访问剪贴板。
  • 避免在Promise后直接使用 navigator.clipboard.writeText,尤其是在Safari浏览器中。
  • 在使用此功能之前,检查目标浏览器的兼容性。
  • 添加适当的错误处理代码以捕获和处理可能出现的错误。
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐