使用nodejs webserver在动态创建的html页面中执行javascript文件

问题描述 投票:1回答:2

我想用node.js webserver在动态创建的html页面的标题中执行javascript文件。无法弄清楚如何但必须是可能的。

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

function processRequest(request, response) {
  "use strict";

  var pathname = url.parse(request.url).pathname;
  console.log('Requested ' + pathname);

  response.writeHead(1000, { 'Content-Type': 'text/html' });
  response.write('<!DOCTYPE html><html ><head>');
  response.write('<meta charset="utf-8">');
  response.write('<title>' + 'Yay Node!' + '</title>');
  response.write('<link rel=stylesheet href=../styles/styles.css rel=stylesheet />');
  response.write('<script src=script.js type=text/javascript></script>');
  response.write('</head><body>');

  response.write('<h1><tt>' + 'jan' + '</tt></h1>');
  response.write('<script type="text/javascript">test()</script>')
  //response.write('<script type="text/javascript">script.onload = function () {    alert("from html Node!")}; </script>')
   response.write('<input id="clickMe" type="button" value="clickme" onclick="test()" />')
  response.write('</body></html>');
  response.end();
};

http.createServer(processRequest).listen(8888);

的script.js:

document.onload = function () { alert('load Node!'); };
test = function() { alert('test Node!') }; 
javascript node.js webserver
2个回答
1
投票

问题是,你的浏览器找不到script.js

当它试图使用与http://localhost:8888/script.js相同的html文件获取http://localhost:8888/节点答案时。

为了使节点能够正确地提供脚本文件,您需要检查路径并发送正确的文件。

在你的processRequest函数中添加这样的东西

if (pathname === '/script.js') {
    //code to send script
} else {
    //code to send html
}

你也必须为styles.css文件做同样的事情

如果您不想对页面中的每个文件进行硬编码,我建议使用npm模块express

var express = require('express'),
    app = express(),
    server = require('http').createServer(app);

app.use('/', express.static(__dirname + '/static');

server.listen(8888);

当浏览器请求时,此代码将自动发送/static中的文件。如果你想创建一个动态页面,你可以在app.useserver.listen之间添加它

app.all('/somedynamicurl', function (request, response) {
    //Dynamic page
});

现在,如果有人去http://localhost:8888/somedynamicurl他们会得到这个动态页面。

我还建议阅读express guideexpress docs


0
投票

这很有效。感谢Ferdi265。

        // http://www.cburch.com/cs/340/reading/nodejs/

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

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

 var mimeTypes = {
'.js': 'text/javascript',
'.html': 'text/html',
'.css': 'text/css'
};

 function processRequest(request, response) {
"use strict";

var pathname = url.parse(request.url).pathname;
console.log('Requested ' + pathname);

var lookup = path.basename(decodeURI(request.url)), //|| 'index.html',
    f = lookup;


 fs.exists(f, function (exists) {
    if (exists) {
        fs.readFile(f, function (err, data) {
            if (err) {
                response.writeHead(500);
                response.end('Server Error!'); return;
            }
            var headers = {
                'Content-type': mimeTypes[path.
            extname(lookup)]
            };
            response.writeHead(200, headers);
            response.end(data);
        });
     // return;
    }

    else {

        response.writeHead(1000, { 'Content-Type': 'text/html' });
        response.write('<!DOCTYPE html><html ><head>');
        response.write('<meta charset="utf-8">');
        response.write('<title>' + 'Yay Node!' + '</title>');
        response.write('<link rel=stylesheet href=../styles/styles.css rel=stylesheet                />');
        response.write('<script src=script.js type=text/javascript></script>');
        response.write('</head><body>');

        response.write('<h1><tt>' + 'jan' + '</tt></h1>');
        response.write('<script type="text/javascript">test()</script>')
        //response.write('<script type="text/javascript">script.onload = function () { 
                                         alert("from html Node!")}; </script>')
         response.write('<input id="clickMe" type="button" value="clickme"   
     onclick="test()" />')
        response.write('</body></html>');
        response.end();

    }
    });
  };

   http.createServer(processRequest).listen(8888);
© www.soinside.com 2019 - 2024. All rights reserved.