Question

所以我使用Node.js将以下HTML发送到我的浏览器：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <form action="/upload" method="post">
        <textarea name="text" rows="20" cols="60"></textarea>
        <input type="submit" value="Submit text" />
    </form>
</body>
</html>

但是浏览器显示的是一个完全白色的空白页面。但是，当我查看来源时，我确切地看到了您在上面看到的内容，我刚刚复制并粘贴了Chrome浏览器＆＃34;查看来源＆＃34;效用。为什么Chrome会将该HTML呈现为空白页？我在下面有截图。

这是我用来将HTML发送到浏览器的Node.js代码：

function start(response) {
    console.log("Request handler 'start' was called.");
    var body = '<!DOCTYPE html>\n'+
               '<html>\n'+
               '<head>\n'+
               '    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n'+
               '</head>\n'+
               '<body>\n'+
               '    <form action="/upload" method="post">\n'+
               '        <textarea name="text" rows="20" cols="60"></textarea>\n'+
               '        <input type="submit" value="Submit text" />\n'+
               '    </form>\n'+
               '</body>\n'+
               '</html>\n';

    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}

blank page -- in spite of good HTML that Chrome can show me...

==================================

以下是作为原始发布的编辑而包含的答案，因为该主题已关闭（遗憾的是，未经回答的主题可以被其他人关闭而不是海报）。无论如何，为了防止原始海报跟随这个，我解决了这个问题，因为我遇到了完全相同的问题，没有人回答他的问题，我发现了解决方案：

我刚刚解决了将Kindle电子书中的代码片段复制到您选择的文本/源代码编辑器的问题。在stackoverflow.com上发布了一个名为＆＃34的帖子中讨论了同样的主题;为什么Chrome将此HTML呈现为一个完全空白的页面？从Node.js开始，遵循Node Beginner Book [关闭]＆＃34;。该特定帖子描述了我遇到的完全相同的问题（相同的Kindle书，相同的代码片段，相同的代码症状！）。不幸的是，在任何受访者提供确切答案之前，该帖子过早关闭，否则我会对该帖子作出回应。

但是，我更深入地研究了这个问题，并在从Kindle书籍复制代码片段时发现了问题的根本原因：当您从Kindle应用程序复制文本时，它使用十六进制代码0xA0表示空格字符，而不是0x20。十六进制代码0xA0是非破坏空白的扩展ASCII。好吧，当您希望复制并粘贴HTML文字字符串时，这不起作用，就像上述帖子中的情况一样。

因此，这解释了上述帖子中的行为：原始海报表明他可以通过手动重新输入所有文本来解决问题。这是因为手牌重新输入正在使用正确的0x20。

这有其他症状，我一开始并不了解，但现在解释一下：我的文本编辑器（Notepad ++）没有正确识别源代码中的保留关键字。同样，这是因为关键字由0xA0分隔，而不是0x20。 Notepad ++中的关键字解析器必须标记为0x20。

解决方案：从Kindle粘贴文本后，在源代码编辑器中使用正则表达式搜索功能执行搜索和替换。搜索正则表达式\ xA0并将其替换为\ x20（或者，根据您的编辑器，只需键入Replace字段中的单个空格键字符[这就是Notepad ++的工作方式]）。

Answer 1

我敢打赌这是因为你没有设置内容长度标题（Content-Length）。我认为Node.js会自动执行此操作，但可能没有。

这是issue in the past，但我认为它已修复为chrome。也许你有一个旧版本。

尝试：

response.writeHead(200, {"Content-Type": "text/html", "Content-Length" : body.length });

然后查看Chrome开发者工具网络标签，查看是否正在设置标题。

Answer 2

使用nodejs.org中的服务器示例代码，您的HTML在Chrome版本23.0.1271.64中正常工作：

var http = require('http');
http.createServer(function (req, res) {
  var body = '<!DOCTYPE html>\n'+
         '<html>\n'+
         '<head>\n'+
         '    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n'+
         '</head>\n'+
         '<body>\n'+
         '    <form action="/upload" method="post">\n'+
         '        <textarea name="text" rows="20" cols="60"></textarea>\n'+
         '        <input type="submit" value="Submit text" />\n'+
         '    </form>\n'+
         '</body>\n'+
         '</html>\n';
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write(body);
  res.end();
}).listen(3000, '127.0.0.1');
console.log('Server running at http://127.0.0.1:3000/');

所以遗产说，它必须是别的东西

Answer 3

我使用自己的node.js服务器进行了测试，我认为扩展正在改变html。尝试在其他浏览器中进行访问，并以隐身模式在Chrome中进行访问。

为什么Chrome会将此HTML呈现为完全空白的页面？从Node.js开始，遵循Node Beginner Book

3 个答案: