[英]node.js + express.js & hogan.js: returns a blank page sometimes
Everything in this app works fine but sometimes i get a blank page rendered instead of the homepage (or any other page for that matter). 此应用程序中的所有内容均正常运行,但有时会呈现空白页面,而不是首页(或与此有关的任何其他页面)。 Then when i change something small in the affected view (like for instance add a space, or .) the page renders normal again. 然后,当我在受影响的视图中更改一些小内容(例如添加空格或。)时,页面再次呈现正常状态。
I think that the problem may be a async issue but i can't locate it. 我认为问题可能是异步问题,但我找不到它。
I'm using: 我正在使用:
UPDATE 1: 更新1:
This seems to happen only in the safari browser, very strange, maybe it's a css thing, i'll investigate. 这似乎仅在野生动物园浏览器中发生,非常奇怪,也许这是一个CSS问题,我将进行调查。
UPDATE 2: 更新2:
It's definitely not a CSS thing. 绝对不是CSS。
The main express app setup: Express应用程序的主要设置:
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
dependencies
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
var express = require("express")
var cons = require("consolidate")
var app = express()
var path = require("path")
var index = require("./routes/index")
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
configure
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
app.configure(function(){
app.engine("html", cons.hogan)
app.set("view engine", "html")
app.set("views", __dirname + "/views")
app.use(express.static(path.join(__dirname, "public")))
})
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
routes
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
app.get("/", index.index)
app.get("/hire", index.hire)
app.get("/hire/:id/:nr", index.hirePerson)
app.get("/books", index.books)
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
listen
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
app.listen(2020)
Then in my index.js route file: 然后在我的index.js路由文件中:
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
settings
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
var appURL = new function(){
this.home = "/",
this.hire = this.home + "hire"
this.books = this.home + "books"
this.projects = this.home + "projects"
this.portfolio = this.home + "portfolio"
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
routes
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
exports.index = function(req, res){
res.render("index.html", {url:appURL, partials:{footer:"footer", header:"header"}})
}
exports.hire = function(req, res){
res.render("hire.html", {url:appURL, partials:{footer:"footer", header:"header"}})
}
exports.books = function(req, res){
res.render("books.html", {url:appURL, partials:{footer:"footer", header:"header"}})
}
exports.hirePerson = function(req, res){
res.render("hireDetail.html", {id:req.params.id, nr:req.params.nr})
}
One of my views (index.html) 我的一种观点(index.html)
{{> header}}
<section class="layoutIndex"><div class="layoutIndex-container">
<header class="layoutIndex-header">
<nav class="navHeader">
<h1 class="navHeader-logo"><a class="bf-logo" href="{{url.home}}"></a><span>Basing.com</span></h1>
<h2 class="navHeader-slogan">HTML / CSS / JS werkgroep</h2>
<ul class="navHeader-buttons modelTernary">
<li class="modelTernary-column"><a class="buttonPrimary" href="{{url.hire}}">Hire us</a></li>
<li class="modelTernary-column"><a class="buttonPrimary" href="{{url.books}}">Books</a></li>
<li class="modelTernary-column"><a class="buttonPrimary" href="{{url.projects}}">Projects</a></li>
</ul>
</nav>
</header>
<section class="layoutIndex-articles">
<article class="books">
<h2>Books <time>2014</time></h2>
<ul class="listArticles">
<li><h3><a href="">Javascript variables, what's so special about them?</a></h3></li>
<li><h3><a href="">Javascript variables, what's so special about them?</a></h3></li>
</ul>
</article>
<div class="hrLight"></div>
<article class="projects">
<h2>Projects</h2>
<h3 class="icon"><a href=""><i class="bf-logo"></i>CSS Objects: a front-end methodology</a></h3>
</article>
</section>
</div></section>
{{> footer}}
I'm pretty sure we're seeing the 304 bug here. 我很确定我们在这里看到304错误。
More here: http://tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/ 此处的更多信息: http : //tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/
Basically, when you server returns a "304 - Not modified" response. 基本上,当服务器返回“ 304-未修改”响应时。 Safari breaks it. Safari破坏了它。
The way to fix this is to disable "etag" responses (you could target only ios requests) by disabling the 'etag'. 解决此问题的方法是通过禁用“ etag”来禁用“ etag”响应(您可以仅针对ios请求)。
app.disable('etag');
Express recently integrated this here: https://github.com/visionmedia/express/commit/610e172fcf9306bd5812bb2bae8904c23e0e8043 Express最近在这里集成了它: https : //github.com/visionmedia/express/commit/610e172fcf9306bd5812bb2bae8904c23e0e8043
So in your case (disabling etag globally): 因此,在您的情况下(全局禁用etag):
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
configure
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
app.configure(function(){
app.engine("html", cons.hogan)
app.set("view engine", "html")
app.set("views", __dirname + "/views")
app.use(express.static(path.join(__dirname, "public")))
app.disable('etag');
});
Fair warning: I am still getting 304 headers with this, but safari doesn't seem to show the blank white page unless I double tap the reload button. 合理的警告:我仍然可以得到304标头,但是Safari浏览器似乎没有显示空白的白页,除非我双击重新加载按钮。 Either way, if I single tap, the page seems to load reliably. 无论哪种方式,如果我轻按一下,页面似乎都能可靠地加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.