时间戳

首页 > 解决方案 > javascript ndefREADER 不会自动加载

javascript - javascript ndefREADER 不会自动加载

问题描述

首先，我不得不说这是我在堆栈上的第一个问题；）

我正在尝试在我的测试网络上通过 NFC 实现读取，但我不知道为什么，ndefReader 在启动时不起作用，我必须按下网络上的任何字段才能加载它（或请求许​​可）。

但是，如果我写了一些警报来检查为什么它在启动时没有达到功能，它可以工作！！！（当然，它之前显示警报）。我不知道当我接受警报时，我是否正在与网络交互，这就是它起作用的原因，但无论如何，我不知道为什么会发生这种情况（我需要在开始之前单击任何地方）。

function iniciar() {
    document.getElementById("input1").focus();
    //alert("test before"); <--- IF i remove this, it doesnt works
    document.getElementById("input1").addEventListener("blur", async () => {
      try{
        const ndef = new NDEFReader();
        alert("before wait");
        await ndef.scan();
        alert("after wait");
        ndef.addEventListener("readingerror", () => {
          alert("Argh! Cannot read data from the NFC tag. Try another one?");
        });

        ndef.addEventListener("reading", ({ message, serialNumber }) => {
          alert(`> Serial Number: ${serialNumber}`);
          alert(`> Records: (${message.records.length})`);
        });
      } catch (error) {
        alert("Argh! " + error);
      }
    },false);

标签： javascriptnfc

解决方案

要扫描和写入 NFC 标签，您必须在处理用户手势时首先请求“nfc”权限（例如，单击按钮，或者在您的情况下为“alert”调用）。处理后，如果之前未授予访问权限，则 NDEFReader scan() 和 write() 方法会触发用户提示。

查看https://web.dev/nfc/#security-and-permissions了解更多信息。

希望https://googlechrome.github.io/samples/web-nfc/示例也能帮助您。

scanButton.addEventListener("click", async () => {
  console.log("User clicked scan button");

  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    console.log("> Scan started");

    ndef.addEventListener("readingerror", () => {
      console.log("Argh! Cannot read data from the NFC tag. Try another one?");
    });

    ndef.addEventListener("reading", ({ message, serialNumber }) => {
      console.log(`> Serial Number: ${serialNumber}`);
      console.log(`> Records: (${message.records.length})`);
    });
  } catch (error) {
    console.log("Argh! " + error);
  }
});

推荐阅读