开发效率翻倍的Web API使用技巧
作者:九旬
引言
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web 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); }); // 设置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); }); });
这个示例将显示一个视频元素和一个“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 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'); }
在这个例子中,我们首先检查浏览器是否支持 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
”类添加到条目的目标元素中,否则将其删除。
参考
以上就是开发效率翻倍的Web API使用技巧的详细内容,更多关于Web API使用技巧的资料请关注脚本之家其它相关文章!