如何在使用html + javascript和节点的情况下显示警告框
[英]how to display alert box in using html+javascript and node
问题描述
I am running node project with html and javascript. 
我正在用html和javascript运行节点项目。 How can I display the alert box in html. 如何在html中显示警报框。
My html (index.html) 我的html（index.html）
<!DOCTYPE html>
<html>
<head>
<script src="./watch.js"></script>
</head>
<body onload="showBox()">
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
watch.js watch.js
function showBox(){
alert("this is alert box");
}
server.js server.js
var http = require('http');
var fs = require('fs');
const PORT=8080;
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(PORT);
});
Error 错误
3 个解决方案
解决方案1
2 已采纳 2019-08-02 03:32:42
I think that the problem is that you are not telling nodeJS where your statics files are. 我认为问题在于您没有告诉nodeJS静态文件在哪里。 For me, the simplest way is to set the server with Express 对我而言，最简单的方法是使用Express设置服务器
$ npm install express
And then setting up the server and where your static directory is: 然后设置服务器以及您的静态目录在哪里：
var express = require('express');
var app = express();
//setting middleware
app.use(express.static(__dirname + 'public')); //Serves resources from public folder
var server = app.listen(5000);
There are other ways to doit using Native NodeJS, here are some resources: 还有其他使用Native NodeJS的方法，以下是一些资源：
Nodejs.org - How to serve static files Nodejs.org-如何提供静态文件
Also, you can write the script directly in your html file: 另外，您可以直接在html文件中编写脚本：
<!DOCTYPE html>
<html>
<head>
<script>
function showBox(){
alert("this is alert box");
}
</script>
</head>
<body onload="showBox()">
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
解决方案2
1 2019-08-02 03:27:09
Your server is only ever returning index.html , no matter what path is requested. 无论请求什么路径，您的服务器只会返回index.html 。 So, your watch.js is never loaded. 因此，您的watch.js从未加载。 The contents of index.html are returned instead of watch.js . 返回index.html的内容，而不是watch.js 。
Either handle the other paths in your server code, or use something like Express.static, which does this for you. 处理服务器代码中的其他路径，或使用Express.static之类的东西为您完成此操作。
解决方案3
1 2019-08-02 03:29:47
Your http server is only outputting the index.html file. 您的http服务器仅输出index.html文件。 You need to either put all your client-side code in that file, or edit your server to load the watch.js file and make it able to send either page. 您需要将所有客户端代码都放入该文件中，或者编辑服务器以加载watch.js文件并使其能够发送任一页面。
The first is simpler. 第一个比较简单。 Here's a basic example for the second. 这是第二个基本示例。 Most browsers will assume the mime-type by the extention. 大多数浏览器会根据扩展假定为mime类型。
Also, change your html for the script name from "./watch.js" to just "watch.js". 另外，将脚本名称的html从“ ./watch.js”更改为“ watch.js”。
I simplified this down to be easier to understand... also const is deprecated and wont work on newer versions of node. 我将其简化为更易于理解... const也已弃用，不适用于较新版本的node。
Specifying the mime header like you did is more compatible (Chrome and Firefox will assumebased on file extension, but for example Opera does not, or didnt used to). 像您一样指定mime标头更兼容（Chrome和Firefox将假定基于文件扩展名，但Opera并不，或曾经不习惯）。
var http = require('http');
var fs = require('fs');
var doc = {}
doc['/index.html'] = fs.readFileSync('index.html');
doc['/watch.js'] = fs.readFileSync('watch.js');
var server = (request, response)=>{
response.end(doc[req.url]);
}
http.createServer(server).listen(8080);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.