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

问题描述

我的网站上有一张地图，允许用户搜索地球周围的地方。我正在尝试使其动态化，以便用户不必在每次搜索时都刷新页面。

到目前为止，它工作正常，每次用户搜索新内容时，我都使用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

dev/sub/master

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