javascript - onload js 调用不适用于 Node-6ren

javascript - onload js 调用不适用于 Node

转载作者：行者123 更新时间：2023-12-03 06:27:26

我开始学习node.js，现在我只是尝试使用node执行我的旧的none node应用程序。在此应用程序中，我有一个 html 页面，其正文调用 onload js 函数。它运行得很好。

现在我有一个 Node 应用程序: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();">

但是我想要加载的函数根本就不再加载了。

有什么线索吗？

谢谢

最佳答案

您在问题中没有提供很多信息，但根据您提供的信息，我可以提供一些建议:

建议

而不是添加大量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');
});

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

基本原理

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

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

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

我的猜测

您没有提供足够的信息来确定，但我的猜测是主 HTML 文件的 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 应用程序示例:

https://github.com/rsp/node-express-static-example

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

您可以从这个示例项目开始，将您自己的文件放入 express.static 所在的目录中被告知寻找要提供的文件。

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

更多使用和不使用 Express 执行相同操作的示例，以及更好的解释:

https://github.com/rsp/node-static-http-servers

更多提示

如果页面正在等待加载某些资源，则可能不会触发 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() 提供文件的代码中很常见(虽然在这种情况下不太可能)，它可以提供 HTML 而不是 JavaScript，并导致 < 上出现神秘的解析错误。性格 - 例如参见这个问题: