Question

我已经能够轻松地使用history.pushState来更改div的内容并让地址栏反映出一个假网址。但是，每当我按下后退/前进按钮时，网址都会变回，但内容保持不变。输入网址会出现错误。我似乎已经将历史API的第一部分缩减了，但需要帮助进行状态更改。

我是一个相当新的程序员，并尝试在jQuery中构建我的网站，并尽可能简洁地保持代码。

HTML code：

<ul>
<li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
<li><button class="navButton" id="settings" href="./content/account_settings.php" name="settings" title="settings">Settings</button></li>
<li><button class="navButton" id="about" href="./content/about.php" name="about" title="About">About</button></li>
</ul>

<div id="mainContent"></div>

Javascript代码：

$(document).ready(function() {
    // INITIAL CONTENT ON FIRST LOAD
$("#mainContent").load('./content/start.php');

// CODE FROM HISTORY.JS 
(function(window, undefined) {
var History = window.History; 
if (!History.enabled) {
    return false;
}

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

    // EVENT LISTENER FOR NAVBUTTON CLASS TO REPLACE CONTENT IN MAINCONTENT DIV
$('.navButton').click(function(e) {
    e.preventDefault();
    pageurl = $(this).attr('name');
    $("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
    if (pageurl != window.location) {
        history.pushState('', $(this).attr('title'), $(this).attr('name'));
        }
    });

})(window);
});

我已经安装了history.js但是如果我不需要使用它，那将是首选。我希望能够更正此代码，以便后退按钮刷新，这有效！

Answer 1

所以我通过在popstate下添加一个if语句来比较url并确定mainContent div中加载的内容来解决这个问题。工作！..但发现我的原始pushstate推动几个popstates你点击navButtons越多。该问题已发布Cannot find where I have a popstate loop creating multiple history entries

window.addEventListener('popstate', function() {
    //WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
    if (location.pathname == "/index.php") {
        $("#mainContent").load("./content/start.php");
    } else {
        $("#mainContent").load("./content" + location.pathname + ".php");
    }
});

Answer 2

建议：使用构建的html5历史状态，传入对象或参数等......

将状态推入浏览器时的操作：

history.pushState('{url:location}', $(this).attr('title'), $(this).attr('name'));

使用浏览器点击后面或前面时的操作：

$(window).on('popstate', function(e){
        if(e.originalEvent.state != null){
              console.log("url to render"+e.originalEvent.state.url)
            }else{
              console.log("nothing in the state, do nothing")
            }

使用jQuery的历史API - 地址栏更改但不刷新div

2 个答案: