setLocation不刷新网页 [英] setLocation without refreshing webpage
问题描述
是否有可能在浏览器不刷新页面的情况下更改位置url？
想象一下，我希望用户在某些字段上更改某些值，并且这个
更新是url（在问号后面）
so 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做到这一点。
无法在刷新页面后更新问号后面的部分，但可以更新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）;
//设置任何文本框，值等
}）;
默认情况下，插件会在每次更新值时创建一个历史记录动作（因此您可以按回/前锋）。你不需要这个，所以你必须有这个之前，你设置任何值：
$。address.history（假）;
更新：
//存储已更改的名称/值对
var updatedValues = [];
//将元素更新或添加到'updatedValues'
函数更改（obj）{
updatedValues [obj.name] = obj.value;
setHash（）;
//获取所有更改变量/值并设置散列
函数setHash（）{
var arr = [];
for（x in updatedValues）{
arr.push（x +'='+ escape（updatedValues [x]））;
}
location.hash = arr.join（'&'）;
}
//返回一个从哈希字符串返回值的对象
函数readHash（）{
var locationHashParts = location.hash.substr（1） .split（ '&安培;'）;
var params = {};
$ b $（paramName in locationHashParts）{
var keypair = locationHashParts [paramName] .split（'='）;
params [keypair [0]] = unescape（keypair [1]）;
}
返回参数;
}
这并不美观，但它有效。 change 是您设置表单元素以调用的方式，它会将URL哈希设置为所需的位。当你想在表单字段中设置值时（例如，当你加载页面时），你可以调用 readHash 来获得一个包含所有参数/值的对象 location.hash 字段。
它在 http://jsfiddle.net/ENHFN/ （尽管你看不到位置哈希变化，它使用变量）。当我试图将它分离出来时，我总是收到错误。
is it possible to change the location url without the browser refreshing the page ?
imagine I want the user to change some values on some fields and as a consequence of this to update is url (following the question mark)
so www.mysite.com/mypage?level=1&fav_fruit=apple&fav_food=pasta&...
the idea is that if it changes the 'favourite food' i might change the url only
www.mysite.com/mypage?level=1&fav_fruit=apple&fav_food=rice&...
but I don't want to refresh the page.
why ? so he/she can continue to use the page and when he/she is tired he can bookmark it the way it left it (given a good name to it)
any idea ?
I will do this with javascript.
It's not possible to update the part after the question mark without refreshing the page, but you can update the URL hash (so it looks like http://domain.com/file.php#fav_fruit=apple). I don't know how to do it in plain old JavaScript but I have done this using jQuery and the jQuery.address plugin.
You can then set the textbox to update the URL every time the value is changed by doing something like the following:
$("#mytextbox").change(function(){
$.address.parameter("fav_fruit", $(this).value());
});
The good thing with this plugin is that you can attach a function so that you can detect when the URL is changed (i.e. when the bookmark is reloaded):
$.address.externalChange(function(){
var favFruit = $.address.parameter("fav_fruit");
// Set any textboxes, values, etc
});
By default, the plugin will create a history action everytime a value is update (so you can press back/forward). You wouldn't want this so you'd have to have this before you set any values:
$.address.history(false);
Update: Here's what it looks like in plain old 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;
}
It's not pretty, but it works. change is what you set your form elements to call and it will set the URL hash with the required bits. When you want to set the values in the form fields (for example, when you load the page), you call the readHash to get an object with all the parameters/values in the location.hash field.
Example of it working at http://jsfiddle.net/ENHFN/ (although you can't see the location hash change, it uses the variable). I kept getting errors when I tried to separate it out.
这篇关于setLocation不刷新网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
