How can I get the url of the previous page when triggering the popstate event?

Question

Here's a simple example of pushState and popstate event:

<button id="example_btn">Click me</button>

<script>
$("#example_btn").click(function(){
            history.pushState( 
                {
                    'url' : "example.htm"
                }, null, "example.htm");
});
$(window).bind('popstate', function (event) {
    if (event.originalEvent.state) {
        console.log(event.originalEvent.state.url);
    }
});
</script>

When triggering the popstate event, it shows the url of the current page.

My question is:

How can I get the url of the previous page when triggering the popstate event in this case?


P.S. I have tried document.referrer but it didn't show anything.

Answer 1

Please try keeping the previousUrl in a variable and listening to it.

<button id="example_btn">Click me</button>

<script>
var previousUrl = null;
$("#example_btn").on('click', function(){
           previousUrl = location.href;
             history.pushState( 
                {
                    'url' : "example.htm"
                }, null, "example.htm");
});
window.onpopstate = function (event) {
   console.log('Previous url was : ', previousUrl); 
};
</script>