我正在嘗試在網路 NFC 上進行探索，并找到了一個簡單的示例（https://googlechrome.github.io/samples/web-nfc/）。因此，我復制示例代碼以在本地進行測驗：
<html><head>
<title>Web NFC Sample</title>
<script>
// Add a global error event listener early on in the page load, to help ensure that browsers
// which don't support specific functionality still end up displaying a meaningful message.
window.addEventListener('error', function(error) {
if (ChromeSamples && ChromeSamples.setStatus) {
console.error(error);
ChromeSamples.setStatus(error.message ' (Your browser may not support this feature.)');
error.preventDefault();
}
});
</script>
<link rel="stylesheet" href="Web NFC Sample_files/main.css">
</head>
<body>
<button id="scanButton">Scan</button>
<button id="writeButton">Write</button>
<script>
var ChromeSamples = {
log: function() {
var line = Array.prototype.slice.call(arguments).map(function(argument) {
return typeof argument === 'string' ? argument : JSON.stringify(argument);
}).join(' ');
document.querySelector('#log').textContent = line '\n';
},
clearLog: function() {
document.querySelector('#log').textContent = '';
},
setStatus: function(status) {
document.querySelector('#status').textContent = status;
},
setContent: function(newContent) {
var content = document.querySelector('#content');
while(content.hasChildNodes()) {
content.removeChild(content.lastChild);
}
content.appendChild(newContent);
}
};
</script>
<h3>Live Output</h3>
<div id="output" >
<div id="content"></div>
<div id="status">Web NFC is not available.
Please make sure the "Experimental Web Platform features" flag is enabled on Android.</div>
<pre id="log"></pre>
</div>
<script>
if (/Chrome\/(\d \.\d .\d .\d )/.test(navigator.userAgent)){
// Let's log a warning if the sample is not supposed to execute on this
// version of Chrome.
if (89 > parseInt(RegExp.$1)) {
ChromeSamples.setStatus('Warning! Keep in mind this sample has been tested with Chrome ' 89 '.');
}
}
</script>
<script>
log = ChromeSamples.log;
if (!("NDEFReader" in window))
ChromeSamples.setStatus(
"Web NFC is not available.\n"
'Please make sure the "Experimental Web Platform features" flag is enabled on Android.'
);
</script>
<script>scanButton.addEventListener("click", async () => {
log("User clicked scan button");
try {
const ndef = new NDEFReader();
await ndef.scan();
log("> Scan started");
ndef.addEventListener("readingerror", () => {
log("Argh! Cannot read data from the NFC tag. Try another one?");
});
ndef.addEventListener("reading", ({ message, serialNumber }) => {
log(`> Serial Number: ${serialNumber}`);
log(`> Records: (${message.records.length})`);
});
} catch (error) {
log("Argh! " error);
}
});
writeButton.addEventListener("click", async () => {
log("User clicked write button");
try {
const ndef = new NDEFReader();
await ndef.write("Hello world!");
log("> Message written");
} catch (error) {
log("Argh! " error);
}
});
</script>
</body></html>
但是當我運行它時，它會顯示Web NFC is not available. Please make sure the "Experimental Web Platform features" flag is enabled on Android.在訊息中。當我單擊“掃描”按鈕時，它顯示Argh! ReferenceError: NDEFReader is not defined.
我可以知道為什么示例代碼在打開時運行良好，https://googlechrome.github.io但在本地 PC 上無法運行嗎？謝謝你。
uj5u.com熱心網友回復：
如https://web.dev/nfc/#security-and-permissions 中所述，Web NFC 僅在安全瀏覽背景關系中可用。這意味著您要么必須通過https://localhost 或 localhost為您的網頁提供服務，例如http://127.0.0.1或http://localhost。
- 如果你已經安裝了npm，你可以使用
npx http-serve. - 如果您已經安裝了 Python 2，請使用
python -m SimpleHTTPServer - 如果您已經安裝了 Python 3，請使用
python -m http.server
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/372891.html
上一篇：如何在html中下載.lnk檔案