用HTML代码快速生成网页二维码展示小弹窗-html教程-PHP中文网

用qrcode.js一行代码即可生成当前url二维码：new qrcode("container-id", window.location.href)，需确保脚本在前加载、dom就绪，并处理中文编码、像素密度、logo覆盖及实例销毁等细节以保障跨端兼容性。

用html代码快速生成网页二维码展示小弹窗

怎么用纯 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 文件的底部运行，无需构建工具：

<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' 则体积大、生成慢，一般没必要。

html-to-pptx-converter

使用 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 包，多数场景没必要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！