如何用window.open()打开新窗口并在其中运行函数生成条形码

你的代码存在三个核心问题，导致无法在新窗口生成条形码：

1. 新窗口未加载JsBarcode依赖库，缺少生成条形码的必要工具
2. 调用JsBarcode时默认在父页面DOM中查找元素，而非目标新窗口
3. document.write中使用了HTML转义实体，导致SVG标签无法正确渲染

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Generate Barcode</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
</head>
<body>
  <form>
    Enter Number: <input name="packageID" type="text" onchange="doAll(this.value)">
  </form>

  <script>
    function doAll(value) {
      // 打开新窗口
      const newWin = window.open('', '_blank');
      // 写入完整HTML结构，包含JsBarcode依赖
      newWin.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Barcode</title>
          <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
        </head>
        <body>
          <svg id="barcode"></svg>
        </body>
        </html>
      `);
      // 等待新窗口DOM和脚本加载完成后生成条形码
      newWin.onload = function() {
        generateBar(newWin, value);
      };
    }

    function generateBar(targetWindow, value) {
      // 明确指定操作新窗口内的DOM元素
      JsBarcode(targetWindow.document.getElementById('barcode'), value, {
        format: 'code128',
        displayValue: true,
        width: 1.8,
        height: 60
      });
    }
  </script>
</body>
</html>

关键修改说明 #

• 新窗口引入依赖：在新窗口的HTML结构中添加JsBarcode脚本，确保新环境具备生成条形码的能力
• 等待加载完成：通过newWin.onload事件，确保新窗口的DOM和脚本完全加载后再调用生成方法，避免因资源未就绪导致的错误
• 指定DOM上下文：将新窗口对象传入生成函数，明确操作新窗口内的SVG元素，而非父页面的DOM
• 修正HTML写入：使用模板字符串直接写入正常HTML标签，移除转义实体，保证SVG元素能被正确解析

内容的提问来源于stack exchange，提问作者Ou-Kid