当用户在浏览器中单击后退箭头或前进箭头时触发功能

Question

我的网站上有一张地图，用户可以在地图上搜索地球上的各个地方。我正在尝试使其动态化，这样用户就不必每次搜索时都刷新页面。

到目前为止，这一切都很好，每次用户搜索新内容时，我都会使用window.history.pushState("object or string", "Title", "/maps?q=example");来更新URL。

然而，当用户单击后退箭头或前进箭头时，URL的状态会更改为以前的状态，但地图不会更改，因为loadMap((；没有调用Javascript函数。

是否有一个Javascript事件处理程序可以监听后退箭头/前进箭头，这样我就可以通过调用loadMap((来更新映射；查询变量存储在URL中？

以下是我目前所拥有的：

<input id="searchBox" type="text" placeholder="What are you looking for?" value=""> 
<div class='map'></div>
<script>
// Uses ajax to get map data from PHP file
function loadMap(){
var entityData = {
query: $("#searchBox").val()
};
var entityOptions = {
url: "https://example.com/load_map.php",
dataType: "text",
type: "POST",
data: { mapData: JSON.stringify( entityData ) }, // Our valid JSON string
success: function( data, status, xhr ) {
$(".map").html(data);
}
};
$.ajax( entityOptions );
}

// When user presses enter, load the map 
document.getElementById('searchBox').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
loadMap();
}
}
</script>

以下是我想添加的内容：

<script>
window.addEventListener(*back arrow*, function(event) {
var q = *get q variable from URL*;
$("#searchBox").val() = q;
loadMap();
}
window.addEventListener(*forward arrow*, function(event) {
var q = *get q variable from URL*;
$("#searchBox").val() = q;
loadMap();
}
</script>

Answer 1

您可以在操作状态下使用

window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate