javascript - 如何避免历史 Api 堆栈顶部的重复推送

Question

我遇到了在堆栈顶部推送重复的问题 History api 堆栈

假设我有带有点击模式的用户界面(1 到 4 页，它可以根据用户选择是随机的)

问题:我想以与点击相同的方式推送所有页面，并且在history api之上不重复，这样当浏览器前进、后退按钮时点击的网址应该改变(现在需要点击 2 次)

这是我的项目设置的样子(单击同一页面两次以查看实际问题):

$('li').on('click',function(){
   var baseUrl = location.href;  //'http://www.siliconvalley.com/pages/';//it can be current url also
   var page = $(this).attr('data-page');
   var urlObj = new URL(baseUrl);
   urlObj.searchParams.append('page',page);
   $('#loadedPageContainer').prepend(`<p>${urlObj.href}</p>`);
   try{
       history.pushState({}, null, urlObj.href); //wanted to avoid duplicate on top of history api stack
   }catch(e){}

});

window.addEventListener('popstate', function(e){    
       console.log('page navigated',e);  // called 2 times in my project
      //navigateToCurrentUrlRoute();
});

ul{
  list-style:none;
  display:flex;
  justify-content: space-evenly;
}

ul li{
    border: 1px solid red;
    padding: 50px;
    cursor:pointer;
}

#loadedPageContainer{
    //display: flex;
    width: 500px;
    height: 200px;
    box-shadow: 0 1px 2px 3px #c7c7c7;
      margin: 0 auto;
/*   overflow:auto; */
  overflow-y:auto;
      line-height: 38px;
   padding:15px;
}

#loadedPageContainer p{
      box-shadow: 0 1px 2px 0px #dee5ea;
}

#loadedPageContainer p:first-child {
    box-shadow: 0 4px 2px 1px #de004b;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li data-page="1">page 1</li>
  <li data-page="2">page 2</li>
  <li data-page="3">page 3</li>
  <li data-page="4">page 4</li>
</ul>
<p>Please click same pages 2 or 3 times to see actual issue below or in url on forward,backward browser button click</p>
<div id="loadedPageContainer">
  
</div>

注意:只有 history API 堆栈的顶部不应有重复

为了更好地查看，这里有一个 codepen 链接:https://codepen.io/eabangalore/pen/KKgOwgN 请帮助我提前致谢!!

Answer 1

为了避免 History API 堆栈中出现重复条目​​，有必要将当前页面地址与将使用 History API 添加的新地址进行比较。

此外，您需要使用 urlObj.searchParams.set('page', page) 而不是 urlObj.searchParams.append('page', page)因为 append 实际上并没有更改查询参数 name。 append 只是将同名的新查询参数添加到 URL。

试试这个代码，它一定有帮助:

$('li').on('click', function () {
    var baseUrl = location.href;
    var page = $(this).attr('data-page');
    var urlObj = new URL(baseUrl);

    urlObj.searchParams.set('page', page); // this line was changed

    if (urlObj.href !== baseUrl) { // href check was added
        $('#loadedPageContainer').prepend(`<p>${urlObj.href}</p>`);
        try {
            history.pushState({}, null, urlObj.href);
        } catch (e) {}
    }
});

window.addEventListener('popstate', function (e) {
    console.log('page navigated', e);
});