浏览器交互 | 十个或许对你有用的WEB API

发布日期: 2021-09-23

介绍

API 是 Application Programming Interface 的首字母缩写，它定义了多个软件架构层之间的交互。程序员可以在软件开发中使用 API 轻松执行一些复杂的任务。如果没有 API，程序员的生活会很劳累——想象一下每个功能都需要自己手写代码来实现，并且可能无法正确（例如安全）访问数据，还要去了解不必要的低级细节等。

现在我们来谈谈 Web API，它有许多非常有用的对象、属性和函数，这些可用来执行从访问 DOM 到管理音频、视频、图形等复杂的任务。

注意：Web API 只不过是使用普通 JavaScript 编写和公开的接口、函数、对象、属性。
然而，Web API 的使用不仅限于基于普通 JavaScript 的应用程序。将其配合React 或 Vue 等框架一起使用也非常简单。

如果你已经有了一些 Web 开发经验，那么你可能已经使用了多种Web API啦。下面有一些比较有名的 Web API 列表。

Canvas
Fetch (提供了网络请求对象的通用接口)
History
Geolocation (获取设备的地理位置)
DOM
Console
Drag & Drop API

十个或许对你有用的WEB API

一下代码例子可参考这个Github仓库，框架使用的是Vue

一、📺 Fullscreen API

Fullscreen API 可以让一个元素与其子元素全屏显示，并且同时隐藏其他内容。
不需要时可以退出全屏模式。
更多细节可参考MDN上的这个指南

这个全屏API应该是最通俗易懂易上手的了吧。

实际上，全屏 API 没有它自己的接口实现，而是提供了一些其他接口如在 Document 和 Element 接口中增加了一些方法，可用于允许打开关闭全屏模式。

1. 进入全屏模式，从而展示某个元素及其子元素

Element.requestFullscreen() 发出异步请求使元素进入全屏模式，要注意该元素是否被允许进入全局模式的哦。

2. 请求退出全屏模式

Document.exitFullscreen() 用于让当前文档退出全屏模式

备注: 如果一个元素A在请求进入全屏模式之前，已经存在其他元素处于全屏状态，当这个元素A退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

示例

HTML

<img src="../assets/logo.png" id="logo" />

JS

const elem = document.getElementById("logo");
if (elem.requestFullscreen) {
  elem.requestFullscreen(); // 请求从id为"logo"的元素进入全屏模式
}

二、📋 Clipboard Async API

复制、粘贴 API，每个CV程序猿的好伙伴!!

判断浏览器支持情况

if (navigator.clipboard // 剪贴板是否存在
     && navigator.clipboard.read // 剪贴板是否可读
     && navigator.clipboard.write) { // 剪贴板是否可写
   // 支持
} else {
   // 不支持
}

对剪贴板的读写

读操作 const text = await navigator.clipboard.readText();

写操作 await navigator.clipboard.writeText(copyText); // 将copyText的值写入剪贴板

示例

这个比较简单，直接上demo:

HTML

<input v-model="copy" />
<button @click="performCopy" id="copy">copy</button>
<br />
<input type="text" disabled v-model="paste" />

JS

// copy异步函数
async performCopy(event) {
  event.preventDefault()
  try {
    await navigator.clipboard.writeText(this.copy) // 将copyText的值写入剪贴板
    console.log(`${this.copy} copied to clipboard`)
  } catch (err) {
    console.error('Failed to copy: ', err)
  }
}

// paste异步函数
async performPaste(event) {
  event.preventDefault()
  try {
    const text = await navigator.clipboard.readText() // 从剪贴板读取上一次复制的值
    this.paste = text
    console.log('Pasted content: ', text)
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err)
  }
}