为什么Chrome将这个HTML作为一个完全空白的页面? 从Node.js,继节点初学者书

所以我使用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的“查看源代码”实用程序中复制并粘贴的内容。 为什么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(); } 

空白页面 - 尽管Chrome可以显示给我很好的HTML ...

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

因为这个话题已经被closures了(不幸的是,没有被回答的话题可以被他人比海报closures)。 无论如何,为防万一,原来的海报是这样的,我深入探讨了这个问题,因为我的确有同样的问题,没有人回答他的问题,我发现了解决办法:

我刚刚解决了这个问题,从Kindle电子书复制代码片段到您select的文本/源代码编辑器。 同样的话题在stackoverflow.com发表的一篇文章中被讨论,题为“为什么Chrome将这个HTML渲染为一个完全空白的页面?从Node.js开始,继节点初学者书籍[closed]”之后。 这个特别的post描述了我遇到的同样的问题(相同的Kindle书,相同的代码片段,相同的代码症状!)。 不幸的是,这个post在任何回复者提供确切的答案之前过早地closures了,否则我会回应这个post。

然而,我更深入地挖掘了这个问题,并从Kindle书籍复制代码片段时发现问题的根本原因:当您从Kindle应用程序复制文本时,它使用hex代码0xA0作为空格字符,而不是0x20。 hex代码0xA0是非破坏性空白的扩展ASCII。 那么,当你期望复制和粘贴HTML文字string时,这是行不通的,就像前面提到的那样。

所以这就解释了上述文章中的行为:原始的海报表明他可以通过手工重新input所有文本来解决问题。 这是因为手重新input正确使用0x20。

这有其他症状,我一开始不明白,但现在解释:我的文本编辑器(记事本+ + +)没有正确识别我的源代码中的保留关键字。 同样,这是因为关键字被分隔了0xA0而不是0x20。 Notepad ++中的关键字parsing器必须标记为0x20。

解决scheme:在Kindle上粘贴文本之后,使用源代码编辑器中的正则expression式searchfunction执行search和replace。 search正则expression式\ xA0并将其replace为\ x20(或者,取决于您的编辑器,只需在replace字段中键入一个空格键字符[Notepad ++的工作原理])。

我敢打赌,这是因为你没有设置内容长度标题( Content-Length )。 我认为Node.js会自动执行,但也许不会。

过去这是一个问题,但是我认为它已经被修复了。 也许你有一个旧版本。

尝试:

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

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

使用来自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/'); 

所以遗产说,它一定是别的东西

我testing使用我自己的node.js服务器,我认为扩展正在改变的HTML。 尝试使用其他浏览器进行访问,并在隐身模式下使用Chrome浏览器。