web nfc

script.js

@@ -5,24 +5,36 @@ const log = document.getElementById('log');
 // 功能開關：是否呼叫 API 獲取額外資訊
 const useApi = false;
 
-resetButton.addEventListener('click', () => {
-    log.textContent = '';
-});
+// 檢查瀏覽器是否支援 Web NFC
+if (!('NDEFReader' in window)) {
+    log.textContent = '您的瀏覽器不支援 Web NFC。請在 Android 版 Chrome 中嘗試。';
+    scanButton.style.display = 'none';
+    resetButton.style.display = 'none';
+} else {
+    // 依照標準實踐，建立一個可重複使用的 NDEFReader 實例
+    const ndef = new NDEFReader();
 
-scanButton.addEventListener('click', async () => {
-    log.textContent = '請將 NFC 卡片靠近您的裝置...';
+    resetButton.addEventListener('click', () => {
+        log.textContent = '';
+        scanButton.disabled = false; // 重設時重新啟用掃描按鈕
+        // 注意：目前的 Web NFC API 沒有提供直接停止掃描的方法。
+        // 重設僅會清空日誌並讓您可以重新觸發掃描以更新事件處理器。
+    });
 
-    try {
-        if ('NDEFReader' in window) {
-            const reader = new NDEFReader();
-            await reader.scan();
+    scanButton.addEventListener('click', async () => {
+        log.textContent = '請將 NFC 卡片靠近您的裝置...';
+        scanButton.disabled = true; // 按下後禁用按鈕以防 InvalidStateError
+
+        try {
+            await ndef.scan();
             log.textContent = '掃描器已啟動，等待卡片...';
 
-            reader.addEventListener('readingerror', () => {
+            ndef.onreadingerror = () => {
                 log.textContent = '讀取 NFC 卡片時發生錯誤。';
-            });
+                scanButton.disabled = false; // 發生錯誤時重新啟用按鈕
+            };
 
-            reader.addEventListener('reading', ({ message, serialNumber }) => {
+            ndef.onreading = ({ message, serialNumber }) => {
                 let output = `> 卡片 UID: ${serialNumber}\n`;
 
                 if (useApi) {
@@ -43,11 +55,10 @@ scanButton.addEventListener('click', async () => {
                     // 當 useApi 為 false 時，只顯示 UID
                     log.textContent += output; // 改為附加資訊
                 }
-            });
-        } else {
-            log.textContent = '您的瀏覽器不支援 Web NFC。請在 Android 版 Chrome 中嘗試。';
+            };
+        } catch (error) {
+            log.textContent = `錯誤: ${error}`;
+            scanButton.disabled = false; // 捕獲到錯誤時重新啟用按鈕
         }
-    } catch (error) {
-        log.textContent = `錯誤: ${error}`;
-    }
-});
+    });
+}