Блог

На моем веб-сайте есть карта, которая позволяет пользователям искать по ней места по всей планете. Я пытаюсь сделать это динамичным, чтобы пользователю не приходилось обновлять страницу каждый раз, когда он выполняет поиск.

Пока это работает нормально, и я использую 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>
  

Вы можете использовать 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