Question

我正在尝试从外部.js文件调用函数，但控制台返回错误并且未调用该函数。如何更正我的代码并能够正确调用该函数。

这是主要的.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>

这是.js文件：

var xyz = xyz || {};
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape = {
    Circle : function() {
        console.log('working');
    }
}

修改的

我在控制台中收到2个错误：

错误1

TypeError: canvas is null
window.onload = xyz.makeShape.Circle;

错误2

TypeError: xyz.makeShape is undefined
window.onload = xyz.makeShape.Circle;

Answer 1

改变这个：

window.onload = xyz.makeShape.Circle();

到此：

window.onload = xyz.makeShape.Circle;

window.onload需要设置为函数引用，而不是调用函数的结果。

在加载DOM之前，您也无法从<head>部分执行这两行：

var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');

您需要在加载DOM后执行这些操作。这样做有多种可能的策略。您已经拥有的最简单的方法是在onload处理程序中执行它们，因为您知道DOM已经加载到那里。您还可以移动脚本标记，将外部.js文件加载到<body>部分的末尾，并且DOM已经准备就绪，然后运行该js文件。

Answer 2

您只需要使用js标记添加<script>文件 - 无论是在页眉还是页脚中。

<script type="text/javascript" src="js/yourjsfile.js"></script>

现在您可以从该脚本调用函数，就像它们在当前文件中一样

修改

如果您确定该文件已经包含在内（首先确保您的路径正确），接下来您需要检查控制台是否存在可能由于包含的文件引起的错误。您提供的代码看起来是正确的。

Answer 3

外部js：

var xyz = xyz || {};
xyz.makeShape = {
    Circle: function () {
        console.log('working');
    }
}

内部js：

window.onload = function () {
    var canvas = document.getElementById('xyz');
    var context = canvas.getContext('2d');
    xyz.makeShape.Circle();

}

经过测试和工作

从外部JS调用函数

3 个答案: