九旬的博客

学会这些 Web API 使你的开发效率翻倍

随着浏览器的日益壮大，浏览器自带的功能也随着增多，在 Web 开发过程中，我们经常会使用一些 Web API 增加我们的开发效率。

本篇文章主要选取了一些有趣且有用的 Web API 进行介绍，并且 API 可以在线运行预览。

Clipboard API（剪切板）

剪切板 API 快速将内容复制到剪切板上，下面是一键复制的方法：

const onClipText = (text) => {
    handleCopyValue(text)
        .then(() => {
            alert("复制成功");
        })
        .catch(() => {
            alert("自动复制失败，请手动复制");
        });
};

const handleCopyValue = (text) => {
    //浏览器禁用了非安全域的 navigator.clipboard 对象
    //在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
    if (!navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text);
    } else {
        // 判断是否支持拷贝
        if (!document.execCommand("copy")) return Promise.reject();
        // 创建标签，并隐藏
        const textArea = document.createElement("textarea");
        textArea.style.position = "fixed";
        textArea.style.top = textArea.style.left = "-100vh";
        textArea.style.opacity = "0";
        textArea.value = text;
        document.body.appendChild(textArea);
        // 聚焦、复制
        textArea.focus();
        textArea.select();
        return new Promise((resolve, reject) => {
            // 不知为何，必须写这个三目，不然copy不上
            document.execCommand("copy") ? resolve() : reject();
            textArea.remove();
        });
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

执行onClipText方法，即可将想复制内容，复制到用户的剪切板上。

Fullscreen API（进入/退出全屏）

Fullscreen API 用于在 Web 应用程序中开启全屏模式，使用它就可以在全屏模式下查看页面/元素。在安卓手机中，它会溢出浏览器窗口和安卓顶部的状态栏（显示网络状态、电池状态等的地方）。

下面是一个 Fullscreen API 的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
    <div id="booktext">
       <h1>正能量先锋</h1>
        <p>在今天这个快节奏、竞争激烈的时代里，我们时常会面临一些挑战和困难，有时甚至会让我们感到绝望和沮丧。但我们应该时刻铭记，每一个困难背后都有无限的机会和可能。</p>
       <button onclick="toggleFullscreen()">进入/退出沉浸式阅读</button>
    </div>
    
    <script>
      var bookText = document.getElementById('booktext');
      
      function toggleFullscreen() {
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          bookText.requestFullscreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
          });
        }
      }
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

上面的例子展示了如何通过 Fullscreen API 实现一个视频全屏播放的功能。

在 HTML 中，我们定义了一个视频播放器，使用 controls 属性添加了播放器的控制栏。同时，我们也定义了一个按钮，点击该按钮可以全屏播放视频。

在 JavaScript 中，我们首先通过 getElementById 获取到视频容器，然后通过 querySelector 获取到视频元素本身。接着，定义了一个 toggleFullscreen 函数来监听按钮的点击事件，并根据当前全屏状态调用 requestFullscreen 或 exitFullscreen 来切换全屏状态。

需要注意的是，requestFullscreen 方法可能会被浏览器阻止，例如因为用户未授权。因此在实际使用中，我们需要使用 catch 方法来捕获 requestFullscreen 方法的调用错误信息。

Online State API（网络状态）

就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。

window.addEventListener("online", onlineHandler); // 联网时
window.addEventListener("offline", offlineHandler); // 断网时
1
2

比如很常见的一个需求，断网时提示，网络恢复时刷新。

实现断网重连：

const onlineHandler = () => {
    window.location.reload();
};
const offlineHandler = () => {
    alert("网络异常，请检查您的网络");
};
window.addEventListener("online", onlineHandler);
window.addEventListener("offline", offlineHandler);
1
2
3
4
5
6
7
8

这样就可以监听用户的网络状态，如网络链接、断开时可以对用户进行提示以及做相应的逻辑处理。

Page Visibility API（页面显示）

我们可以用document.visibitilityState来监听网页可见度，是否卸载..

在手机和电脑上都会现这种情况，比如页面中有一个视频正在播放，然后在切换tab页后给视频暂停播放，或者有个定时器轮询，在页面不显示的状态下停止无意义的轮询等等。

比如一个视频的例子来展示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
 <video id="vs" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls>
 </video>
<script>
const video = document.getElementById('vs')

window.addEventListener('visibilitychange',() => {
    // 通过这个方法来获取当前标签页在浏览器中的激活状态。
    switch(document.visibilityState){
        case'prerender': // 网页预渲染 但内容不可见
        case'hidden':    // 内容不可见 处于后台状态，最小化，或者锁屏状态
        video.puase()
        case'visible':   // 内容可见
        video.play()
        case'unloaded':  // 文档被卸载
        video.destory()
    }
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这个API的用处就是用来响应我们网页的状态，如果这个标签页显示则视频就开始播放，隐藏就暂停，关闭就卸载。

Screen Orientation API（页面方向）

我们可以通过以下代码来演示如何使用Screen Orientation API来控制页面的方向：

// 获取屏幕方向对象
const orientation = screen.orientation;

// 监听屏幕方向变化事件
orientation.addEventListener('change', () => {
  console.log(`屏幕方向变为：${orientation.type}`);
});

// 锁定屏幕方向为横屏
orientation.lock('landscape').then(() => {
  console.log('屏幕方向已锁定为横屏');
}).catch((err) => {
  console.log(`锁定屏幕方向失败：${err}`);
});

// 解锁屏幕方向
orientation.unlock();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这段代码中，我们首先通过screen.orientation获取了屏幕方向对象，并通过addEventListener方法监听了屏幕方向变化事件。然后，我们使用lock方法将屏幕方向锁定为横屏，并在锁定成功后打印了一条消息。最后，我们使用unlock方法解锁了屏幕方向。

需要注意的是，lock方法可能会在某些设备上无法生效，因此我们需要在实际使用中进行兼容性测试。

Battery API（电池信息）

以下是一个使用 Battery API 的简单示例：

<!DOCTYPE html>
<html>
<head>
	<title>Web Battery API Example</title>
</head>
<body>
	<h1>Web Battery API Example</h1>
	<div id="battery-status">
		<p>当前电量: <span id="battery-level"></span></p>
		<p>电池状态: <span id="battery-status"></span></p>
	</div>

	<script>
		// 获取电池信息
		navigator.getBattery().then(function(battery) {
			// 更新电量信息
			updateBatteryStatus(battery);

			// 监听电池信息变化
			battery.addEventListener('levelchange', function() {
				updateBatteryStatus(battery);
			});

			battery.addEventListener('chargingchange', function() {
				updateBatteryStatus(battery);
			});
		});

		// 更新电量信息
		function updateBatteryStatus(battery) {
			document.querySelector('#battery-level').textContent = battery.level * 100 + '%';
			document.querySelector('#battery-status').textContent = battery.charging ? '正在充电' : '未充电';
		}
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

这个例子展示了如何使用Web Battery API来获取电池的状态信息，并在页面上显示当前电量和电池状态。

在这个例子中，我们使用了navigator.getBattery()方法来获取电池信息，并使用battery.addEventListener()方法来监听电池信息变化。最后，我们使用**updateBatteryStatus()**函数来更新电量信息并在页面上显示。

Web Share API（分享）

以下是一个简单的Web Share API例子：

// 获取分享按钮元素
const shareButton = document.querySelector('#share-button');

// 添加点击事件监听器
shareButton.addEventListener('click', async () => {
  try {
    // 检查浏览器是否支持Web Share API
    if (navigator.share) {
      // 调用Web Share API分享
      await navigator.share({
        title: '分享标题',
        text: '分享描述',
        url: '分享链接'
      });
    } else {
      // 如果不支持，显示提示信息
      alert('该浏览器不支持Web Share API');
    }
  } catch (error) {
    // 处理异常情况
    console.error('分享失败:', error);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这个例子假设页面中有一个id为share-button的分享按钮元素。当用户点击该按钮时，代码会检查浏览器是否支持Web Share API，如果支持则调用该API进行分享，否则显示一个提示信息。

在navigator.share方法中，我们可以传递一个包含title、text和url等属性的对象，用于指定分享内容的标题、描述和链接。如果用户选择分享，系统会弹出一个分享对话框，让用户选择分享方式（例如通过社交媒体、电子邮件等方式分享）。

如果用户取消分享，则navigator.share方法会返回一个Promise对象，其状态为rejected。我们可以通过捕获该Promise对象的异常来处理分享失败的情况。

ImageCapture API（图片抓取）

以下提供一个基本的Web ImageCapture API示例，如下所示：

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Web ImageCapture API Demo</title>
  </head>
  <body>
    <h1>Web ImageCapture API Demo</h1>
    <video id="video" width="640" height="480" autoplay></video>
    <br>
    <button id="capture-btn">Capture Image</button>
    <br>
    <canvas id="canvas" width="640" height="480"></canvas>
    <br>
    <img id="captured-img">
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

JavaScript代码：

// 获取视频和按钮元素
const video = document.getElementById('video');
const captureBtn = document.getElementById('capture-btn');

// 获取画布和图像元素
const canvas = document.getElementById('canvas');
const img = document.getElementById('captured-img');

// 获取视频流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    video.play();
  })
  .catch(error => {
    console.log(error);
  });

// 设置ImageCapture
let imageCapture;
const track = video.srcObject.getVideoTracks()[0];
imageCapture = new ImageCapture(track);

// 添加事件监听器
captureBtn.addEventListener('click', () => {
  // 拍照
  imageCapture.takePhoto()
    .then(blob => {
      // 将照片显示在画布上
      const url = URL.createObjectURL(blob);
      canvas.getContext('2d').drawImage(img, 0, 0);
      
      // 将照片显示在图像元素中
      img.src = url;
    })
    .catch(error => {
      console.log(error);
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

这个示例将显示一个视频元素和一个“Capture Image”按钮。当用户点击按钮时，它将使用ImageCapture API拍摄照片，并在画布和图像元素中显示照片。

请注意，此示例仅适用于支持MediaStreamTrack和ImageCapture API的浏览器。

Selection API（文本选区）

下面是一个Web Selection API的例子，如下所示：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>Web Selection API Example</title>
	<style>
		.highlight {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>Web Selection API Example</h1>
	<p>Select text in the paragraph below to see the API in action.</p>
	<p id="demo">The Web Selection API allows you to retrieve and manipulate text selections made by the user.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

JavaScript代码（web-selection-api.js）：

// 获取文本节点
const demoEl = document.getElementById('demo');

// 监听文本节点的选择事件
demoEl.addEventListener('mouseup', handleSelection);

// 处理选择事件
function handleSelection() {
    // 获取用户选择的文本
    const selection = window.getSelection();
    const selectedText = selection.toString();
    // 如果选择的文本不为空
    if (selectedText) {
        // 创建一个新的高亮节点
        const highlightEl = document.createElement('span');
        highlightEl.classList.add('highlight');

        // 将高亮节点插入到选择范围中
        const range = selection.getRangeAt(0);
        range.surroundContents(highlightEl);

        // 取消选择
        selection.removeAllRanges();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这个例子演示了如何使用Web Selection API来获取用户选择的文本，并将其高亮显示。

当用户在页面上选择文本时，会触发mouseup事件，然后调用handleSelection函数来处理选择事件。

在handleSelection函数中，我们首先使用window.getSelection()方法获取用户选择的文本，然后检查是否选择了文本。

如果选择了文本，我们创建一个新的span元素，并将其添加到选择范围中，然后使用removeAllRanges()方法取消选择。最后，我们使用CSS样式将高亮显示的文本突出显示。

Performance API（性能检测）

以下是一个使用 Web Performance API 的例子：

// 测量页面加载时间
const startTime = window.performance.now();

window.addEventListener('load', () => {
  const loadTime = window.performance.now() - startTime;
  console.log(`页面加载时间为：${loadTime} 毫秒`);
});

// 测量网络时间
const resourceUrl = 'https://example.com/resource';

fetch(resourceUrl)
  .then(response => {
    const fetchTime = window.performance.now() - startTime;
    console.log(`请求时间为：${fetchTime} 毫秒`);

    // 获取网络时间信息
    const entry = performance.getEntriesByName(resourceUrl)[0];
    const start = entry.fetchStart;
    const end = entry.responseEnd;

    console.log(`DNS 查询时间为：${entry.domainLookupEnd - entry.domainLookupStart} 毫秒`);
    console.log(`TCP 握手时间为：${entry.connectEnd - entry.connectStart} 毫秒`);
    console.log(`TLS 握手时间为：${entry.secureConnectionStart ? entry.connectEnd - entry.secureConnectionStart : 'N/A'} 毫秒`);
    console.log(`请求时间为：${entry.responseStart - entry.requestStart} 毫秒`);
    console.log(`响应时间为：${entry.responseEnd - entry.responseStart} 毫秒`);
    console.log(`传输大小为：${entry.transferSize} 字节`);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这个例子中，我们使用了 Web Performance API 提供的 performance 对象来测量页面加载时间和使用 fetch() 方法获取资源的网络时间。我们还使用了 getEntriesByName() 方法来检索资源的网络时间信息。

Geolocation API（获取位置）

以下是一个使用 Geolocation API 获取用户当前位置信息的示例代码：

// 检查浏览器是否支持 Geolocation API
if ('geolocation' in navigator) {
  // 获取用户当前位置信息
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`您的纬度为：${latitude}，经度为：${longitude}`);
    },
    (error) => {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.log('用户拒绝了位置请求');
          break;
        case error.POSITION_UNAVAILABLE:
          console.log('无法获取位置信息');
          break;
        case error.TIMEOUT:
          console.log('请求超时');
          break;
        default:
          console.log('发生未知错误');
      }
    }
  );
} else {
  console.log('您的浏览器不支持 Geolocation API');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这个例子中，我们首先检查浏览器是否支持 Geolocation API。

如果支持，则调用 navigator.geolocation.getCurrentPosition() 方法获取用户当前位置信息。该方法接受两个回调函数作为参数：一个成功的回调函数和一个失败的回调函数。

如果获取位置信息成功，则成功的回调函数将被调用，并传递包含位置信息的对象作为参数。否则将调用失败的回调函数，并传递一个描述错误的对象作为参数。

Broadcast Channel API（跨页面通信）

下面是一个使用 Broadcast Channel API 实现简单的跨窗口通信的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Broadcast Channel API Example</title>
  </head>
  <body>
    <div id="message"></div>
    <input type="text" id="input-message">
    <button onclick="sendMessage()">Send Message</button>

    <script>
      const channel = new BroadcastChannel('my-channel'); // 创建一个广播通道对象

      function sendMessage() {
        const inputMessage = document.getElementById('input-message');
        const message = inputMessage.value;
        channel.postMessage(message); // 将消息发送到广播通道中
        inputMessage.value = ''; // 清空输入框内容
      }

      channel.onmessage = (event) => {
        const message = event.data;
        const messageDiv = document.getElementById('message');
        messageDiv.innerHTML = message;
      }
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

上面的例子展示了如何使用 Broadcast Channel API 实现在两个窗口之间进行文本消息的双向通信。

在 HTML 中，我们定义了一个输入框和一个按钮，用于输入和发送消息。我们还定义了一个 div 元素，用于展示接收到的消息。

在 JavaScript 中，我们创建了一个名为 my-channel 的广播通道对象，并定义了一个 sendMessage 函数，该函数将输入框中的文本消息发送到广播通道中。

同时，我们在 channel 对象上通过 onmessage 方法监听广播通道上的消息，一旦有消息发送到该通道，就会触发该方法，在该方法中将接收到的消息展示在 div 元素中。

需要注意的是，广播通道的名字需要保持一致，才能实现不同窗口之间的通信。

Vibration API（设备振动）

以下是一个简单的Web Vibration API例子：

<!DOCTYPE html>
<html>
<head>
	<title>Web Vibration API Example</title>
</head>
<body>
	<h1>Web Vibration API Example</h1>
	<button onclick="vibrate()">Vibrate</button>
	<script>
		function vibrate() {
			if ("vibrate" in navigator) {
				navigator.vibrate(1000); // 1秒钟的震动
			} else {
				alert("Vibration API not supported in this browser.");
			}
		}
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这个例子中，当用户点击"Vibrate"按钮时，浏览器会尝试通过Web Vibration API来触发设备的震动功能。

如果设备支持Web Vibration API，则会进行1秒钟的震动，否则会弹出一个警告框提示用户该功能不被支持。

Srceen Capture API（视频截图）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Web Screen Capture API Example</title>
</head>
<body>
	<h1>Web Screen Capture API Example</h1>

	<button id="start-capture">Start Capture</button>
	<button id="stop-capture">Stop Capture</button>

	<canvas id="canvas" width="640" height="480"></canvas>

	<script>
		// 获取DOM元素
		const startCaptureBtn = document.getElementById('start-capture');
		const stopCaptureBtn = document.getElementById('stop-capture');
		const canvas = document.getElementById('canvas');

		// 获取媒体流（屏幕共享）并将其渲染到canvas中
		async function startCapture() {
			try {
				const mediaStream = await navigator.mediaDevices.getDisplayMedia();
				const context = canvas.getContext('2d');
				context.drawImage(video, 0, 0, canvas.width, canvas.height);
			} catch(err) {
				console.error("Error: " + err);
			}
		}

		// 停止捕获并停止媒体流
		function stopCapture() {
			const tracks = mediaStream.getTracks();
			tracks.forEach(track => track.stop());
		}

		// 注册按钮单击事件
		startCaptureBtn.addEventListener('click', startCapture);
		stopCaptureBtn.addEventListener('click', stopCapture);
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

这个例子中，页面上有两个按钮，一个用于开始捕获屏幕，另一个用于停止捕获。捕获的内容被呈现在一个画布上。

在 startCapture() 函数中，我们使用 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕共享的媒体流，并将其渲染到canvas上。在 stopCapture() 函数中，我们停止所有媒体流的所有轨道，以结束捕获过程。

Intersection Observer API（元素监听）

以下是一个示例，演示了如何使用 Intersection Observer API 在元素进入视口时进行检测：

<!DOCTYPE html>
<html>
  <head>
    <title>Intersection Observer Example</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 50px;
      }
      .visible {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <script>
      const boxes = document.querySelectorAll('.box');

      const options = {
        rootMargin: '0px',
        threshold: 0.5
      };

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
          } else {
            entry.target.classList.remove('visible');
          }
        });
      }, options);

      boxes.forEach(box => {
        observer.observe(box);
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

在这个示例中，我们首先选择所有具有“box”类的元素。然后，我们创建一个带有0像素的rootMargin和0.5的阈值的IntersectionObserver实例。这意味着当元素的50％位于视口内时，它将被视为可见。

然后，我们循环遍历每个盒子元素，并在我们的观察者实例上调用observe方法，将盒子元素作为参数传递。

最后，在IntersectionObserver实例的回调函数中，我们检查每个条目是否与视口相交。如果是，则将“visible”类添加到条目的目标元素中，否则将其删除。

参考

  1. web-api-examplesopen in new window
  2. MDN-Web APIsopen in new window
  3. 12 Rarely Used JavaScript Web APIs that Will Boost Your Website to THE MOONopen in new window
  4. 7 JavaScript Web APIs to build Futuristic Websites you didn't knowopen in new window
  5. 你（可能）不知道的 web apiopen in new window

最后附上我的博客地址————九旬的博客open in new window，欢迎🌟Star🌟。