Question

此应用中的所有内容均可正常运行，但有时会显示空白页，而不是主页（或任何其他页面）。然后，当我在受影响的视图中更改小的东西时（例如添加空格或。），页面再次呈现正常。

我认为问题可能是异步问题，但我无法找到它。

我正在使用：

的node.js
express.js
巩固
hogan.js

更新1：

这似乎只发生在safari浏览器中，非常奇怪，也许这是一个css的事情，我会调查。

更新2：

这绝对不是CSS的事情。

主要的快速应用设置：

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    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)

然后在我的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})


}

我的一个观点（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}}

Answer 1

我很确定我们在这里看到304错误。

更多信息：http://tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/

基本上，当您的服务器返回＆＃34; 304 - 未修改＆＃34;响应。 Safari打破了它。

解决此问题的方法是禁用＆＃34; etag＆＃34;通过禁用＆＃39; etag＆＃39;

来回复（您只能定位ios请求）

app.disable('etag');

Express最近在此集成了这个：https://github.com/visionmedia/express/commit/610e172fcf9306bd5812bb2bae8904c23e0e8043

所以在你的情况下（全局禁用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');
    });

公平警告：我仍然会收到304标题，但safari似乎没有显示空白页面，除非我点击重新加载按钮。无论哪种方式，如果我单击，页面似乎可靠加载。

node.js + express.js＆amp; hogan.js：有时会返回一个空白页面

1 个答案: