Javascript 更改网址而不刷新页面

Change URL without refresh the page

提问by Mehdi Dehghani

I would like to replace an url without page refresh.

我想在不刷新页面的情况下替换 url。

I need to change:

我需要改变：

https://example.com/en/step1

to

到

https://example.com/en/step2

How to do that ?

怎么做 ？

回答by Mehdi Dehghani

Update

更新

Based on Manipulating the browser history, passing the empty string as second parameter of pushStatemethod (aka title) should be safe against future changes to the method, so it's better to use pushStatelike this:

基于Manipulating the browser history，将空字符串作为pushState方法的第二个参数（又名 title）传递应该是安全的，以防将来对该方法进行更改，因此最好这样使用pushState：

history.pushState(null, '', '/en/step2');    

You can read more about that in mentioned article

您可以在提到的文章中阅读更多相关信息

Original Answer

原答案

Use history.pushStatelike this:

history.pushState像这样使用：

history.pushState(null, null, '/en/step2');

• More info (MDN article): Manipulating the browser history
• Can I use
• Maybe you should take a look @ Does Internet Explorer support pushState and replaceState?

• 更多信息（MDN 文章）：操作浏览器历史记录
• 我可以用吗
• 也许你应该看看@Internet Explorer 是否支持pushState 和replaceState？

---

---

Update 2to answer Idan Dagan's comment:

更新 2以回答Idan Dagan的评论：

Why not using history.replaceState()?

为什么不使用history.replaceState()？

From MDN

来自MDN

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one

history.replaceState() 的操作与 history.pushState() 完全一样，除了 replaceState() 修改当前历史条目而不是创建一个新历史条目

That means if you use replaceState, yes the url will be changed but user can not use Browser's Back button to back to prev. state(s) anymore (because replaceStatedoesn't add new entry to history) and it's not recommended and provide bad UX.

这意味着如果您使用replaceState，是的 url 将被更改，但用户不能使用浏览器的后退按钮返回到上一个。state(s) 不再（因为replaceState不会向历史添加新条目）并且不推荐它并提供糟糕的用户体验。

Update 3to add window.onpopstate

更新 3添加window.onpopstate

So, as this answer got your attention, here is additional info about manipulating the browser history, after using pushState, you can detect the back/forward button navigation by using window.onpopstatelike this:

因此，由于这个答案引起了您的注意，这里是有关操纵浏览器历史记录的附加信息，使用后pushState，您可以使用以下方法检测后退/前进按钮导航window.onpopstate：

window.onpopstate = function(e) {
    // ... 
};

As the first argument of pushStateis an object, if you passed an objectinstead of null, you can access that object in onpopstatewhich is very handy, here is how:

由于的第一个参数pushState是一个对象，如果你传递了一个object而不是null，你可以访问那个onpopstate非常方便的对象，方法如下：

window.onpopstate = function(e) {
    if(e.state) {
        console.log(e.state);
    }
};

Update 4to add Reading the current state:

更新 4添加读取当前状态：

When your page loads, it might have a non-null state object, you can read the state of the current history entry without waiting for a popstateevent using the history.stateproperty like this:

当您的页面加载时，它可能有一个非空状态对象，您可以popstate使用如下history.state属性读取当前历史条目的状态，而无需等待事件：

console.log(history.state);

Bonus: Use following to check history.pushStatesupport:

奖励：使用以下内容检查history.pushState支持：

if (history.pushState) {
  // \o/
}

回答by Christian Volquardsen

When you use a function ...

当你使用一个函数...

<p onclick="update_url('/en/step2');">Link</p>

<script>
function update_url(url) {
    history.pushState(null, null, url);
}
</script>