onload js调用不与节点一起工作

时间：2016-07-26 10:24:53

标签： javascript node.js

我开始学习node.js，现在我只是尝试用节点执行我的旧无节点应用程序。在这个应用程序中，我有一个html页面，其中一个主体调用onload js函数。它运作得很好。

现在我有一个节点app：app.js，简单如下：

var express = require ('express');
var app = express ();
app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ketcher'));
app.use(express.static(__dirname +'/ChemAlive_JS'));
app.get('/', function(req, res) {

    res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/ChemAlive_Interface.html');
});

app.listen(8080);

在.html中我还有：

<body onload="ketcher.init();">

但我想要加载的功能根本不再加载。

有任何线索吗？

由于

1 个答案:

答案 0 :(得分：1)

您没有在问题中提供大量信息，但根据您提供的信息，我可以提供一些建议：

建议

而不是添加大量express.static次使用：

app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ketcher'));
app.use(express.static(__dirname +'/ChemAlive_JS'));

将您要提供的文件（和目录）放入一个目录，例如名为static，并使用express.static一次：

app.use(express.static(__dirname + '/static'));

或更好，使用path模块：

app.use(express.static(path.join(__dirname, 'static')));

您首先需要path模块：

var path = require('path');

现在，不要使用：

为'/'路由提供单个文件 
app.get('/', function(req, res) {
    res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/ChemAlive_Interface.html');
});

只需将该文件作为index.html放入static目录即可，因此它将由express.static中间件自动提供。

原理

目前配置它的方式是，例如每个人都可以下载您的节点应用程序 - app.js及其所有配置甚至子模块等。

此外，通过多次使用express.static中间件，我怀疑您不确定这些目录中的文件将如何映射到URL。

拥有静态文件的一个位置可以轻松验证任何脚本标记是否具有正确的路径等。

我的猜测

您没有提供足够的信息以确定，但我的猜测是主H​​TML文件的JavaScript文件未正确加载，但您提供的信息不足以确定。

您可以在浏览器中打开开发人员工具控制台，并在控制台打开时重新加载页面并查看错误。

我怀疑正在运行ketcher.init()方法，但方法或ketcher对象未定义，因为某些<script>标记无法加载。

实施例

遵循我的建议后的完整示例会更简单：

var path = require('path');
var express = require ('express');
var app = express();
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8080);

也许我会添加一些输出来看看发生了什么：

var path = require('path');
var express = require ('express');
console.log('starting app.js');
var app = express();
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8080, function () {
    console.log('listening on http://localhost:8080/');
});

现在，您将拥有可以在一个位置提供给浏览器的所有文件：在此示例中的static目录中。

工作应用

您可以在GitHub上看到我正在运行的Express应用程序服务静态文件的示例：

在此示例中，静态文件的目录名为html，但只要与使用express.static中间件的方式一致，您就可以按照自己的意愿调用它。

您可以从此示例项目开始，只需将您自己的文件放入告知express.static的目录中，以查找要提供的文件。

您还可以更改端口号以满足您的需求。

使用和不使用Express的更多示例，以及更好的解释：

更多提示

如果页面正在等待加载某些资源，则可能不会触发onload回调。

要查看您的onload回调是否已触发，您可以将其更改为：

<body onload="alert('onload callback fired');">

ketcher对象也可能未初始化，或者可能没有init()方法。加载页面后，您可以打开JavaScript控制台并尝试手动运行该方法，看看它是否会在被触发时起作用：

ketcher.init();

您还可以尝试以下命令：

console.dir(ketcher.init);
console.dir(ketcher);
console.log(typeof ketcher.init);
console.log(typeof ketcher);

查看ketcher对象是否包含它应该包含的内容。

即使GET localhost:8080/ketcher.js提供200 OK状态，它仍然可以加载一些其他不可用的资源，或者对于提供res.sendFile()文件的代码非常常见（尽管此处不太可能） case），它可以提供HTML而不是JavaScript，并导致<字符出现隐秘的解析错误 - 请参阅此问题，例如：

其他相关答案：

相关问题
最新问题