用qrcode.js一行代码即可生成当前URL二维码：new QRCode("container-id", window.location.href)，需确保脚本在</body>前加载、DOM就绪，并处理中文编码、像素密度、logo覆盖及实例销毁等细节以保障跨端兼容性。
怎么用纯 HTML + JS 生成当前网页的二维码并点击弹出
直接用 qrcode.js 配合轻量弹窗逻辑就能实现，不需要后端、不依赖服务端 API。核心是：用 JavaScript 获取当前页面 URL，喂给二维码生成库，再插入到一个带遮罩的 div 中显示。
推荐用 qrcode.js（轻量、无依赖、支持 Canvas 渲染），CDN 地址：https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js。别用已停止维护的 qrcode-generator，它不支持 ES 模块且对中文 URL 编码容易出错。
- 确保页面已加载完成再调用
QRCode.toCanvas()，否则可能报Cannot read property 'getContext' of null - URL 必须经过
encodeURIComponent()处理，否则含中文、#、? 的链接会生成无效码 - 弹窗
div建议设position: fixed+z-index: 9999，避免被第三方样式覆盖
点击按钮触发二维码生成和弹窗的完整代码片段
下面这段可以直接复制进 HTML 文件的 <body> 底部运行，无需构建工具：
<button id="qr-btn">分享二维码</button>
<div id="qr-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;text-align:center;padding-top:5vh;">
<div style="display:inline-block;background:#fff;border-radius:8px;padding:20px;">
<canvas id="qr-canvas" width="200" height="200"></canvas>
<div style="margin-top:12px;font-size:14px;color:#666;">扫码访问当前页面</div>
<button onclick="document.getElementById('qr-modal').style.display='none'" style="margin-top:16px;padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;">关闭</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script>
document.getElementById('qr-btn').onclick = function() {
const url = encodeURIComponent(window.location.href);
const canvas = document.getElementById('qr-canvas');
QRCode.toCanvas(canvas, url, { errorCorrectionLevel: 'M', width: 200 }, function (error) {
if (error) console.error('QR code error:', error);
});
document.getElementById('qr-modal').style.display = 'block';
};
</script>
注意：QRCode.toCanvas() 的第三个参数是配置对象，errorCorrectionLevel 设为 'M'（默认）即可平衡容错与密度；设 'L' 会缩小码尺寸但抗损性差，'H' 则体积大、生成慢，一般没必要。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
移动端点击空白处关闭弹窗的兼容写法
用户习惯点蒙层关闭，但直接给 #qr-modal 绑 click 会误触内部 canvas 或按钮。稳妥做法是监听事件目标，只在点击遮罩层（非子元素）时关闭：
document.getElementById('qr-modal').onclick = function(e) {
if (e.target === this) {
this.style.display = 'none';
}
};
别用 e.stopPropagation() 堵子元素事件——按钮和 canvas 需要正常响应。也别用 pointer-events: none 给 canvas，否则 iOS Safari 下 Canvas 渲染可能异常。
- iOS Safari 对
canvas的toDataURL()有严格同源限制，但toCanvas()是纯前端绘制，不受影响 - 某些微信内置浏览器会禁用
canvas的toDataURL()，但这里没调用它，所以安全 - 如果页面用了 PWA 或 Service Worker，确保当前 URL 可被二维码扫描识别（避免跳转到缓存页）
为什么不用 data URL 或 img 标签生成二维码
有人试过用 QRCode.toDataURL() 生成 base64 然后塞进 <img src="...">，看似简单，但实际问题多：
- base64 字符串极长（200×200 二维码约 10KB），内联到 HTML 会拖慢首屏解析
- 部分老版本 Android WebView 对超长
src截断，导致二维码残缺 -
toDataURL()在某些隐私模式下返回空字符串，而toCanvas()更稳定 - Canvas 可随时重绘（比如用户切 Tab 后回来刷新码），
img标签做不到
Canvas 方案体积小、可控性强，是当前最稳妥的选择。真要兼容极老环境（IE11），才考虑降级用 SVG 输出，但得额外引入 qrcode-svg 包，多数场景没必要。
