Web API 整理

前言

该文章记录一些Web API知识，慢慢将会添加更多知识，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。Web API 主要用于 JavaScript，但也可能有例外。

一、 剪切板操作

1.新api

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

• 读取剪切板内容：navigator.clipboard.readText()

  //navigator.clipboard.readText()
  //解析系统剪贴板的文本内容返回一个Promise 
  document.querySelector('button').addEventListener('click', () => {
    navigator.clipboard.readText().then(res => {
      console.log(res) //输出剪切板文本内容
    })
  })
  

• 写入剪切板内容：navigator.clipboard.writeText(value)

  // navigator.clipboard.writeText(value)
  //解析系统剪贴板的文本内容返回一个Promise 
  document.querySelector('button').addEventListener('click', () => {
    navigator.clipboard.writeText('写入成功').then(res => {
      console.log(res)
    })
  })
  

• 写入图片等任意的数据到剪贴板:navigator.clipboard.writeText.write(value)

  function setClipboard(text) {
   let data = new DataTransfer();
  
   data.items.add("text/plain", text);
   navigator.clipboard.write(data).then(function() {
     /* success */
   }, function() {
     /* failure */
   });
  }
  

  代码创建了一个 DataTransfer 对象，要替换的内容存储在这里。执行 DataTransferItemList.add() (en-US) 将数据写入进去，然后执行 write() 方法，指定执行成功或错误的结果。

2.旧api

const copy = text => {
     const element = document.createElement("textarea")
     element.id = 'copyContent'
     element.textContent = text
     document.body.appendChild(element)
     document.getElementById("copyContent").select()
     document.execCommand("Copy")
     document.body.removeChild(document.getElementById("copyContent"))
}
document.querySelector('button').addEventListener('click', () => {
     copy('xxxxxxxxxxxxx')
})