为什么我在将 javascript 连接到简单 html 时出错？

Question

我正在尝试将 szimek's signature pad 连接到我的简单 html 文档。我正在测试该程序，但无法在我的原子文本编辑器中运行它：

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      "https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"
    </script>

  </head>
  <h1>
  Please Sign
</h1>
<div class="wrapper">

  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>

  <script src="script.js"></script>
  </body>
</html>

script.js

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');

// Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});

我已将相同的代码放入 js fiddle，项目运行良好。我通过 CDN 连接，我在自己的项目检查中遇到的错误是：

script.js:1 Uncaught ReferenceError: SignaturePad is not defined
    at script.js:1

Answer 1

你的脚本标签有误。

<script type="text/javascript">
      JS CODE
</script>

此标记用于在您的页面中包含 JS 代码。 JS CODE 行旨在成为代码。如果你想引入外部脚本，上面的代码不是正确的方法。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js">
</script>

这里的关键是你的脚本标签需要指定你的浏览器可以找到脚本的位置。它使用 script 标记上的 src 属性来执行此操作。正如您目前所拥有的那样，您有一些包含单个字符串的代码，这并没有多大作用。

Answer 2

<script type="text/javascript">
  "https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"
</script>

不加载脚本 https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js 它是一个包含字符串 "https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"

的脚本

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"></script>

Answer 3

而不是：

<script type="text/javascript">
    "https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"
</script>

使用：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"></script>

为什么我在将 javascript 连接到简单 html 时出错？

Why am I having an error connecting javascript to simple html?

html

javascript

cdn