更改浏览器的URL，而无需加载使用JavaScript

Question

我怎么会有一个JavaScript的行动，可能在当前页面上有一定的影响，但也将改变URL在浏览器中，所以如果用户点击刷新或书签的新页面新的网址被使用？

如果后退按钮将重新加载原始URL，这也会很好。

我想在URL中记录JavaScript状态。

Answer 1

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

的基本思想是将window.location.hash属性设置为包含任何你需要的状态信息，然后可以使用window.onhashchange event，或不支持onhashchange旧的浏览器（IE < 8，火狐3.6 <）的值，定期检查哈希是否已更改（例如使用setInterval）并更新页面。您还需要在页面加载时检查散列值以设置初始内容。

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

有一两件事要小心与网页上的IDS碰撞，因为浏览器将滚动具有匹配ID的任何元素。

Answer 2

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

或许，如果你解释为什么你想这样做，人们也许能够提出备选方法...

[编辑2011年：因为我在2008年写了这个答案，更多信息已经到了光对于一个HTML5 technique允许的URL，只要它是来自同一产地】

Answer 3

浏览器安全设置可以防止用户直接修改显示的网址。您可以想象会导致的网络钓鱼漏洞。

只有在不更改页面的情况下更改url才是可靠的方法，那就是使用内部链接或散列。例如：http://site.com/page.html变为http://site.com/page.html#item1。这种技术通常用于hijax（AJAX +保留历史记录）。

做这件事时，我会往往只是用来与哈希作为HREF的动作链接，然后点击添加与使用所请求的散列值来确定，并委托行动jQuery的事件。

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

Answer 4

window.location.href包含当前的URL。您可以从中读取，您可以附加到它，并且可以替换它，这可能会导致页面重新加载。

如果听起来像是想要在URL中记录JavaScript状态，以便可以将其加入书签，而无需重新加载页面，可以在＃之后将它追加到当前URL并且具有一段由onload触发的JavaScript事件解析当前URL以查看它是否包含保存的状态。

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

Answer 5

有一个雅虎的YUI组件（浏览器历史记录管理器），它可以处理这个问题：http://developer.yahoo.com/yui/history/

Answer 6

我想知道它是否会只要更多钞票作为页面的父路径是一样的，只是新的东西附加到它。

所以像我们说的用户在页面：http://domain.com/site/page.html 然后，浏览器可以让我做location.append = new.html 和页面变为：http://domain.com/site/page.htmlnew.html和浏览器不改变它。

或者只是允许该人更改获取参数，所以让我们location.get = me=1&page=1。

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

＃的问题是当散列被改变时数据没有被缓存（至少我不这么认为）。因此，每次加载新页面时都是如此，而非Ajax页面中的后退和前进按钮能够缓存数据，并且不会花费时间重新加载数据。

从我所看到的，雅虎的历史事物已经加载所有的数据一次。它似乎没有做任何Ajax请求。因此，当使用div来处理不同的超时方法时，不会为每个历史记录状态存储该数据。

Answer 7

对于HTML 5，请使用history.pushState function。举个例子：

<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> 

和A HREF：

<a href="#" id='click'>Click to change url to bar.html</a> 

---

如果你想改变URL而不增加后退按钮列表中的条目，使用history.replaceState代替。

Answer 8

Facebook的照片库使用URL中的#hash来执行此操作。下面是一些例子网址：

点击之前 '下一步'：

/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。

Answer 9

有位置。在http://probablyinteractive.com/url-hunter

Answer 10

哈希=“文本”有一个jQuery插件http://www.asual.com/jquery/address/

我觉得这是你所需要的。

Answer 11

的jQuery有改变浏览器的网址，称jQuery-pusher一个伟大的插件。

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

仅使用的JavaScripthistory.pushState()，它更改引用链接器，该引用链接器在更改状态后创建的XMLHttpRequest对象的HTTP标头中使用。

实施例：

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

的pushState的（）方法：

pushState()三个参数：一个状态对象，一个标题（这是目前忽略），和（任选地）一个URL。让我们来看看这三种参数的详细信息：

1. 状态对象 - 国家目标是将它与pushState()创建新的历史条目相关的JavaScript对象。只要用户导航到新状态，就会触发popstate事件，并且事件的state属性包含历史记录条目状态对象的副本。

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

2. 标题 - Firefox目前忽略此参数，虽然它可能在将来使用它。在这里传递空字符串应该对未来对该方法的更改是安全的。或者，您可以为您所移动的州份传递简短的标题。

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

Answer 12

我的代码是：

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

这是所有:)

Answer 13

我已经受够了成功：

location.hash="myValue"; 

它只是增加#myValue到当前的URL。如果您需要在页面加载中触发事件，则可以使用相同的location.hash来检查相关的值。请记住从location.hash返回的值中删除#，例如

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