HTML5 History API - 不要在第一页加载时触发 window.onpopstate 事件答案

【问题标题】：HTML5 History API - Do not fire window.onpopstate event at the first page loadHTML5 History API - 不要在第一页加载时触发 window.onpopstate 事件
【发布时间】：2012-02-16 16:46:51
【问题描述】：

使用 HTML5 History API，我创建了如下内容：

(function (d, w) {

    $(function () {

        $("#indicator").hide();

        if (typeof history.pushState !== 'undefined') { 

            $("#citylinks a").click(function (e) {
                history.pushState({ path: this.href }, '', this.href);
                act(this.href);
                e.preventDefault();
            });

            w.onpopstate = function (event) {
                act(d.location);
            };
        }

        function act(location) {

            $("#results").hide();
            $("#indicator").show();

            $.getJSON(location, function (data) {

                $("#results").html(data.result);
                $("#results").fadeIn();

                $("#indicator").hide();
            });
        }

    });

})(document, window);

完整的代码在这里：

https://github.com/tugberkugurlu/MvcMiracleWorker/commit/7c511f20678bbfe15462909c794eb323ce615372#diff-3

我在这里遇到的问题是我不想在页面第一次来自服务器时触发 w.onpopstate 事件。

我想这样做的原因是我想在服务器端填充页面，我不希望客户端代码这样做。如果我删除 w.onpopstate 事件，我将无法捕获 history.go() 事件。

有没有办法解决这个问题？

【问题讨论】：

标签： javascript jquery asp.net-mvc html browser-history

【解决方案1】：

一个非常简单的方法是这样的：

w.onpopstate = function () {
    w.onpopstate = function (event) {
        act(d.location);
    }
}

这意味着onpopstate 事件第一次触发时，您的函数被设置为事件处理程序（替换当前处理程序），当事件在页面加载时运行时有效地创建一个 noop .

【讨论】：

不错的解决方案。一件事是它在每个windows.onpopstate 事件上运行。我试图阻止这种情况（通过检查null 或undefined 时的window.onpopstate 事件）但无法让它工作。
这有点像 hack-y 解决方案。你可以试试这样的stackoverflow.com/a/11453389/191551。
@Ryan：也许它很老套，但我并没有真正看到它。如果有的话，它会更有效，因为它不需要对您链接到的示例进行额外检查。当然，我们说的是微秒，这并不重要，但另一方面，我认为使用该技术没有任何问题。这是我在许多脚本中多次使用的东西，不幸的是，我现在无法回忆：-p
考虑到它不会在页面加载时触发 onpopstate，因此在 .back()/.forward() 事件上首先会错误地设置该函数吗？
该错误已在 Chrome 34 canary build 上修复。