javascript - 使用 js 更改 url 参数，无需在单击按钮时重新加载页面

Question

这个问题已经有答案了:

How do I modify the URL without reloading the page? (21 个回答)

已关闭 9 年前。

是否可以更改网址栏中的参数，以便单击按钮来更改参数？到目前为止我有这个:

function change_product(){
var url =  'http://www.example.com/index.php?product=805';
var newSrc = '0';
newurl=url.replace(/(product=)[^\&]+/,'$1' + newSrc)
alert(newurl);
}    

<button class="save" type="BUTTON" onclick="change_product();">Copy</button>    

newurl 是正确的，但是如何让它在 URL 栏中改变呢？是否可以在不重新加载页面的情况下实现？预先感谢!

Answer 1

看一下 window.history.pushState()

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

这允许您更改地址栏中的 URL，而无需重新加载页面。

这是当前的支持:http://caniuse.com/#search=pushstate

var state = {}, newUrl = "test.html";
window.history.pushState(state, "Page Title", newUrl);

所以对你来说就像

function change_product(){
    var productId = 805;
    window.history.pushState({productId: productId} , "", "?product=" + productId);
}

Firefox 目前确实使用页面标题，但您可以在状态对象中设置它，然后使用 window.onpopstate 获取状态对象并设置页面标题(如果需要)。

如果您需要支持较旧的 IE 浏览器，有一些库可以帮助您(例如 History.js)