javascript 未加载到 HTML 文件中 - nodejs + http答案

【问题标题】：javascript not loading in HTML file - nodejs + httpjavascript 未加载到 HTML 文件中 - nodejs + http
【发布时间】：2019-03-06 04:35:44
【问题描述】：

免责声明：我是 node.js 的新手，所以我认为这个问题有一个非常基本的答案。

我在 Windows 上使用 node.js，通过 http 模块生成一个静态页面，其内容从 js 文件生成。

服务器文件（server.js）：

var http = require('http');
var fs = require('fs');

fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err;
    }
    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(8080);
});

HTML 文件 (index.html)：

<!DOCTYPE html>
<html>

<body>

<div id="div1">
  <p id="p1">This is a static paragraph.</p>
</div>

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

</body>
</html>

JS 文件 (start.js)

var para = document.createElement("p");
var node = document.createTextNode("This text is loaded from a js file.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

当我直接加载 index.html 时，我得到以下输出：

这是一个静态段落。

此文本是从 js 文件加载的。

^^ 这是我想要的输出。

问题： 但是，当我使用 node.js 并运行 server.js 时，start.js > 内容不加载。我明白了：

这是一个静态段落。

任何帮助将不胜感激。

仅供参考，我的文件夹结构

/
- node_modules
-- http
-- fs
- index.html
- server.js
- start.js

【问题讨论】：

标签： javascript html node.js server

【解决方案1】：

您为文件获取的每个请求 url 都需要由节点服务器处理。我建议使用 Express.js，因为这样可以轻松处理不同的 url 路径，并且可以直接提供文件。但如果你想要一个纯基于 node.js 的实现，请查看下面的代码。

要从服务器提供文件，您必须将 server.js 修改为如下内容：

var http = require('http');
var fs = require('fs');

http.createServer(function(request, response) {
    if(request.url=='/'){
        fs.readFile('./index.html', function (err, html) {
             if (err) {
                  res.send(500,{error: err});
             }
             response.writeHeader(200, {"Content-Type": "text/html"});
             response.write(html);
             response.end();
        });
    } else if(request.url=='/start.js'){
        fs.readFile('./start.js', function (err, jsFile) {
             if (err) {
                  res.send(500,{error: err});
             }
             response.writeHeader(200, {"Content-Type": "text/javascript"});
             response.write(jsFile);
             response.end();
        });
    }

}).listen(8080);

希望这会有所帮助:)

【讨论】：

我试过了，页面现在无休止地加载。我怀疑这是因为服务器找不到/start.js。我将进一步调查。
@Wronski 尝试调试以查找您在获取 start.js 时获得的 url，我可能错过了一些东西。如果你得到它，请随时提出修改建议。
您的代码是正确的。我有另一个导致无休止加载的 .js 文件。一旦我删除了对该文件的引用，加载的代码显示：This is a static paragraph. This text is loaded from a js file.

【解决方案2】：

您添加子节点的逻辑似乎没问题。

我认为您应该尝试将src="start.js" 更改为src="./start.js" 或src="/start.js"，以确保您正确引用了路径。在start.js 中添加console.log() 语句以确保它正在加载。

编辑：确保您将文件托管在您的服务器上。您可以添加 express 或 connect 之类的内容来提供帮助。

要使用连接，请在您的项目目录中运行 npm install --save connect。

var connect = require('connect'),
directory = '/path/to/Folder'; // probably just '/' for all your files

connect()
  .use(connect.static(directory))
  .listen(80);

console.log('Listening on port 80.');

Refer to their docs 获取完整说明和更多使用http 的示例。

【讨论】：

我尝试了这些替代方法并且正确引用了路径，但是由于console.log() 没有生成任何日志，因此文件未加载。我相信这个问题与@BharathRao 提到的有关，即“文件不在服务器上”
是的，那一定是问题所在。我用您可以尝试的另一种方法编辑了我的帖子。
我在expressjs.com/en/starter/static-files.html 上按照以下说明尝试了您的解决方案，即将start.js 放在/public 文件夹中，它成功了！谢谢。
很高兴你能成功！ express 通常也是我的首选；）

【解决方案3】：

我认为它无法找到 js，在引用 js 之前，请确保它在服务器上，并且可以从服务器加载它，例如：'http://127.0.0.1:8000/start.js'。我们所有的静态文件，比如img、css、js都应该放在服务器上，然后才会被引用。

【讨论】：

我怀疑该文件不在“服务器上”，因为当我加载 localhost:8080/start.js 时，我在 chrome 控制台中收到以下错误 start.js:1 Uncaught SyntaxError: Unexpected token。如何将文件添加到服务器？
如果 start.js 在第 1 行抛出错误，那么它在服务器上，你只是在第 1 行有一个语法错误。你的那个文件的第 1 行是什么？双重和三重检查它是否存在可能的错误。