Javascript History.js-更新初始状态（推送另一个状态之前加载的第一个页面）

对不起，我的英语不好：(

我尝试了

History.js

，它对我很有效，我可以在使用后退/前进浏览器按钮时推送新状态并更新内容，但初始状态有问题

首先，当调用第一页时，替换状态，如下初始化：

History.replaceState({state: initialDataToStore}, document.title, document.location.href);

$('body').on('click', '.js-nav',function(event) {
    var url = $(this).prop('href');
    History.pushState(state, 'title', url);
    loadContent(state, url);
    event.preventDefault();
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    url = State.url;
    loadContent(State.data, url);
});

1- new tab or another page
2- first loaded page (that i force the replaceState)
3- ...

当我点击一个链接时，我推送一个状态，并使用如下ajax请求更新div#content：

History.replaceState({state: initialDataToStore}, document.title, document.location.href);

$('body').on('click', '.js-nav',function(event) {
    var url = $(this).prop('href');
    History.pushState(state, 'title', url);
    loadContent(state, url);
    event.preventDefault();
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    url = State.url;
    loadContent(State.data, url);
});

1- new tab or another page
2- first loaded page (that i force the replaceState)
3- ...

当我使用后退/前进按钮时，会触发'statechange'事件，因此我调用loadContent函数来更新div#content，如下所示：

History.replaceState({state: initialDataToStore}, document.title, document.location.href);

$('body').on('click', '.js-nav',function(event) {
    var url = $(this).prop('href');
    History.pushState(state, 'title', url);
    loadContent(state, url);
    event.preventDefault();
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    url = State.url;
    loadContent(State.data, url);
});

1- new tab or another page
2- first loaded page (that i force the replaceState)
3- ...

这就是加载内容的功能：

function loadContent(state, url){
    $.ajax({
        url: url,
        type: 'GET'
    })
    .done(function(data) {
        $('#content').empty().append(data);
    })
    .fail(function() {
        console.log("error");
    });
}

如果第一个加载的页面在浏览器历史记录中已经有以前的元素，我会遇到问题，如下所示：

History.replaceState({state: initialDataToStore}, document.title, document.location.href);

$('body').on('click', '.js-nav',function(event) {
    var url = $(this).prop('href');
    History.pushState(state, 'title', url);
    loadContent(state, url);
    event.preventDefault();
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    url = State.url;
    loadContent(State.data, url);
});

1- new tab or another page
2- first loaded page (that i force the replaceState)
3- ...

如果我使用浏览器后退按钮返回“新建选项卡”或其他页面，然后单击前进按钮“第一个加载的页面”，我将丢失所有html“布局”（html、脚本、标题、正文…），只会显示ajax响应（要附加到div的内容）

p.S: 如果历史记录中没有上一个元素“新建选项卡”或另一个页面“，则我的“首次加载页面”工作正常，我不会丢失Html布局

我该怎么办

---

谢谢

我尝试不使用history.js，但也有同样的问题。使用chromium和firefox。只有ajax响应可见，没有调用它的页面。