Web NFC是浏览器提供的近场通信接口，允许网页通过JavaScript与NFC标签进行非接触式数据交换。它基于NDEF（NFC Data Exchange Format）协议，主要面向只读或读写的NFC标签场景，比如电子名片、物品标签和门禁演示。在支持该接口的设备和浏览器上，开发者可以用少量代码完成标签识别与内容更新。
一、检测浏览器是否支持Web NFC
并不是所有浏览器都开放了Web NFC能力，因此在执行业务逻辑前必须先做特性检测。通常我们通过判断全局对象中是否存在NDEFReader构造函数来确定支持情况。若直接调用不存在的接口，会抛出引用错误导致页面脚本中断。
除了接口存在性判断，还应注意系统层面要求：Android端Chrome需要在设置中开启NFC且屏幕处于解锁状态；部分系统会限制后台页面使用。以下代码展示了基础检测方式，并给出用户提示。
if ('NDEFReader' in window) {
console.log('当前浏览器支持Web NFC');
} else {
console.log('当前浏览器不支持Web NFC，请更换设备或使用Android Chrome');
}
二、创建NDEFReader并监听读取事件
确认支持后，需要实例化NDEFReader对象，并调用其scan方法开启扫描。scan返回一个Promise，成功后浏览器会持续监听靠近的NFC标签，并通过reading事件回传数据。注意scan必须在用户手势（如点击）后触发，否则会被浏览器拦截。
在reading事件回调中，我们可以拿到包含多条记录的message对象。为提升体验，建议同时监听error事件，以捕获权限被拒或硬件异常。下面代码演示了按钮触发扫描并输出标签序列号。
const ndef = new NDEFReader();
document.getElementById('startBtn').addEventListener('click', async () => {
try {
await ndef.scan();
console.log('NFC扫描已启动，请将标签靠近设备');
ndef.addEventListener('reading', event => {
const { serialNumber, message } = event;
console.log('检测到标签，序列号：', serialNumber);
});
ndef.addEventListener('error', error => {
console.error('NFC读取出错：', error);
});
} catch (err) {
console.error('启动扫描失败：', err);
}
});
三、解析NDEF记录中的业务数据
NDEF消息由一个或多个NDEFRecord组成，每条记录带有recordType、mediaType和data等字段。常见的recordType有text、url和mime。对于文本类型，data是ArrayBuffer，需要用TextDecoder转换为字符串。
若标签中写入的是自定义JSON，通常将recordType设为mime且mediaType为application/json，此时data仍需解码后解析。以下示例读取text类型记录并打印内容，同时兼容url类型跳转提示。
ndef.addEventListener('reading', event => {
for (const record of event.message.records) {
if (record.recordType === 'text') {
const text = new TextDecoder().decode(record.data);
console.log('文本内容：', text);
} else if (record.recordType === 'url') {
const url = new TextDecoder().decode(record.data);
console.log('链接内容：', url);
}
}
});
四、向NFC标签写入NDEF消息
写入操作同样通过NDEFReader实例完成，调用write方法并传入NDEFMessage对象。消息内部用records数组描述，每条记录通过NDEFRecord构造。写标签时设备应贴近标签且保持不动，避免写入中断。
下面代码将一段文本和一条网址写入标签。注意write也需在用户手势后调用，且写入会覆盖原有内容。如果标签设为只读，则会抛出错误，因此正式写前可先读取确认标签状态。
async function writeTag() {
const ndef = new NDEFReader();
const message = {
records: [
{ recordType: 'text', data: new TextEncoder().encode('你好NFC') },
{ recordType: 'url', data: new TextEncoder().encode('https://ipipp.com') }
]
};
try {
await ndef.write(message);
console.log('写入成功');
} catch (err) {
console.error('写入失败：', err);
}
}
五、异常处理与兼容边界
实际项目中，用户可能拒绝权限、移开标签或设备不支持。我们需要用try-catch包裹scan与write，并依据错误名称给出引导。例如NotAllowedError代表权限或手势限制，NotFoundError代表未检测到标签。
另外，iOS Safari目前未开放Web NFC，因此面向大众的产品应提供降级方案，如二维码。下表列出常见错误与处理建议，帮助快速定位问题。
| 错误名称 | 含义 | 处理建议 |
|---|---|---|
| NotAllowedError | 未通过用户手势或权限不足 | 绑定按钮点击后触发，确认站点为HTTPS |
| NotFoundError | 扫描或写入时未贴近标签 | 提示用户将标签靠近设备背部 |
| NotSupportedError | 浏览器不支持该操作 | 引导使用Android Chrome并开启NFC |
掌握上述五个步骤后，开发者即可在合规环境下完成基础的Web NFC读写。重点记住：特性检测先行、用户手势触发、正确编码记录、覆盖式写入以及细致捕错，这能让近场交互更稳定可靠。
Web_NFCJavaScriptNDEF修改时间：2026-08-01 07:42:13