Wie füge ich Javascript auf der Clientseite von node.js ein?

Lesezeit: 4 Minuten

Ich bin ein Anfänger von node.js und Javascript.

Ich möchte eine externe Javascript-Datei in den HTML-Code einbinden. Hier ist der HTML-Code “index.html”:

<script src="https://stackoverflow.com/questions/17722407/simple.js"></script>

Und hier ist der Javascript-Code “https://stackoverflow.com/questions/17722407/simple.js”:

document.write('Hello');

Wenn ich die “index.html” direkt in einem Webbrowser (z. B. Google Chrome) öffne, funktioniert es. (“Hallo”-Nachricht sollte auf dem Bildschirm angezeigt werden.)

Als ich jedoch versuchte, die „index.html“ über den HTTP-Server node.js zu öffnen, funktionierte es nicht. Hier ist die node.js-Datei “app.js”:

var app = require('http').createServer(handler)
  , fs = require('fs')

app.listen(8000);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

(“index.html”, “https://stackoverflow.com/questions/17722407/simple.js” und “app.js” befinden sich im selben Verzeichnis.) Ich habe den http-Server gestartet. (durch “bash$node app.js”) Danach habe ich versucht, “localhost:8000” zu verbinden. Aber die Nachricht “Hallo” wird nicht angezeigt.

Ich denke, die “index.html” konnte die “https://stackoverflow.com/questions/17722407/simple.js” nicht auf dem http-Server enthalten.

Wie soll ich es machen?

Benutzer-Avatar
Samuel

Alexander hat Recht. Ich werde versuchen, seine Antwort näher zu erläutern.

Es kommt vor, dass Sie einen “Router” für Ihre Anfragen schreiben müssen. Unten ist ein einfacher Weg, um es zum Laufen zu bringen. Wenn Sie sich freuen www.nodebeginner.org Sie werden einen Weg finden, einen richtigen Router zu bauen.

var fs = require("fs");
var http = require("http");
var url = require("url");

http.createServer(function (request, response) {

    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");

    response.writeHead(200);

    if(pathname == "https://stackoverflow.com/") {
        html = fs.readFileSync("index.html", "utf8");
        response.write(html);
    } else if (pathname == "/script.js") {
        script = fs.readFileSync("script.js", "utf8");
        response.write(script);
    }


    response.end();
}).listen(8888);

console.log("Listening to server on 8888...");

  • Timbó, danke für beides einfach und hat funktioniert Ausschnitt!

    – Mike

    7. November 2015 um 22:44 Uhr


Das Problem ist, dass Sie unabhängig davon, was Ihr Browser anfordert, “index.html” zurückgeben. Der Browser lädt also Ihre Seite und erhält HTML. Dieser HTML-Code enthält Ihr Skript-Tag, und der Browser fragt den Knoten nach der Skriptdatei. Ihr Handler ist jedoch so eingerichtet, dass er ignoriert, wofür die Anfrage bestimmt ist, also gibt er einfach den HTML-Code noch einmal zurück.

  • Ich habe eine Richtung durch Ihren Rat bekommen. Ich muss etwas über den „Handler“ lernen. Vielen Dank!

    – lanzif

    18. Juli 2013 um 11:52 Uhr

  • Ein schneller Tipp. Wenn Sie einen vernünftigen Browser verwenden, sollten Sie die angeforderten und geantworteten Daten ziemlich einfach sehen können. Versuchen Sie zu klicken F12 in Ihrem Browser und suchen Sie nach etwas namens “network” oder “request” (oder ähnlich, hängt vom Browser ab).

    – Alexander

    18. Juli 2013 um 11:59 Uhr


Hier ist ein funktionierender Code. Es sollte saubereren, einfacheren Code geben, aber das ist sehr nah am Minimum.

Dieser Code setzt voraus, dass sich Ihre index.html und andere Dateien unter /client dir befinden.

Viel Glück.

var fs = require('fs');
var url = require("url");
var path = require('path');
var mime = require('mime');

var log = console.log; 

var handler = function (req, res)
{
    var dir = "/client";
    var uri = url.parse(req.url).pathname;
    if (uri == "https://stackoverflow.com/")
    {
        uri = "index.html";
    }
    var filename = path.join(dir, uri);
    log(filename);
    log(mime.lookup(filename));
    fs.readFile(__dirname + filename,
        function (err, data)
        {
            if (err)
            {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }
            log(data);
            log(filename + " has read");
            res.setHeader('content-type', mime.lookup(filename));
            res.writeHead(200);
            res.end(data);
        });
}

Ihr Handler ist fest codiert, um immer den Inhalt von zurückzugeben /index.html. Sie müssen auf die angeforderte Ressource achten und die richtige zurückgeben. (dh wenn der Browser danach fragt simple.js dann musst du es geben simple.js Anstatt von index.html).

Benutzer-Avatar
zloctb

function contentType(ext) {
    var ct;

    switch (ext) {
    case '.html':
        ct="text/html";
        break;
    case '.css':
        ct="text/css";
        break;
    case '.js':
        ct="text/javascript";
        break;
    default:
        ct="text/plain";
        break;
    }

    return {'Content-Type': ct};
}

var PATH = 'C:/Users/DELL P26E/node_modules'
var http = require("http");
var fs = require('fs');
var url = require("url");
var path = require("path")
var fileName = "D:/index.html";
    
var server = http.createServer (function (request, response) {

var dir = "D:/";
var uri = url.parse(request.url).pathname;

if (uri == "/") {
    uri = "index.html";
}

var filename = path.join(dir, uri);

fs.readFile(filename,
    function (err, data) {
        if (err) {
            response.writeHead(500);
            return response.end('Error loading index.html');
        }
                
        var ext = path.extname(filename)
        response.setHeader('content-type',contentType(ext));
        response.writeHead(200);
        response.end(data);
    });
}).listen(3000);
    
console.log('Server running on 8124') ;

1016160cookie-checkWie füge ich Javascript auf der Clientseite von node.js ein?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy