Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • React

  • Vue

  • JavaScript文章

    • new命令原理
    • ES5面向对象
    • ES6面向对象
    • 多种数组去重性能对比
    • 几个高级的JS API
    • JS随机打乱数组
    • 判断是否为移动端浏览器
    • 防抖与节流函数
    • JS获取和修改url参数
    • 比typeof运算符更准确的类型判断
    • Navigator clipboard介绍使用
      • Javascript 语法错题集
      • ESM和CommonJS详解
      • ColorThief的介绍与使用
      • 三级目录

    • 学习笔记

    • openlayers

    • threejs

    • MapboxGL

    • 工具

    • 源码合集

    • 前端
    • JavaScript文章
    东流
    2024-05-21
    目录

    Navigator clipboard介绍使用

    # 概述

    Navigator.clipboard对象提供了系统剪贴板读写访问能力,用以取代document.execCommand(),后者存在一些问题,如浏览器兼容性不一致、安全性问题和缺乏语义化,W3C 已将其从规范中移除。

    所有 Clipboard API 方法都是异步的,并且返回一个Promise对象,在剪贴板访问完成后被兑现;如果剪贴板访问被拒绝,promise 对象会被拒绝。

    # 方法

    • read() : 从剪贴板读取数据,返回一个 promise 对象,在检索到数据后,promise 将兑现一个ClipboardItem对象的数组来提供剪切板数据

    • readText(): 从剪贴板读取文本数据,返回一个 promise 对象,在检索到文本后,promise 将兑现一个字符串

    • write():写入任意数据到操作系统的剪贴板中,这是一个异步操作

    • writeText(): 写入文本数据到操作系统的剪贴板中,待文本被完全写入剪贴板后,返回的 promise 将被兑现

    示例如下:

    navigator.clipboard.writeText(text).then(
      () => {
        ElMessage.success("复制文本成功");
      },
      (err) => {
        console.log("🚀 ~ copyText ~ err:", err);
      }
    );
    
    1
    2
    3
    4
    5
    6
    7
    8

    # 注意事项

    navigator.clipboard在 https 协议下才能使用,或者安全域下才能使用。

    安全域包括https,localhost、127.0.0.1、localhost:3000等。因此在使用前我们需要判断,同时也可以通过windows.isSecureContext属性来判断当前是否为安全域。

    编辑 (opens new window)
    上次更新: 2024/08/23, 06:30:20
    比typeof运算符更准确的类型判断
    Javascript 语法错题集

    ← 比typeof运算符更准确的类型判断 Javascript 语法错题集→

    最近更新
    01
    GeoJSON
    05-08
    02
    Circle
    04-15
    03
    CircleMarker
    04-15
    更多文章>
    Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式