在浏览器中更改URL，而不用使用JavaScript加载新页面

我如何有一个JavaScript操作，可能对当前页面有一些影响，但也会改变浏览器中的URL，所以如果用户点击重新加载或书签，那么新的URL将被使用?

如果后退按钮可以重新加载原始URL，那就太好了。

我试图在URL中记录JavaScript状态。

307575 次浏览
小开

我强烈怀疑这是不可能的，因为如果是的话，这将是一个令人难以置信的安全问题。例如，我可以创建一个看起来像银行登录页面的页面，并使地址栏中的URL看起来就像真正的银行一样!

也许如果你解释一下为什么你想这样做，人们可能会建议其他的方法……

[2011年编辑:自从我在2008年写下这个答案以来，关于HTML5技术，只要它来自同一个来源，就允许修改URL]的更多信息已经被揭示出来]

小开

如果你想让它在不支持history.pushState和history.popState的浏览器中工作，“旧”的方法是设置片段标识符，这不会导致页面重新加载。

基本思想是将window.location.hash属性设置为一个包含你需要的任何状态信息的值，然后使用窗口。onhashchange事件，或者对于不支持onhashchange的旧浏览器(IE <8、Firefox <3.6)，定期检查哈希是否已经改变(例如使用setInterval)并更新页面。您还需要检查页面加载时的哈希值，以设置初始内容。

如果你正在使用jQuery，有一个hashchange插件将使用浏览器支持的任何方法。我相信也有其他库的插件。

需要注意的一件事是与页面上的id发生碰撞，因为浏览器将滚动到具有匹配id的任何元素。

小开

浏览器安全设置阻止人们直接修改显示的url。你可以想象这会导致什么样的网络钓鱼漏洞。

在不更改页面的情况下更改url的唯一可靠方法是使用内部链接或散列。例如:http://site.com/page.html变成http://site.com/page.html#item1。这种技术经常用于hijax(AJAX +保存历史)。

当这样做的时候，我经常只使用哈希作为href的操作链接，然后用jquery添加点击事件，使用所请求的哈希来确定和委托操作。

我希望这能让你走上正确的道路。

小开

window.location.href包含当前URL。您可以读取它，可以添加到它，也可以替换它，这可能会导致页面重新加载。

如果，就像听起来的那样，你想在URL中记录javascript状态，这样它就可以被书签，而不需要重新加载页面，将它附加到当前URL的#后面，并让onload事件触发的一段javascript解析当前URL，以查看它是否包含保存的状态。

如果你使用?而不是#，您将强制页面重新加载，但由于您将在加载时解析保存的状态，这实际上可能不是一个问题;这将使前进和后退按钮也能正常工作。

小开

有一个Yahoo YUI组件(浏览器历史记录管理器)可以处理这个:http://developer.yahoo.com/yui/history/

小开

我想知道如果它是可能的，只要在页面上的父路径是相同的，只有新的东西被追加到它。

例如，假设用户在页面:http://domain.com/site/page.html 然后浏览器可以让我执行location.append = new.html 页面变成:http://domain.com/site/page.htmlnew.html，浏览器不会改变它。< / p >

或者只是允许这个人改变get参数，所以让我们location.get = me=1&page=1。

所以原来的页面变成http://domain.com/site/page.html?me=1&page=1并且它不刷新。

#的问题是，当哈希被改变时，数据不会被缓存(至少我不这么认为)。因此，这就像每次加载一个新页面时，而非- __abc0页面中的后退和前进按钮能够缓存数据，而不花费时间重新加载数据。

据我所知，雅虎历史记录已经一次性加载了所有数据。它似乎没有执行任何Ajax请求。因此，当div被用来处理不同的方法时，该数据不会为每个历史状态存储。

小开
最佳答案

在HTML 5中，使用history.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，请使用history.replaceState代替。

小开

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后面紧跟着一个散列(#!)。

小开

有一个jquery插件http://www.asual.com/jquery/address/

我觉得这就是你需要的。

小开

jQuery有一个很棒的插件，可以改变浏览器的URL，叫做 jquery-push 。

JavaScript pushState和jQuery可以一起使用，比如:

history.pushState(null, null, $(this).attr('href'));

例子:

$('a').click(function (event) {


// Prevent default click action
event.preventDefault();


// Detect if pushState is available
if(history.pushState) {
history.pushState(null, null, $(this).attr('href'));
}
return false;
});

只使用JavaScript history.pushState()，它改变了引用者，在更改状态后创建的XMLHttpRequest对象的HTTP报头中使用。

例子:

window.history.pushState("object", "Your New Title", "/new-url");

pushState()方法:

pushState()接受三个参数:一个状态对象、一个标题(当前被忽略)和一个URL(可选)。让我们更详细地分析这三个参数:

  1. 状态对象 -状态对象是一个JavaScript对象，它与由pushState()创建的新历史条目相关联。每当用户导航到新状态时，就会触发一个popstate事件，并且该事件的state属性包含历史条目的状态对象的副本。

    状态对象可以是任何可以序列化的对象。因为Firefox将状态对象保存到用户的磁盘上，以便在用户重新启动浏览器后可以恢复它们，所以我们对状态对象的序列化表示施加了640k字符的大小限制。如果将一个状态对象的序列化表示大于此值传递给pushState()，该方法将抛出异常。如果您需要更多的空间，建议使用sessionStorage和/或localStorage。

  2. 标题 - Firefox当前忽略此参数，尽管将来可能会使用它。在这里传递空字符串应该是安全的，以防将来对方法进行更改。或者，您可以为您要移动到的州传递一个简短的标题。

  3. URL -新的历史记录项的URL由这个参数给出。注意，浏览器不会在调用pushState()之后尝试加载这个URL，但它可能稍后尝试加载URL，例如在用户重新启动浏览器之后。新的URL不需要是绝对的;如果它是相对的，它会相对于当前URL进行解析。新URL必须与当前URL的来源相同;否则，pushState()将抛出异常。可选参数。如果未指定，则将其设置为文档的当前URL。

小开

我的代码是:

//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;
});
});

这就是全部:)

小开

我成功地做到了:

location.hash="myValue";

它只是将#myValue添加到当前URL。如果你需要在page Load上触发一个事件，你可以使用相同的location.hash来检查相关的值。只要记住从location.hash返回的值中删除#即可。

var articleId = window.location.hash.replace("#","");
小开

什么是为我工作是- history.replaceState()函数这是如下-

history.replaceState(data,"Title of page"[,'url-of-the-page']);

这将不会重新加载页面，你可以使用javascript的事件

小开

我给出了一个更简单的答案，

window.history.pushState(null, null, "/abc")

这将在浏览器URL中的域名后面添加/abc。只需复制这段代码并将其粘贴到浏览器控制台，就可以看到URL更改为“https://stackoverflow.com/abc”。


提交答案