javascript 未加载到 HTML 文件中 - nodejs + http
Posted
技术标签:
【中文标题】javascript 未加载到 HTML 文件中 - nodejs + http【英文标题】：javascript not loading in HTML file - 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
【问题讨论】：
【参考方案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 行是什么？双重和三重检查它是否存在可能的错误。以上是关于javascript 未加载到 HTML 文件中 - nodejs + http的主要内容，如果未能解决你的问题，请参考以下文章
在Angular Js中重新加载后，如何将复选框（选中或未选中）从javascript控制器更新到html页面？
将 HTML 文件中的外部 javascript 文件从 android assets 文件夹加载到 WebView