是否可以在浏览器不刷新页面的情况下更改位置 url？
想象一下，我希望用户更改某些字段上的某些值，因此 要更新的是 url（在问号后面）
所以 www.mysite.com/mypage?level=1&fav_fruit=apple&fav_food=pasta&...
这个想法是，如果它改变了“最喜欢的食物”，我可能只改变网址
www.mysite.com/mypage?level=1&fav_fruit=apple&fav_food=rice&...
但我不想刷新页面。
为什么？这样他/她就可以继续使用该页面，并且当他/她累了时，他可以按照离开时的方式为它添加书签（给它一个好名字）
有什么想法吗？
我会用 javascript 来做这个。
【问题讨论】：
标签： javascript html
在不刷新页面的情况下无法更新问号后面的部分，但可以更新 URL 哈希（看起来像http://domain.com/file.php#fav_fruit=apple）。我不知道如何在普通的旧 JavaScript 中做到这一点，但我已经使用 jQuery 和 jQuery.address plugin 做到了这一点。
然后，您可以设置文本框以在每次更改值时更新 URL，方法是执行以下操作：
$("#mytextbox").change(function(){
$.address.parameter("fav_fruit", $(this).value());
});
这个插件的好处是您可以附加一个函数，以便您可以检测 URL 何时更改（即重新加载书签时）：
$.address.externalChange(function(){
var favFruit = $.address.parameter("fav_fruit");
// Set any textboxes, values, etc
});
默认情况下，插件会在每次更新值时创建一个历史操作（因此您可以按后退/前进）。你不会想要这个，所以你必须在设置任何值之前拥有它：
$.address.history(false);
更新：这是在普通旧 JavaScript 中的样子：
// Stores name/value pairs that have changed
var updatedValues = [];
// Updates or adds an element to 'updatedValues'
function change(obj) {
updatedValues[obj.name] = obj.value;
setHash();
}
// Gets all the changes variables/values and sets the hash
function setHash() {
var arr = [];
for (x in updatedValues) {
arr.push(x + '=' + escape(updatedValues[x]));
}
location.hash = arr.join('&');
}
// Returns an object to return the values from the hash string
function readHash() {
var locationHashParts = location.hash.substr(1).split('&');
var params = {};
for (paramName in locationHashParts) {
var keypair = locationHashParts[paramName].split('=');
params[keypair[0]] = unescape(keypair[1]);
}
return params;
}
它不漂亮，但它有效。 change 是您设置要调用的表单元素，它将使用所需的位设置 URL 哈希。当您要设置表单字段中的值时（例如，当您加载页面时），您调用readHash 以获取具有location.hash 字段中所有参数/值的对象。
在http://jsfiddle.net/ENHFN/ 工作的示例（虽然您看不到位置哈希更改，但它使用了变量）。当我尝试将其分离出来时，我不断收到错误。
【讨论】：
出于实际跨浏览器的目的，Jonathons 的回答是正确的，但是使用 HTML5 实际上可以在不刷新页面的情况下更改 URL！
目前只有 FireFox 和 Chrome 支持，但像往常一样，其他人迟早会采用它（阅读：稍后）。无论如何，你这样做：
window.history.pushState("object or string", "Title", "new-url");
第三个参数是你要设置的 URL。另外两个用于做更高级的事情，如果您只想更改 URL，则不必关心这些。如果您想了解整个故事，请阅读this。
【讨论】：