如何修改html5-qrcode扫码代码实现扫码后自动跳转URL

我用了geeksforgeeks提供的html5-qrcode扫码代码，当前扫码成功后会弹出包含二维码URL的提示框，想改成扫码成功后自动跳转到该URL，项目几天后截止，自己修改没头绪，特此求助。原代码如下：

原Index.html代码 #

<!-- Index.html file -->
<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet"
        href="style.css"> 
    <title>QR Code Scanner / Reader 
    </title> 
</head> 

<body> 
    <div class="container"> 
        <h1>Scan QR Codes</h1> 
        <div class="section"> 
            <div id="my-qr-reader"> 
            </div> 
        </div> 
    </div> 
    <script
        src="https://unpkg.com/html5-qrcode"> 
    </script> 
    <script src="script.js"></script> 
</body> 

</html>

原script.js代码 #

// script.js file 

function domReady(fn) { 
    if ( 
        document.readyState === "complete" || 
        document.readyState === "interactive"
    ) { 
        setTimeout(fn, 1000); 
    } else { 
        document.addEventListener("DOMContentLoaded", fn); 
    } 
} 

domReady(function () { 

    // If found you qr code 
    function onScanSuccess(decodeText, decodeResult) { 
        alert("You Qr is : " + decodeText, decodeResult); 
    } 

    let htmlscanner = new Html5QrcodeScanner( 
        "my-qr-reader", 
        { fps: 10, qrbos: 250 } 
    ); 
    htmlscanner.render(onScanSuccess); 
});

修改方案 #

只需要修改script.js中的onScanSuccess函数，替换弹窗逻辑为跳转逻辑，同时停止扫码避免重复触发：

1. 把alert替换为window.location.href = decodeText;，实现页面跳转
2. 调用htmlscanner.clear();停止扫码，防止同一二维码被多次识别重复跳转
3. 可选：增加URL有效性判断，避免非URL内容导致跳转错误

修改后的script.js代码：

// script.js file 

function domReady(fn) { 
    if ( 
        document.readyState === "complete" || 
        document.readyState === "interactive"
    ) { 
        setTimeout(fn, 1000); 
    } else { 
        document.addEventListener("DOMContentLoaded", fn); 
    } 
} 

domReady(function () { 
    // 声明scanner变量，让onScanSuccess可以访问
    let htmlscanner;

    // 扫码成功后的处理函数
    function onScanSuccess(decodeText, decodeResult) { 
        // 可选：判断是否为有效URL
        try {
            new URL(decodeText);
            // 停止扫码
            htmlscanner.clear();
            // 跳转到扫码得到的URL
            window.location.href = decodeText;
        } catch (e) {
            alert("扫描内容不是有效URL");
        }
    } 

    htmlscanner = new Html5QrcodeScanner( 
        "my-qr-reader", 
        { fps: 10, qrbos: 250 } 
    ); 
    htmlscanner.render(onScanSuccess); 
});

说明 #

• 必须把htmlscanner变量提升到domReady函数的顶层，让onScanSuccess可以调用clear()方法停止扫码
• 增加的URL有效性判断是为了避免扫描非URL内容时出现跳转错误，不需要的话可以去掉这部分逻辑
• 修改后扫码到有效URL会立即停止扫描并跳转到目标地址

内容的提问来源于stack exchange，提问作者neongmr