javascript - setLocation 不刷新网页

Question

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

想象一下，我希望用户更改某些字段的某些值，因此要更新的是url(问号后面)

所以 www.mysite.com/mypage?level=1&fav_fruit=apple&fav_food=pasta&...

这个想法是，如果它改变了“最喜欢的食物”，我可能只改变 url

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 以获取一个对象，其中包含 位置中的所有参数/值。散列字段。

它在 http://jsfiddle.net/ENHFN/ 工作的例子(虽然你看不到位置哈希变化，但它使用了变量)。当我尝试将其分离出来时，我不断出错。