History.js getState() at pageload

Question

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

我的网站是一个搜索引擎，查询存储在网址参数：?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参数创建初始状态？

Answer 1

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

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

Answer 2

我选择这样做(基于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获取state内部的initData，并且下次人员返回页面时它将不需要得到它，那么您可以始终将呈现为false设置为false以返回到初始页面状态/刷新内容。