iT邦幫忙

0

html5 qr scan reader 掃描之後,如何跳轉?語法?

  • 分享至 

  • xImage

各位尊敬的大大們好!想請教一個問題,希望大大惠予賜教,不勝感激!

我的項目使用了一個QR掃描包 html5-qrcode

我現在已經可以在我的手機瀏覽器網頁,開啟相機掃描QRcode,並且alert 出掃描結果,但我想讓用戶點一下掃描結果,就能直接前往該網址,語法應該怎麼寫?

<div id="reader" width="600px"> </div>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script type="text/javascript">
  // This method will trigger user permissions
  Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length) {
      var cameraId = devices[0].id;
      const html5QrCode = new Html5Qrcode("reader");
      const qrCodeSuccessCallback = (decodedText, decodedResult) => {
        alert(decodedText);// 這裡已經可以正確彈出掃描結果,但點按無法跳轉
      };
      const config = {
        fps: 25,
        qrbox: {
          width: 350,
          height: 350
        }
      };
      html5QrCode.start({
        facingMode: "environment"
      }, config, qrCodeSuccessCallback);
    }
  }).catch(err => {
    // handle err
  });
</script>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1

alert要換掉。
改成UI式的彈窗。
這樣你就可以放進去A連結去觸發網頁了。

UI式的彈窗?大大!這我沒用過耶!能否指點何處有可供學習的資料?

我將 alert(decodedText); 改成
confirm(window.location = decodedText);
就可以了!謝謝熱心指教!

我要發表回答

立即登入回答