使用 Ajax 加載頁面時，返回按鈕不起作用

Question

我正在嘗試創建一個網站，其中所有頁面都使用 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 
    }

（也歡迎完全獨立的結構或其他想法）

Answer 1

您已使用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>

Answer 2

您不必每次都將頁面作為查詢中的內容返回。 借助 REST API，您可以在前端使用 React 等工具處理數據，只需調用必要的數據即可。 了解 REST API 如何工作以及 React 如何管理頁面。