5

我对 History.js 在页面加载时的工作方式有点困惑。我做了一些实验，但结果似乎不确定。

我的网站是一个搜索引擎，查询存储在 URL 参数中：?Query=cats. 该网站纯粹是用javascript编写的。当我进行新搜索、更新新查询并推送状态时，History.js 效果很好。

Query我的问题是如果用户手动输入包含参数的 URL，如何创建初始状态。在某些情况下，我尝试执行此操作的每一种方式最终都会导致两次运行搜索查询。似乎有冲突的两个用例是：

  1. 用户在地址栏中手动输入 URL ( mydomain.com?Query=cats) 并按 Enter。
  2. 用户导航到外部页面，然后单击后退按钮

在这两种情况下，javascript 都会加载，因此会查看 URL 参数以生成初始状态。

但是，在第二种情况下，History.js 也会触发 statechange事件。

必要代码：

    History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
        var s = History.getState();
        if(s.data["Query"]){
          executeQuery(s.data);
        }
    });

在 $(document).ready 我有

  // Get history from URL
  s = getQueryObjectFromUrl(location.href);
  if(s["Query"]){
      History.pushState(s,'',$.param(s))
  }

有没有更好的方法来处理从 URL 参数创建初始状态？

4

2 回答 2

1

这是我选择存储初始状态参数的方式（基于 Fabiano 的响应）

var renderHistory = function () {
    var State = History.getState(), data = State.data;
    if (data.rendered) {
        //Your render page methods using data.renderData
    } else {
        History.replaceState({ rendered: true, renderData: yourInitData}, "Title You Want", null);
    }
};
History.Adapter.bind(window, 'statechange', renderHistory);
History.Adapter.onDomLoad(renderHistory);

当然，如果您使用不同的 DOM 负载，例如 jquery，您可以将其放置renderHistory();在其中，但这种方式不需要任何额外的库。它只会导致一次状态更改，并将空的初始状态替换为包含数据的状态。这样如果你使用ajax获取else里面的initData，下次人返回页面就不需要获取了，你可以一直设置rendered为false回到初始页面状态/刷新内容。

于 2014-07-19T06:59:42.653 回答
1

由于我遇到了与您类似的问题，我所做的是将绑定到 a 的函数定义statechange为命名函数，然后在页面加载时我也让它运行。

它比尝试解析 URI 或其他任何东西更好，希望它有所帮助。

于 2013-11-26T18:10:46.363 回答