onload js调用不与节点一起工作 [英] onload js call not working with node

查看：173 发布时间：2019/2/18 12:03:11 javascript node.js

本文介绍了onload js调用不与节点一起工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am starting to learn node.js, for now I am just trying to execute my old none node app with node. In this app, I have a html page with a body calling an onload js function. It's working just fine.

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

Now I have a a node app: app.js, simple as that:

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();">

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

but the function I want to load is not load at all anymore.

任何线索？

谢谢

推荐答案

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

You have not provided a lot of info in the question but from what you provide I can have few suggestions:

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

将您希望提供的文件（和目录）放入一个目录，例如：叫静态，并使用 express.static 一次：

put those files (and directories) that you want to be served into one directory, e.g. called static, and use express.static once:

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

或更好，使用路径模块：

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

您需要首先要求路径模块with：

you need to require the path module first with:

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 中间件提供。

just put that file into the static directory as index.html so it will be served by the express.static middleware automatically.

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

The way you have it configured currently, is that e.g. everyone can download your Node application - app.js with all of its configuration and even submodules etc.

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

Also, by using the express.static middleware many times I suspect that you are not sure how the files in those directories will be mapped to URLs.

有一个静态文件位置可以很容易地验证任何脚本标签是否有正确的路径等。

Having a one place for static files makes it easy to verify whether any script tags have correct paths etc.

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

You don't provide enough info to be sure but my guess is that the JavaScript files for the main HTML file are not loaded correctly but you provide not enough info to be sure.

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

You can open the developer tools console in the browser and reload the page while the console is open and see for errors.

我怀疑正在运行 ketcher.init（）方法，但方法或 ketcher 对象未定义，因为某些< script> 标签失败了o加载。

I suspect that the ketcher.init() method is being run but either the method, or the ketcher object is undefined, because some <script> tags failed to be loaded.

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

The full example after following my suggestions would be much simpler:

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

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

Maybe I would add some output to see what's going on:

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 此示例中的目录。

And now you will have all files that can be served to the browser in one place: in the static directory in this example.

您可以在GitHub上看到我的工作Express应用程序提供静态文件的示例：

You can see my example of a working Express application serving static files on GitHub:

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

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

在这个例子中，静态文件的目录叫做 html ，但你可以按你想要的方式调用它，只要它是一致的如何使用 express.static 中间件。

In this example the directory for static files is called html but you can call it how you want, as long as it's consistent with how you use the express.static middleware.

你可以从这个示例项目开始，然后自己动手文件到 express.static 的目录中被告知寻找要服务的文件。

You can start from this example project and just put your own files into the directory where express.static is told to look for files to serve.

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

You can also change the port number to match your needs.

更多sa的例子我有没有快递，加上更好的解释：

More examples to do the same with and without Express, plus better explanation:

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

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

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

The onload callback may not be fired if the page is waiting for some resources to load.

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

To see if your onload callback is firing you can change it to:

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

此外， ketcher 对象可能未初始化或者它可能没有 init（）方法。加载页面后，您可以打开JavaScript控制台并尝试手动运行该方法，以查看它是否会被触发：

Also the ketcher object may be not initialized or it may not have the init() method. After the page is loaded you can open the JavaScript Console and try running the method manually to see if it would work if it was fired:

ketcher.init();

您还可以尝试以下命令：

You can also try commands like:

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

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

to see if the ketcher object contains what it should.

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

Even if the GET localhost:8080/ketcher.js gives a 200 OK status, it can still load some other resources that are not available or, as is very common with code that serve files with res.sendFile() (though unlikely in this case), it can serve HTML instead of JavaScript and result in a cryptic parse error on the < character - see this question for example: