Browser history How to go to an earlier opened link by clicking on the browser's "forward" button?

Question

JavaScript

In general, a window opens - posts are loaded in it - the window is closed by clicking / or using the browser's "back"
arrow After that, the browser's "forward" arrow remains active
If you click on it, the link will simply change, but the link will not go to the post of this link

So it changes link:

if(url != window.location){
            window.history.pushState(null, null, url);
        }

This is how the link changes back, when the window is closed:

var window_location = window.location.href;
   function Popupclose() {

   }

And this is how the window closes by clicking on the "back" button:

window.addEventListener('popstate', function(e) {

});

After this magic, the browser 's "forward" button is active and can change the link without

clicking on
it.
, also leave active, but on click open a window with a post on the existing link

. The whole script of the madal window:

spoiler

//ПОДГРУЗКА ПОПАП

  function loadContents() {
    var url = $('#page-nav a').attr('href');
    if (url) {
    $( ".popup-loader" ).show("slow");
      $.ajax({
        type: "GET",
        url: url,
        dataType: "html",
        success: function (loaded) {
          var result = $(loaded).find('#content_masonry .loop');
          var nextlink = $(loaded).find('#page-nav a').attr('href');
          $(loaded).imagesLoaded(function() {
            $container.append(result).masonry('appended', result);
            $('.popup-post-modal-open').bind('click', DimaPopup);

          });

    $( ".popup-loader" ).hide("slow");
          if (nextlink != 'undefined') {
            $('#page-nav a').attr('href', nextlink);
          } else {
            $('#page-nav').remove();
          }
          loading = false;
        }
      });
    }
  }

    $('.popup-post-modal-open').bind('click', DimaPopup);
    $('.popup-background').bind('click', Popupclose);

    function DimaPopup(e){
      e.preventDefault();
        
        $('.popup-background').css('opacity', '1');
        $('.popup-background').css('visibility', 'visible');

      var url = $(this).attr('href');

        // А вот так просто меняется ссылка
        if(url != window.location){
            window.history.pushState(null, null, url);
        }
     
      $('.popup-loader').fadeIn(100);
      $('.popup-post').addClass('active');
      window.setTimeout(function(){$('.popup-post').scrollTop(0);},50);
      $('#content_owerflow').addClass('active');
      $('body').addClass('active2');

    $.ajax(
    {
       type : 'POST',
       url : 'https://' + location.host + '/wp-admin/admin-ajax.php',
       data: { action: 'popup_post', popup_post_id:$(this).parents('.title').children('.post-click-popup').children('span').text()
    },
       success: function(data){                   
        $('.post-generat-content').eq(0).html(data);
        $('.popup-loader').fadeOut(100);


             $('.close').bind('click', Popupclose);
             },
             error: function(error)
             {
             console.log('Ошибка');
             }
    });
   }
   var window_location = window.location.href;
   function Popupclose() {
      $('.popup-background').css('opacity', '0');
      $('.popup-background').css('visibility', 'hidden');
      $('.popup-post').removeClass('active');
      window.history.pushState(null, null, window_location);
      $('#content_owerflow').removeClass('active');
      $('body').removeClass('active2');
   }
      window.addEventListener('popstate', function(e) {
      $('.popup-background').css('opacity', '0');
      $('.popup-background').css('visibility', 'hidden');
      $('.popup-post').removeClass('active');
      $('#content_owerflow').removeClass('active');
      $('body').removeClass('active2');
      var url = $(this).attr('href');
        if(url != window.history.back){
            window.history.pushState(null, null, null);
      }
});

Thank you for your attention!

Answer 1

Well, like this, the link does not seem to change when clicking "back" when closing the window:

window.addEventListener('popstate', function(e) {
      $('.popup-background').css('opacity', '0');
      $('.popup-background').css('visibility', 'hidden');
      $('.popup-post').removeClass('active');
      $('#content_owerflow').removeClass('active');
      $('body').removeClass('active2');
      var url = $(this).attr('href');

        if(url != window.history.back){
            window.history.pushState(null, null, null);
        }
});

This is fine. It's enough to make the "forward" button inactive when the popup is closed.
But is this all right?
I doubt not just because I'm not a professional, but because SOMETIMES when closing the window with the "back" arrow, the browser's "loader" button twitches, as if there is an undefined conflict first, and then the "loader" reaches the desired state