Question

目前，我的导航栏使用AJAX加载新页面，如果AJAX成功，则使用window.pushState()更新URL。

我已经意识到我需要在get请求上推送页面状态，这样后退/前进事件将有一个状态供我的popstate侦听器处理。

我应该简单地将以下脚本注入到我的服务器响应的HTML中吗？

<script>
    window.pushState(state, null, null);
</script>

或者有没有办法用响应来推动状态（到GET）？

编辑：一个用例，用户输入domain.com/ - ＆gt;然后跟随导航栏中的链接（AJAX加载新内容），目前如果用户点击后退按钮没有任何反应。

Answer 1

你非常接近解决方案。您可以使用window.history.pushState更改网址。

// Call this function when you get response with url  
function processAjax(response, url){
     // Get whatever you want from response and push it in state
     document.title = response.pageTitle; 
     // You can push other information here also
     window.history.pushState({"pageTitle": response.pageTitle}, response.pageTitle, url);
}

要设置加载状态，只需调用window.history.pushState而不使用第三个参数即url。

请注意，使用pushState会更改网址而不重新加载网页，根据我的理解，这就是我认为你想要的。

在此之后，您可以收听window.onpopstate事件以检测导航更改：

window.onpopstate = function(e) {
     if (e.state) {
        var pageTitle = e.state.pageTitle;
        // Or alternatively get other information and do whatever you want with it
     }
}

参考：MDN

在加载时设置页面状态（在GET请求期间）？

1 个答案: