當用戶在瀏覽器中單擊后退箭頭或前進箭頭時觸發 function

Question

我的網站上有一個 map，它允許用戶搜索地球周圍的地方。 我正在嘗試使其動態化，以便用戶每次進行搜索時都不必刷新頁面。

到目前為止，一切正常，我正在使用window.history.pushState("object or string", "Title", "/maps?q=example"); 每次用戶搜索新內容時更新 URL。

但是，當用戶單擊后退箭頭或前進箭頭時，URL 將 state 更改為以前的值，但 map 不會因為負載而改變 Javascript function 未被調用。

是否有一個 Javascript 事件處理程序來偵聽后退箭頭/前進箭頭，以便我可以通過調用 loadMap() 來更新 map; 使用存儲在 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

您可以使用 onpopstate

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

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