Javascript не загружается в файл HTML - nodejs + http
Отказ от ответственности: я новичок в node.js, поэтому я предполагаю, что на этот вопрос есть очень простой ответ.
Я использую 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 напрямую, я получаю следующий результат:
This is a static paragraph.
This text is loaded from a js file.
^^ это мой желаемый результат.
Проблема: Однако, когда я использую node.js и запускаю server.js, содержимое start.js не загружается. Я получил:
This is a static paragraph.
Любая помощь будет оценена по достоинству.
К вашему сведению, моя структура папок
/
- node_modules
-- http
-- fs
- index.html
- server.js
- start.js
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Кажется, ваша логика добавления дочерних узлов в порядке.
Я думаю, вам следует попробовать изменить свой src = "start.js" на src = "./start.js" или src = "/start.js", просто чтобы убедиться, что вы правильно указываете путь. Добавьте оператор console.info() в свой start.js, чтобы убедиться, что он загружается.
Обновлено: Убедитесь, что вы размещаете свой файл на своем сервере. Вы можете добавить что-нибудь вроде 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.info('Listening on port 80.');
Обратитесь к их документации для полных инструкций и других примеров использования http.
Да, тогда это должно быть проблемой. Я отредактировал свой пост другим методом, который вы могли попробовать.
Я попробовал ваше решение, выполнив следующие инструкции по expressjs.com/en/starter/static-files.html, т.е. поместив start.js в папку /public, и это сработало! Спасибо.
Рад, что у вас все получилось! express тоже обычно мой выбор;)
Я думаю, что он не может найти js. Прежде чем ссылаться на js, убедитесь, что он находится на сервере, и вы можете загрузить его с сервера, например: 'http://127.0.0.1:8000/start.js'. Все наши статические файлы, такие как img, css, js, должны быть размещены на сервере, только тогда на них будет сделана ссылка.
Я подозреваю, что файл находится не «на сервере», потому что, когда я загружаю локальный: 8080 / start.js, я получаю следующую ошибку start.js:1 Uncaught SyntaxError: Unexpected token в консоли Chrome. Как мне добавить файл на сервер?
Если start.js выдает ошибку в строке 1, значит, он находится на сервере, у вас просто синтаксическая ошибка в строке 1. Какая у вас строка 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 попробуйте отладить, чтобы узнать, какой URL-адрес вы получаете при загрузке для start.js, возможно, я что-то пропустил. Не стесняйтесь предлагать редактирование, если оно у вас есть.
ваш код был правильным. У меня был другой файл .js, который вызывал бесконечную загрузку. Как только я удалил ссылку на этот файл, загрузился код, показывающий: This is a static paragraph. This text is loaded from a js file.
Я пробовал эти альтернативы, и путь указан правильно, однако файл не загружается, поскольку
console.info()не ведет журналов. Я считаю, что проблема связана с тем, что упомянул @BharathRao, то есть "файла нет на сервере"