Question

是否可以更改url栏中的参数，以便按钮点击参数以进行更改？到目前为止，我有这个：

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是正确的，但如何在网址栏中进行更改？是否有可能没有页面重新加载？提前谢谢！

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）

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

1 个答案: