Question

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

我的网站是搜索引擎，查询存储在网址参数中：?Query=cats。该网站纯粹是用javascript编写的。当我进行新搜索时，History.js工作得很好，新查询被更新，状态被推送。

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

用户手动将URL（mydomain.com?Query=cats）输入地址栏并点击输入。
用户导航到外部页面，然后单击后退按钮

在这两种情况下，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);
        }
    });

和$（文件）.ready我已经

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

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

Answer 1

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

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

Answer 2

这是我选择这样做的方式（基于法比亚诺的反应）来存储初始状态参数

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);

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

History.js getState（）在pageload

2 个答案: