本文介绍如何修改 html5-qrcode 的默认行为，将扫描成功后的 alert 提示替换为自动重定向到 QR 码中包含的 URL，实现一键扫码跳转，适用于登录、活动页跳转等场景。
本文介绍如何修改 html5-qrcode 的默认行为，将扫描成功后的 `alert` 提示替换为自动重定向到 qr 码中包含的 url，实现一键扫码跳转，适用于登录、活动页跳转等场景。
在基于 html5-qrcode 实现的网页端 QR 扫码器中，默认的 onScanSuccess 回调仅通过 alert() 显示解码内容。若希望用户扫码后立即跳转至 QR 码中的链接（例如 https://example.com），只需将 alert(...) 替换为浏览器原生的页面重定向逻辑。
✅ 正确实现方式
修改 script.js 中的 onScanSuccess 回调函数，使用 window.location.href = decodeText 触发跳转：
domReady(function () {
function onScanSuccess(decodeText, decodeResult) {
// ✅ 安全跳转：仅当解码内容是合法 URL 时才重定向
try {
const url = new URL(decodeText);
window.location.href = url.toString();
} catch (e) {
console.warn("Scanned content is not a valid URL:", decodeText);
alert("扫码内容不是有效网址，无法跳转。\n内容：" + decodeText);
}
}
const htmlScanner = new Html5QrcodeScanner(
"my-qr-reader",
{ fps: 10, qrbox: 250 } // ⚠️ 注意：原代码中 'qrbos' 是拼写错误，应为 'qrbox'
);
htmlScanner.render(onScanSuccess);
});⚠️ 关键注意事项
-
URL 校验必不可少：直接执行
window.location.href = decodeText存在安全风险（如javascript:alert(1)或恶意协议）。务必先用new URL()构造校验，确保协议为http:/https:（或按需允许mailto:、tel:等）。 -
拼写修正：原示例中
{ fps: 10, qrbos: 250 }的qrbos是错误参数名，正确选项为qrbox（控制扫描框尺寸）。 -
用户体验优化：可添加加载提示或禁用重复扫描（如调用
htmlScanner.clear()后跳转），避免多次触发。 -
移动端兼容性：
window.location.href在所有现代浏览器（含 iOS Safari、Android Chrome）中均可靠支持，无需额外 polyfill。
? 总结
只需两步即可完成自动跳转改造：
- 将
alert(...)替换为带 URL 校验的window.location.href = ...； - 修正配置项拼写（
qrbox）并加入基础异常处理。
该方案轻量、稳定、符合 Web 安全最佳实践，可快速集成进生产项目，完美满足“扫码即达”的交互需求。
立即学习“前端免费学习笔记（深入）”；
