为什么我将 javascript 连接到简单 html 时出现错误？
2019-12-18
169
我试图将 szimek 的签名板 连接到我的简单 html 文档。我正在测试该程序，但无法在我的 atom 文本编辑器中运行：
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/[email protected]/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
3个回答
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"
</script>
未加载脚本
https://cdn.jsdelivr.net/npm/
[email protected]
/dist/signature_pad.min.js
它是一个包含字符串
“https://cdn.jsdelivr.net/npm/
[email protected]
/dist/signature_pad.min.js"
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
2019-12-18
您的脚本标记错误。
<script type="text/javascript">
JS CODE
</script>
此标记用于将 JS 代码包含在您的页面中。行
JS CODE
旨在
成为
代码。如果您想引入外部脚本，上述代码不是正确的方法。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js">
</script>
这里的关键是您的脚本标记需要指定浏览器可以找到脚本的位置。它使用
script
标记上的
src
属性来执行此操作。正如您目前所拥有的，您有一些包含单个字符串的代码，这并没有多大用处。
2019-12-18
代替：
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"
</script>
使用：
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
Jonathan van de Groep
2019-12-18