随着浏览器的日益壮大，浏览器自带的性能也随着增多，在 Web 开发过程中，咱们常常会应用一些 Web API 减少咱们的开发效率。

本篇文章次要选取了一些乏味且有用的 Web API 进行介绍，并且 API 能够在线运行预览。

  • Clipboard API（剪切板）
  • Fullscreen API（进入/退出全屏）
  • Online State API（网络状态）
  • Page Visibility API（页面显示）
  • Screen Orientation API（页面方向）
  • Battery API（电池信息）
  • Web Share API（分享）
  • ImageCapture API（图片抓取）
  • Selection API（文本选区）
  • Performance API（性能检测）
  • Geolocation API（获取地位）
  • Broadcast Channel API（跨页面通信）
  • Vibration API（设施振动）
  • Srceen Capture API（视频截图）
  • Intersection Observer 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();        });    }};

执行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>

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

在 HTML 中，咱们定义了一个视频播放器，应用 controls 属性增加了播放器的管制栏。同时，咱们也定义了一个按钮，点击该按钮能够全屏播放视频。

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

须要留神的是，requestFullscreen 办法可能会被浏览器阻止，例如因为用户未受权。因而在理论应用中，咱们须要应用 catch 办法来捕捉 requestFullscreen 办法的调用错误信息。

Online State API（网络状态）

就是获取以后的网络状态，同时也有对应的事件去响应网络状态的变动。

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

比方很常见的一个需要，断网时提醒，网络复原时刷新。

实现断网重连：

const onlineHandler = () => {    window.location.reload();};const offlineHandler = () => {    alert("网络异样，请查看您的网络");};window.addEventListener("online", onlineHandler);window.addEventListener("offline", offlineHandler);

这样就能够监听用户的网络状态，如网络链接、断开时能够对用户进行提醒以及做相应的逻辑解决。

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>

这个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();

在这段代码中，咱们首先通过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>

这个例子展现了如何应用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);  }});

这个例子假如页面中有一个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>

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);  });// 设置ImageCapturelet 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);    });});

这个示例将显示一个视频元素和一个“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>

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();    }}

这个例子演示了如何应用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} 字节`);  });

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

Geolocation API（获取地位）

以下是一个应用 Geolocation API 获取用户以后地位信息的示例代码：

// 查看浏览器是否反对 Geolocation APIif ('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');}

在这个例子中，咱们首先查看浏览器是否反对 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>

下面的例子展现了如何应用 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>

这个例子中，当用户点击"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>

这个例子中，页面上有两个按钮，一个用于开始捕捉屏幕，另一个用于进行捕捉。捕捉的内容被出现在一个画布上。

在 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>

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

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

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

参考

  1. web-api-examples
  2. MDN-Web APIs
  3. 12 Rarely Used JavaScript Web APIs that Will Boost Your Website to THE MOON
  4. 7 JavaScript Web APIs to build Futuristic Websites you didn't know
  5. 你（可能）不晓得的 web api

最初附上我的博客地址————九旬的博客，欢送Star。