Question

我无法弄清楚如何使用historyAPi或history.js请帮忙！我的代码是这样的......

我想要的是显示一组按钮，用户点击其中一个按钮然后显示另一组按钮，并在第一组之间进行ajax调用，使用css隐藏...

$(".button1").click(function(){
    $('#div2').css("display","none");
    $('#div1').css("display","none");
    val1 = $(this).attr("value");
    query = 'phone.php?val1='+val1;
    myQuery();
    $('#div2').css("display","block");
});

$(".button2").click(function(){
    val2= $(this).attr("value");
    $("#div2").css("display","none");
    query = 'phone.php?val1='+val1+'&val2='+val2;
    myQuery();
   $("#div3").css("display","block");
});

function myQuery() {
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        document.getElementById("sql").innerHTML = xmlHttp.responseText;
    }
}

xmlHttp.open('GET', query, true);
xmlHttp.send();
}

当我按下后退按钮时，它会转到上一个网站...所以我肯定希望它显示第一组按钮并显示更新前的内容。

Answer 1

使用Ajax时，您不会在浏览器历史记录中添加任何内容，这就是当您按下后退按钮时，您将返回上一个录制的页面。如果您希望记录Ajax调用，就像要进入新页面一样，则需要在历史堆栈上推送新状态。

if ( typeof(window.history.pushState) == 'function' ) {
    var stateObj ={
        title: title,
        url: query,
    } ;
    window.history.pushState (stateObj, title, query) ;     
}

您还需要实现onpopstate事件功能，以便在用户返回历史记录后根据状态变为隐藏/显示您的按钮。

window.onpopstate =function (event) {
    alert ("location: " + document.location + ", state: " + JSON.stringify (event.state)) ;
    // based on the event.state values, restore buttons visibility here...

} ;

Ajax后退按钮功能

1 个答案: