開發(fā)效率翻倍的Web?API使用技巧
引言
隨著瀏覽器的日益壯大，瀏覽器自帶的功能也隨著增多，在 Web 開發(fā)過程中，我們經(jīng)常會使用一些 Web API 增加我們的開發(fā)效率。
Clipboard API（剪切板）
剪切板 API 快速將內(nèi)容復制到剪切板上，下面是一鍵復制的方法：
const onClipText = (text) => {
handleCopyValue(text)
.then(() => {
alert("復制成功");
})
.catch(() => {
alert("自動復制失敗，請手動復制");
});
};
const handleCopyValue = (text) => {
//瀏覽器禁用了非安全域的 navigator.clipboard 對象
//在線上環(huán)境會報錯 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();
// 創(chuàng)建標簽，并隱藏
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();
});
}
};執(zhí)行onClipText方法，即可將想復制內(nèi)容，復制到用戶的剪切板上。
Fullscreen API（進入/退出全屏）
Fullscreen API 用于在 Web 應用程序中開啟全屏模式，使用它就可以在全屏模式下查看頁面/元素。在安卓手機中，它會溢出瀏覽器窗口和安卓頂部的狀態(tài)欄（顯示網(wǎng)絡狀態(tài)、電池狀態(tài)等的地方）。
下面是一個 Fullscreen API 的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fullscreen API Example</title>
</head>
<body>
<div id="booktext">
<h1>正能量先鋒</h1>
<p>在今天這個快節(jié)奏、競爭激烈的時代里，我們時常會面臨一些挑戰(zhàn)和困難，有時甚至會讓我們感到絕望和沮喪。但我們應該時刻銘記，每一個困難背后都有無限的機會和可能。</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 實現(xiàn)一個視頻全屏播放的功能。
在 HTML 中，我們定義了一個視頻播放器，使用 controls 屬性添加了播放器的控制欄。同時，我們也定義了一個按鈕，點擊該按鈕可以全屏播放視頻。
在 JavaScript 中，我們首先通過 getElementById 獲取到視頻容器，然后通過 querySelector 獲取到視頻元素本身。接著，定義了一個 toggleFullscreen 函數(shù)來監(jiān)聽按鈕的點擊事件，并根據(jù)當前全屏狀態(tài)調(diào)用 requestFullscreen 或 exitFullscreen 來切換全屏狀態(tài)。
需要注意的是，requestFullscreen 方法可能會被瀏覽器阻止，例如因為用戶未授權。因此在實際使用中，我們需要使用 catch 方法來捕獲 requestFullscreen 方法的調(diào)用錯誤信息。
Online State API（網(wǎng)絡狀態(tài)）
就是獲取當前的網(wǎng)絡狀態(tài)，同時也有對應的事件去響應網(wǎng)絡狀態(tài)的變化。
window.addEventListener("online", onlineHandler); // 聯(lián)網(wǎng)時
window.addEventListener("offline", offlineHandler); // 斷網(wǎng)時比如很常見的一個需求，斷網(wǎng)時提示，網(wǎng)絡恢復時刷新。
實現(xiàn)斷網(wǎng)重連：
const onlineHandler = () => {
window.location.reload();
};
const offlineHandler = () => {
alert("網(wǎng)絡異常，請檢查您的網(wǎng)絡");
};
window.addEventListener("online", onlineHandler);
window.addEventListener("offline", offlineHandler);這樣就可以監(jiān)聽用戶的網(wǎng)絡狀態(tài)，如網(wǎng)絡鏈接、斷開時可以對用戶進行提示以及做相應的邏輯處理。
Page Visibility API（頁面顯示）
我們可以用document.visibitilityState來監(jiān)聽網(wǎng)頁可見度，是否卸載..
在手機和電腦上都會現(xiàn)這種情況，比如頁面中有一個視頻正在播放，然后在切換tab頁后給視頻暫停播放，或者有個定時器輪詢，在頁面不顯示的狀態(tài)下停止無意義的輪詢等等。
比如一個視頻的例子來展示：
<!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',() => {
// 通過這個方法來獲取當前標簽頁在瀏覽器中的激活狀態(tài)。
switch(document.visibilityState){
case'prerender': // 網(wǎng)頁預渲染 但內(nèi)容不可見
case'hidden': // 內(nèi)容不可見 處于后臺狀態(tài)，最小化，或者鎖屏狀態(tài)
video.puase()
case'visible': // 內(nèi)容可見
video.play()
case'unloaded': // 文檔被卸載
video.destory()
}
});
</script>
</body>
</html>這個API的用處就是用來響應我們網(wǎng)頁的狀態(tài)，如果這個標簽頁顯示則視頻就開始播放，隱藏就暫停，關閉就卸載。
Screen Orientation API（頁面方向）
我們可以通過以下代碼來演示如何使用Screen Orientation API來控制頁面的方向：
// 獲取屏幕方向?qū)ο?
const orientation = screen.orientation;
// 監(jiān)聽屏幕方向變化事件
orientation.addEventListener('change', () => {
console.log(`屏幕方向變?yōu)椋?{orientation.type}`);
});
// 鎖定屏幕方向為橫屏
orientation.lock('landscape').then(() => {
console.log('屏幕方向已鎖定為橫屏');
}).catch((err) => {
console.log(`鎖定屏幕方向失?。?{err}`);
});
// 解鎖屏幕方向
orientation.unlock();在這段代碼中，我們首先通過screen.orientation獲取了屏幕方向?qū)ο?，并通過addEventListener方法監(jiān)聽了屏幕方向變化事件。然后，我們使用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>電池狀態(tài): <span id="battery-status"></span></p>
</div>
<script>
// 獲取電池信息
navigator.getBattery().then(function(battery) {
// 更新電量信息
updateBatteryStatus(battery);
// 監(jiān)聽電池信息變化
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來獲取電池的狀態(tài)信息，并在頁面上顯示當前電量和電池狀態(tài)。
在這個例子中，我們使用了navigator.getBattery()方法來獲取電池信息，并使用battery.addEventListener()方法來監(jiān)聽電池信息變化。最后，我們使用updateBatteryStatus()函數(shù)來更新電量信息并在頁面上顯示。
Web Share API（分享）
以下是一個簡單的Web Share API例子：
// 獲取分享按鈕元素
const shareButton = document.querySelector('#share-button');
// 添加點擊事件監(jiān)聽器
shareButton.addEventListener('click', async () => {
try {
// 檢查瀏覽器是否支持Web Share API
if (navigator.share) {
// 調(diào)用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，如果支持則調(diào)用該API進行分享，否則顯示一個提示信息。
在navigator.share方法中，我們可以傳遞一個包含title、text和url等屬性的對象，用于指定分享內(nèi)容的標題、描述和鏈接。如果用戶選擇分享，系統(tǒng)會彈出一個分享對話框，讓用戶選擇分享方式（例如通過社交媒體、電子郵件等方式分享）。
如果用戶取消分享，則navigator.share方法會返回一個Promise對象，其狀態(tài)為rejected。我們可以通過捕獲該Promise對象的異常來處理分享失敗的情況。
ImageCapture API（圖片抓?。?/h2>
以下提供一個基本的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);
// 添加事件監(jiān)聽器
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（文本選區(qū)）
下面是一個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）：
// 獲取文本節(jié)點
const demoEl = document.getElementById('demo');
// 監(jiān)聽文本節(jié)點的選擇事件
demoEl.addEventListener('mouseup', handleSelection);
// 處理選擇事件
function handleSelection() {
// 獲取用戶選擇的文本
const selection = window.getSelection();
const selectedText = selection.toString();
// 如果選擇的文本不為空
if (selectedText) {
// 創(chuàng)建一個新的高亮節(jié)點
const highlightEl = document.createElement('span');
highlightEl.classList.add('highlight');
// 將高亮節(jié)點插入到選擇范圍中
const range = selection.getRangeAt(0);
range.surroundContents(highlightEl);
// 取消選擇
selection.removeAllRanges();
}
}這個例子演示了如何使用Web Selection API來獲取用戶選擇的文本，并將其高亮顯示。
當用戶在頁面上選擇文本時，會觸發(fā)mouseup事件，然后調(diào)用handleSelection函數(shù)來處理選擇事件。
在handleSelection函數(shù)中，我們首先使用window.getSelection()方法獲取用戶選擇的文本，然后檢查是否選擇了文本。
如果選擇了文本，我們創(chuàng)建一個新的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} 毫秒`);
});
// 測量網(wǎng)絡時間
const resourceUrl = 'https://example.com/resource';
fetch(resourceUrl)
.then(response => {
const fetchTime = window.performance.now() - startTime;
console.log(`請求時間為：${fetchTime} 毫秒`);
// 獲取網(wǎng)絡時間信息
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} 字節(jié)`);
});在這個例子中，我們使用了 Web Performance API 提供的 performance 對象來測量頁面加載時間和使用 fetch() 方法獲取資源的網(wǎng)絡時間。我們還使用了 getEntriesByName() 方法來檢索資源的網(wǎng)絡時間信息。
Geolocation API（獲取位置）
以下是一個使用 Geolocation API 獲取用戶當前位置信息的示例代碼：
// 檢查瀏覽器是否支持 Geolocation API
if ('geolocation' in navigator) {
// 獲取用戶當前位置信息
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`您的緯度為：${latitude}，經(jīng)度為：${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('發(fā)生未知錯誤');
}
}
);
} else {
console.log('您的瀏覽器不支持 Geolocation API');
}在這個例子中，我們首先檢查瀏覽器是否支持 Geolocation API。
如果支持，則調(diào)用 navigator.geolocation.getCurrentPosition() 方法獲取用戶當前位置信息。該方法接受兩個回調(diào)函數(shù)作為參數(shù)：一個成功的回調(diào)函數(shù)和一個失敗的回調(diào)函數(shù)。
如果獲取位置信息成功，則成功的回調(diào)函數(shù)將被調(diào)用，并傳遞包含位置信息的對象作為參數(shù)。否則將調(diào)用失敗的回調(diào)函數(shù)，并傳遞一個描述錯誤的對象作為參數(shù)。
Broadcast Channel API（跨頁面通信）
下面是一個使用 Broadcast Channel API 實現(xiàn)簡單的跨窗口通信的例子：
<!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'); // 創(chuàng)建一個廣播通道對象
function sendMessage() {
const inputMessage = document.getElementById('input-message');
const message = inputMessage.value;
channel.postMessage(message); // 將消息發(fā)送到廣播通道中
inputMessage.value = ''; // 清空輸入框內(nèi)容
}
channel.onmessage = (event) => {
const message = event.data;
const messageDiv = document.getElementById('message');
messageDiv.innerHTML = message;
}
</script>
</body>
</html>上面的例子展示了如何使用 Broadcast Channel API 實現(xiàn)在兩個窗口之間進行文本消息的雙向通信。
在 HTML 中，我們定義了一個輸入框和一個按鈕，用于輸入和發(fā)送消息。我們還定義了一個 div 元素，用于展示接收到的消息。
在 JavaScript 中，我們創(chuàng)建了一個名為 my-channel 的廣播通道對象，并定義了一個 sendMessage 函數(shù)，該函數(shù)將輸入框中的文本消息發(fā)送到廣播通道中。
同時，我們在 channel 對象上通過 onmessage 方法監(jiān)聽廣播通道上的消息，一旦有消息發(fā)送到該通道，就會觸發(fā)該方法，在該方法中將接收到的消息展示在 div 元素中。
需要注意的是，廣播通道的名字需要保持一致，才能實現(xiàn)不同窗口之間的通信。
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來觸發(fā)設備的震動功能。
如果設備支持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>這個例子中，頁面上有兩個按鈕，一個用于開始捕獲屏幕，另一個用于停止捕獲。捕獲的內(nèi)容被呈現(xiàn)在一個畫布上。
在 startCapture() 函數(shù)中，我們使用 navigator.mediaDevices.getDisplayMedia() 方法獲取屏幕共享的媒體流，并將其渲染到canvas上。在 stopCapture() 函數(shù)中，我們停止所有媒體流的所有軌道，以結束捕獲過程。
Intersection Observer API（元素監(jiān)聽）
以下是一個示例，演示了如何使用 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”類的元素。然后，我們創(chuàng)建一個帶有0像素的rootMargin和0.5的閾值的IntersectionObserver實例。這意味著當元素的50％位于視口內(nèi)時，它將被視為可見。
然后，我們循環(huán)遍歷每個盒子元素，并在我們的觀察者實例上調(diào)用observe方法，將盒子元素作為參數(shù)傳遞。
最后，在IntersectionObserver實例的回調(diào)函數(shù)中，我們檢查每個條目是否與視口相交。如果是，則將“visible”類添加到條目的目標元素中，否則將其刪除。
參考
以上就是開發(fā)效率翻倍的Web API使用技巧的詳細內(nèi)容，更多關于Web API使用技巧的資料請關注腳本之家其它相關文章！
相關文章
判斷是否輸入完畢再激活提交按鈕...2006-06-06
這篇文章主要介紹了微信小程序 input輸入框控件詳解及實例（多種示例）的相關資料,輸入框在程序中是最常見的，登錄，注冊，獲取搜索框中的內(nèi)容等等都需要，需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了js的一些潛在規(guī)則使用分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序icon組件詳細介紹的相關資料,需要的朋友可以參考下2016-09-09
詳解如何用js實現(xiàn)一個網(wǎng)頁版節(jié)拍器
這篇文章主要為大家介紹了詳解如何用js實現(xiàn)一個網(wǎng)頁版節(jié)拍器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了JavaScript本地存儲的全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了JSON?Schema概念及使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
THREE.js添加多個castShadow光源報錯解決及原因分析
這篇文章主要介紹了THREE.js添加多個castShadow的光源報錯解決及原因分析2023-06-06
這篇文章主要介紹了微信小程序 九宮格實例代碼的相關資料,需要的朋友可以參考下2017-01-01
微信小程序 動態(tài)綁定事件并實現(xiàn)事件修改樣式
這篇文章主要介紹了微信小程序 動態(tài)綁定事件并實現(xiàn)事件修改樣式的相關資料,需要的朋友可以參考下2017-04-04