javascript - 如何避免在 History Api Stack 顶部重复推送

Question

我面临在堆栈Historyapi 堆栈顶部推送重复的问题

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

问题：我想以与单击相同的方式推送所有页面而不在顶部重复history api，这样当浏览器前进、后退按钮被点击时，url 应该改变（现在需要点击 2 次）

这是我的项目设置的样子（单击同一页面 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>

注意：只有historyapi 堆栈的顶部不应有重复项

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

标签： javascriptjqueryurlnavigation

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);
});