how to include external script in html file that is used as response in nodejs server

795 views Asked by At

The title may be very confusing, so I will explain with my code This is my Nodejs server ("server.js") code:

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

var fserver = function (req, res) {
  fs.readFile('hieu.html', function(err, data) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });
};
http.createServer(fserver).listen(8080);

And this is my hieu.html file:

<html>
    <body>
        <script src="check.js">
        </script>
        <p> a line </p>
        <script>
                var table = document.createElement("table");
                for (var i = 0; i < 10; i++) {
                    var tr = document.createElement('tr');
                    for (var j = 0; j < 10; j++) {
                        var td = document.createElement("BUTTON");
                    if(i%2 == j%2) td.appendChild(document.createTextNode("B"));
                    else td.appendChild(document.createTextNode("W"));
                        tr.appendChild(td);
                    }
                    table.appendChild(tr);
                }
            document.body.appendChild(table);
        </script>
        <p> hieudzvkl </p>
    </body>
</html>

My check.js file is simply a line of code that write number 5 to the document.

If I simply run the hieu.html file, I will get:

enter image description here

Yet, if I run the ("server.js") code, I will get:

enter image description here

As you can see, the script src ="check.js" does not appear in res.

I don't understand why does this happen. Is there any way I can solve this problem? Thanks in advance!

1

There are 1 answers

0
MatthewG On BEST ANSWER

When you are retrieving the html file from nodeJS, the browser is pointed to a location at a webserver (in this case it appears hosted at port 8080). Any other resources that the html file references will also be fetched from that location, unless they are absolute URLs. So what is happening here is that your browser is trying to fetch check.js from the same location as the html file, in other words, from the webserver. You must update your nodeJS code so that it understands how to serve both the hieu.html file, and also the check.js file.

Consider adding logic similar to the following to your server.js code:

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

var fserver = function (req, res) {
  if (req.url === '/check.js') {
    // Insert Code here, such as...
    fs.readFile('check.js', function(err, data) {
      res.writeHead(200, {'Content-Type': 'text/javascript'});
      res.write(data);
      res.end();
    });
  } else {
    fs.readFile('hieu.html', function(err, data) {
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.write(data);
      res.end();
    });
  }
};
http.createServer(fserver).listen(8080);