Question

我正在使用HTML5历史记录API（在Chrome上），位于以下链接：

您可以看到一个显示/隐藏div（视图）的简单应用程序。

使用浏览器向后和向前按钮可以正常运行脚本，但如果我直接在浏览器中输入以下地址（为了查看视图2） http://jsbin.com/zuqijofole/2

找不到该文件。我需要显示第二个视图。

我想知道：

我应该在服务器端实现一些映射URL的逻辑吗？这
coul是使用最新PHP的解决方案吗？
或者我在JS中错过了一些实现？

注意：解决方案应该在SPA应用程序中工作，因此所有数据都由JS app呈现。

window.app = {
            data: {
                views: [
                        { id: 0, isActive: false },
                        { id: 1, isActive: false },
                        { id: 2, isActive: false },
                ]
            },
        start: function () {
            this.listeners();
            // default entry
            var activeView = this.wm.activeView;
            history.replaceState({ activeView: activeView }, document.title, document.location.href);

            window.app.wm.hideViews();
            window.app.wm.showView();

        },
        listeners: function () {
            window.addEventListener('popstate', function (event) {
                // fires when backing/forwarding in history
                console.log(event);
                console.log(window.history.state);
                this.wm.showHideBl(event.state);
            }.bind(this));

            var elm = document.getElementById('btn-prev');
            elm.addEventListener('click', function () {
                window.app.wm.snowPrevView();
            });

            elm = document.getElementById('btn-next');
            elm.addEventListener('click', function () {
                window.app.wm.snowNextView();
            });

        },
        wm: {
            activeView: 0, // default
            showView: function () {
                var elm = document.getElementById('view-' + this.activeView);
                elm.style.display = '';
            },
            showHideBl: function (data) {
                this.hideView();
                this.activeView = data.activeView;
                this.showView();
            },
            snowNextView: function () {
                // bl
                if (this.activeView < window.app.data.views.length - 1) {
                    this.hideView();
                    this.activeView++;
                    this.showView();
                    history.pushState({ activeView: this.activeView }, '', this.activeView);
                }
            },
            snowPrevView: function () {
                // bl
                if (this.activeView > 0) {
                    this.hideView();
                    this.activeView--;
                    this.showView();
                    history.pushState({ activeView: this.activeView }, '', this.activeView);
                }
            },
            hideView: function () {
                var elm = document.getElementById('view-' + this.activeView);
                elm.style.display = 'none';
            },
            hideViews: function () {
                window.app.data.views.forEach(function (item, index, array) {
                    var elm = document.getElementById('view-' + item.id);
                    elm.style.display = 'none';
                }.bind(this));
            }

        }
    };

Answer 1

是的，为了获得完全无缝的体验，您希望将History API创建的所有URL映射到服务器可以使用的实际URL。

例如，如果您有一个可以对客户端进行排序的表，则可以使用历史记录API将排序状态保存到URL中。服务器应该能够读取该URL并提供在刷新页面时已排序的表。

确保一切正常运行的最佳方法是禁用JavaScript并确保您仍然可以正确导航和使用网站（即使页面始终刷新）。

我是否需要进行任何服务器调整才能使用完整的HTML5 History API？

1 个答案: