Javascript 当使用Ajax加载页面时，返回按钮不会'；t工作

我正在尝试创建一个网站，所有页面都使用Ajax调用。当我点击页面上的任何链接时，url和页面内容都会发生变化，而不会刷新所有页面（类似于Facebook）。到目前为止一切都很好

问题是：当我单击返回或前进按钮时，url会更改，但页面内容不会更改

示例代码：

function loadDoc($link) {  // example for $link : /example.php
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var parser = new DOMParser();
                var doc = parser.parseFromString(xhttp.responseText, "text/html");
                var elem = doc.getElementById("content");
                document.getElementById("content").innerHTML = elem.innerHTML;
            }
        };
        xhttp.open("GET", $link, true);
        xhttp.send();
        window.history.pushState('', 'Settings', $link);  // dynamic url changing 
    }

（也欢迎完全独立的结构或其他想法）

---

---

E-D-it:

正如@Quentin所说，我对popstate进行了一些研究

而且

加载我上面显示的页面

然后，对于返回或前进按钮：

window.onpopstate = function() {

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var parser = new DOMParser();
                var doc = parser.parseFromString(xhttp.responseText, "text/html");
                var elem = doc.getElementById("sp_content");
                document.getElementById("sp_content").innerHTML = elem.innerHTML;
            }
        };
        xhttp.open("GET", document.location, true);
        xhttp.send();


    }

window.onpopstate=function（）{}在这个函数中，我可以通过document.location获取目标url（返回按钮url的示例是上一个页面地址。因此，我可以使用ajax再次加载该页面。我认为它可以工作：）

---

现在我还有一个问题。这是正确的方法吗？我可以在我的项目中使用这种方法吗？

您已经使用了

pushState

向浏览器历史记录中添加了一个条目，但还没有添加事件处理程序来确定浏览器返回时会发生什么。浏览器不会自动为您记忆DOM的状态

下面是一个简单的例子：

<div id="content">1</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>

<script>
    const div = document.querySelector('div');

    addEventListener('click', event => {
        if (event.target.tagName.toLowerCase() !== 'button') return;
        const last = div.textContent;
        const next = event.target.textContent;
        div.textContent = next;
        history.pushState({ value: next }, `Page ${next}`, `/page/${next}`);
    });

    addEventListener('popstate', event => {
        let state = event.state;
        if (state === null) {
            // special case: This is the state before pushState was called
            // We know what that should be:
            state = { value: 1 };
        }
        div.textContent = state.value;
        console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
    });
</script>

1
1.
2.
3.
4.
const div=document.querySelector（'div'）；
addEventListener（'单击'，事件=>{
if（event.target.tagName.toLowerCase（）！='button'）返回；
const last=div.textContent；
const next=event.target.textContent；
div.textContent=next；
pushState（{value:next}，`Page${next}`，`/Page/${next}`）；
});
addEventListener（'popstate'，事件=>{
让state=event.state；
如果（状态===null）{
//特例：这是调用pushState之前的状态
//我们知道应该是什么：
状态={值：1}；
}
div.textContent=state.value；
log（'location:'+document.location+'，state:'+JSON.stringify（event.state））；
});