Question

我的网站结构如此IMAGE
我正在尝试用ajax和amp;创建一些页面转换。历史API

CODE：

history.pushState(null, null, "/members/" + dataLink + ".php" ); // update URL
console.log(dataLink);
$(".ajax-container").load('/members/single.php', function(){
     fillPage(dataLink); // load datas from json
});

一切正常，我可以使用数据正确加载页面但现在我必须实现后退按钮的行为（使用历史api / popstate）但我不知道如何做到这一点，因为每个成员页面都在充满了json的数据。

$(window).bind('popstate', function() {
 // what inside here? It should call the previous page + the data from json like the previous ajax call
});

有什么想法吗？

编辑：就像你可以看到我真正称之为single.php的唯一页面每次都填充新的数据。也许这是问题所在？

EDIT 2＆amp; IDEA：也许我可以存储当前和上一页2 var，当调用事件popstate运行fillpage（）时使用上一个变量（简单地说是前一个名字）并添加一个检查，如果上一页是home，那么加载home.php 这是个坏主意吗？

解决：

我创建了一个自定义属性backlink，其中我存储了我所在页面的名称

$(".ajax-container").load('/home.php', function(data){
                    history.pushState({url: 'home.php', backLink: dataLink}, null, "/" );

然后我检查popstate

if (state.backLink != "home"){
                $(".ajax-container").load('thesinglepage.php', function(){
                    ...
            }else{
                $(".ajax-container").load('/home.php', function(){
                    ...
                });
            }

Answer 1

您有两种选择：

1）调用pushstate时，可以在第一个参数上存储对象数据。在此对象中，您可以存储代表页面的键（例如您想要的内容：＆＃34; mypage.php＆＃34;其中＆＃34; mypage＆＃34;是动态页面。）

然后，当您返回历史记录时，您可以访问＆＃34; event.state＆＃34;像这样：

history.pushState({url: dataLink + '.php'}, null, "/members/" + dataLink + ".php" );
    window.popstate = function(e) { 
        e.preventDefault(); 
        console.log(e.state); // here we have previous object data store on pushstate url
        /* Here, call again $('.ajax-container').load(function() { fillpage(state.fillpage); }) */
    }

2）在ajax调用传递load url + data之后保存pushsate。这样做，您可以在不执行ajax调用的情况下调用fillpage：

$(".ajax-container").load('/members/single.php', function(data){
    history.pushState({url: dataLink + '.php', dataLink: data}, null, "/members/" + dataLink + ".php" );
    fillPage(dataLink); // load datas from json
});

window.popstate = function(e) { 
    e.preventDefault(); 
    console.log(e.state); // here we have previous object data store after ajax event
    /* Here, call directy fillpage(state.fillpageData); */
}

<强>已更新我创建了一个真实的例子（至少在我的计算机上工作），以显示推送和弹出状态功能。在这个例子中，我使用jsonp进行了调用（但对于这种情况并不重要）。如果你有疑虑，请不要犹豫:) http://pastebin.com/98iN9UDf

历史API - Ajax页面+ Json

解决：

1 个答案: