Question

是否可以在浏览器刷新页面的情况下更改位置网址？

想象一下，我希望用户在某些字段上更改某些值，并因此而改变更新是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执行此操作。

Answer 1

无法在不刷新页面的情况下更新问号后的部分，但您可以更新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字段中所有参数/值的对象。 / p>

它在http://jsfiddle.net/ENHFN/工作的示例（虽然您无法看到位置哈希更改，但它使用该变量）。当我试图把它分开时，我一直都会遇到错误。

Answer 2

对于实际的跨浏览器目的，Jonathons的回答是正确的，但使用HTML5实际上可以在不刷新页面的情况下更改URL！

到目前为止，只有FireFox和Chrome支持它，但与往常一样，其他人迟早会采用它（阅读：稍后）。无论如何，你这样做：

window.history.pushState("object or string", "Title", "new-url");

第三个参数是您要设置的URL。另外两个用于执行更高级的操作，如果您只想更改URL，则无需关心这些内容。如果您想了解整个故事，请阅读this。

setLocation没有刷新网页

2 个答案: