Html 从外部JS调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15721934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling function from external JS
提问by Samarth Wahal
I am trying to call a function from an external .js file but the console is returning errors and the function is not being called. How do I correct my code and be able to call the function properly.
我正在尝试从外部 .js 文件调用函数，但控制台返回错误并且未调用该函数。如何更正我的代码并能够正确调用该函数。
Here is the main .html file:
这是主要的 .html 文件：
<html>
<head>
<script type="text/javascript" src="xp.js">
</script>
<script type="text/javascript">
window.onload = xyz.makeShape.Circle();
</script>
</head>
<body>
<canvas id="xyz" width="600" height="600"></canvas>
</body>
</html>
And here is the .js file:
这是 .js 文件：
var xyz = xyz || {};
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape = {
Circle : function() {
console.log('working');
}
}
EDIT
I am getting 2 errors in the console:
Error 1
编辑
我在控制台中收到 2 个错误：
错误 1
TypeError: canvas is null
window.onload = xyz.makeShape.Circle;
Error 2
错误 2
TypeError: xyz.makeShape is undefined
window.onload = xyz.makeShape.Circle;
回答by jfriend00
Change this:
改变这个：
window.onload = xyz.makeShape.Circle();
to this:
对此：
window.onload = xyz.makeShape.Circle;
window.onloadneeds to be set to a function reference, not to the results of calling a function.
window.onload需要设置为函数引用，而不是调用函数的结果。
You also can't do these two lines from the <head>section before the DOM is loaded:
<head>在加载 DOM 之前，您也不能从该部分执行这两行：
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
You need to execute those after the DOM has been loaded. There are multiple possible strategies for doing that. The easiest for what you already have would be to execute them in your onload handler since you know the DOM is already loaded there. You could also move the script tag that loads your external .js file to the end of the <body>section and the DOM will already be ready then when that js file runs.
您需要在加载 DOM 后执行这些操作。有多种可能的策略可以做到这一点。对于您已经拥有的最简单的方法是在您的 onload 处理程序中执行它们，因为您知道 DOM 已经在那里加载。您还可以将加载外部 .js 文件的脚本标记移动到该<body>部分的末尾，然后当该 js 文件运行时 DOM 就已经准备好了。
回答by What have you tried
You will just need to include the jsfile using the <script>tags - either in your header or footer.
您只需要js使用<script>标签包含文件- 无论是在页眉还是页脚中。
<script type="text/javascript" src="js/yourjsfile.js"></script>
Now you can call functions from that script as if they were in the current file
现在您可以从该脚本调用函数，就像它们在当前文件中一样
Edit
编辑
If you're sure that the file is already included (first make sure you've got the path right) next you need to check your console from errors that may be arising from the included file. The code you've supplied looks right.
如果您确定已包含该文件（首先确保路径正确），接下来您需要检查控制台是否存在可能由包含的文件引起的错误。您提供的代码看起来不错。
回答by Daniel
External js:
外部js：
var xyz = xyz || {};
xyz.makeShape = {
Circle: function () {
console.log('working');
}
}
Internal js:
内部js：
window.onload = function () {
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape.Circle();
}
Tested and works
测试和工作
