我如何让一个JavaScript动作对当前页面有一些影响,但也会改变浏览器中的URL,这样当用户点击重新加载或书签时,就会使用新的URL ?
如果后退按钮可以重新加载原始URL,那就太好了。
我试图在URL中记录JavaScript状态。
我如何让一个JavaScript动作对当前页面有一些影响,但也会改变浏览器中的URL,这样当用户点击重新加载或书签时,就会使用新的URL ?
如果后退按钮可以重新加载原始URL,那就太好了。
我试图在URL中记录JavaScript状态。
当前回答
Facebook的图片库在URL中使用#散列来实现这一点。下面是一些url示例:
在点击“下一步”之前:
/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507
点击“下一步”后:
/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507
注意,新URL后面紧跟着一个散列(#!)。
其他回答
我成功地做到了:
location.hash="myValue";
它只是将#myValue添加到当前URL。如果需要在page Load上触发事件,可以使用相同的位置。哈希来检查相关的值。只要记住从location返回的值中删除#即可。散列。
var articleId = window.location.hash.replace("#","");
Facebook的图片库在URL中使用#散列来实现这一点。下面是一些url示例:
在点击“下一步”之前:
/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507
点击“下一步”后:
/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507
注意,新URL后面紧跟着一个散列(#!)。
在HTML 5中,使用历史记录。pushState函数。举个例子:
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
和href:
<a href="#" id='click'>Click to change url to bar.html</a>
如果您希望在不向后退按钮列表添加条目的情况下更改URL,请使用历史记录。replaceState代替。
我的代码是:
//change address bar
function setLocation(curLoc){
try {
history.pushState(null, null, curLoc);
return false;
} catch(e) {}
location.hash = '#' + curLoc;
}
和行动:
setLocation('http://example.com/your-url-here');
和示例
$(document).ready(function(){
$('nav li a').on('click', function(){
if($(this).hasClass('active')) {
} else {
setLocation($(this).attr('href'));
}
return false;
});
});
这就是全部:)
我想知道如果它是可能的,只要在页面上的父路径是相同的,只有新的东西被追加到它。
比如,假设用户在http://domain.com/site/page.html页面 然后浏览器允许我进行定位。Append = new.html 页面变成:http://domain.com/site/page.htmlnew.html,浏览器不会更改它。
或者允许用户改变get参数,这里是location。Get = me=1&page=1。
所以原来的页面变成http://domain.com/site/page.html?me=1&page=1,它不刷新。
#的问题是,当哈希被改变时,数据不会被缓存(至少我不这么认为)。这就像每次加载一个新页面时,而非ajax页面中的后退和前进按钮能够缓存数据,而不需要花费时间重新加载数据。
据我所知,雅虎历史记录已经一次性加载了所有数据。它似乎没有执行任何Ajax请求。因此,当使用div处理不同的方法时,不会为每个历史状态存储数据。