JS动态加载qrcodejs库时QRCode未定义错误怎么解决

报错原因 #

你在LoadQRCode函数中仅声明了qrcode库的地址变量，没有实际执行加载库的逻辑，调用new QRCode时浏览器还未加载对应的依赖库，因此找不到QRCode构造函数。

方案1：全局预加载依赖（推荐，维护成本最低） #

不需要修改原有HTML的DOM结构，仅需提前在页面中引入依赖库，再调用初始化逻辑即可：

1. 在HTML的</body>闭合标签前引入qrcode库：

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

2. 修改外部JS中的LoadQRCode函数，移除无效的src变量声明：

function LoadQRCode() {
  // 保证DOM元素已渲染再执行逻辑
  const qrcodeEle = document.getElementById("qrcode")
  if(!qrcodeEle) return
  new QRCode(qrcodeEle, {
    text: "https://webisora.com",
    width: 128,
    height: 128,
    colorDark: "#5868bf",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });
}

3. 确保LoadQRCode函数在DOM渲染完成后触发，比如绑定到DOMContentLoaded或window.onload事件。

方案2：纯JS动态加载依赖（无需在HTML中额外加script标签） #

如果要求所有JS逻辑都封装在外部文件中，可以动态创建script标签加载依赖，等依赖加载完成后再执行初始化：

function LoadQRCode() {
  const qrcodeEle = document.getElementById("qrcode")
  if(!qrcodeEle) return
  // 避免重复加载库
  if(window.QRCode) {
    initQRCode(qrcodeEle)
    return
  }
  // 动态创建script标签加载库
  const script = document.createElement('script')
  script.src = "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"
  // 库加载完成后再初始化二维码
  script.onload = function() {
    initQRCode(qrcodeEle)
  }
  script.onerror = function() {
    console.error('二维码库加载失败')
  }
  document.body.appendChild(script)
  
  // 封装初始化逻辑
  function initQRCode(ele) {
    new QRCode(ele, {
      text: "https://webisora.com",
      width: 128,
      height: 128,
      colorDark: "#5868bf",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H
    })
  }
}

注意事项 #

两种方案都需要保证触发LoadQRCode时，页面上id="qrcode"的DOM元素已经完成渲染，否则会出现找不到节点的异常。

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