关于javascript：如何在不重新加载页面的情况下修改URL？

How do I modify the URL without reloading the page?

有没有方法可以在不重新加载页面的情况下修改当前页面的URL？

如果可能的话，我想访问哈希前的部分。

我只需要更改域后的部分，所以这不像是违反跨域策略。

1	window.location.href="www.mysite.com/page2.php"; // Sadly this reloads

相关讨论

现在可以在Chrome、Safari、Firefox 4+和Internet Explorer 10pp4+中完成！

有关详细信息，请参阅此问题的答案：使用新的URL更新地址栏，而不使用哈希或重新加载页面

例子：

1
2
3
4
5

function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}

然后，您可以使用window.onpopstate检测后退/前进按钮导航：

1
2
3
4
5
6

window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};

要更深入地了解操纵浏览器历史记录，请参阅本文MDN。

相关讨论

HTML5引入了history.pushState()和history.replaceState()方法，允许分别添加和修改历史条目。

1	window.history.pushState('page2', 'Title', '/page2.php');

从这里了解更多有关此的信息

相关讨论

如果要更改URL但不想将条目添加到浏览器历史记录，也可以使用html5 replaceState：

1
2
3
4

if (window.history.replaceState) {
//prevents browser from storing history with each change:
window.history.replaceState(statedata, title, url);
}

这将"破坏"后退按钮的功能。在某些情况下可能需要这样做，例如图像库(您希望"上一步"按钮返回到"库索引"页，而不是在您查看的每个图像中向后移动)，同时为每个图像提供自己的唯一URL。

注意：如果您使用的是HTML5浏览器，则应忽略此答案。现在这是可能的，如其他答案所示。

如果不重新加载页面，就无法在浏览器中修改URL。该URL表示上次加载的页面是什么。如果您更改它(document.location)，那么它将重新加载页面。

一个明显的原因是，你在www.mysite.com上写了一个看起来像银行登录页面的站点。然后，您将浏览器的URL栏更改为"EDOCX1"(4)。用户将完全不知道他们真的在看www.mysite.com。

相关讨论

1	parent.location.hash ="hello";

相关讨论

这里是我的(你的解决方案newurl冰新网址，你想与"replace流式)：

1	history.pushState({}, null, newUrl);

相关讨论

如Vivart和GEO1701所述，HTML5替换状态是答案。但是，并非所有浏览器/版本都支持它。history.js包含HTML5状态功能，并为HTML4浏览器提供额外支持。

之前，我们可以使用HTML5。

1	parent.location.hash ="hello";

鸭子：

1	window.location.replace("http:www.example.com");

这个方法将加载你的页面，但introduced history.pushState(page, caption, replace_url)HTML5的，你不应该加载页。

相关讨论

如果您要做的是允许用户书签/共享页面，而您不需要它是正确的URL，并且您没有为任何其他内容使用哈希锚，那么您可以分两部分执行此操作：使用上面讨论的location.hash，然后在主页上执行检查，查找其中包含哈希锚的URL，然后重新设置将您转到后续结果。

例如：

1)用户在www.site.com/section/page/4上

2)用户执行一些操作，将URL更改为www.site.com/#/section/page/6(使用哈希)。假设您已经将第6页的正确内容加载到了页面中，所以除了散列之外，用户不会受到太大的干扰。

3)用户将此URL传递给其他人，或将其标记为书签。

4)其他人或以后同一用户前往www.site.com/#/section/page/6。

5)www.site.com/上的代码使用如下方式将用户重定向到www.site.com/section/page/6：

1
2
3

if (window.location.hash.length > 0){
window.location = window.location.hash.substring(1);
}

希望这有道理！在某些情况下，这是一种有用的方法。

在现代browsers和HTML5，有一个方法称为pushState在线history窗口。这将改变的URL和推它的历史没有加载的页。

你可以使用它，这样，它将把参数3、1)2)状态的对象的名称和URL)：

1
2
3
4
5
6
7
8
9
10
11
12

相关讨论

可以添加定位标记。我在我的网站http://www.piano-chords.net/上使用它，这样我就可以通过谷歌分析追踪人们在页面上访问的内容。

我只需添加一个锚标记，然后添加我要跟踪的页面部分：

1
2
3

var trackCode ="/#" + urlencode($("myDiv").text());
window.location.href="http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

相关讨论

如果您不只是更改URL片段，则对位置的任何更改(window.location或document.location都将导致对该新URL的请求。如果更改URL，则更改该URL。

如果您不喜欢当前使用的URL，请使用服务器端的URL重写技术，如Apache的mod_rewrite。

相关讨论

作为城市芒了托马斯stjernegaard PPL，你可以使用两个history.js修改URL参数的navigates whilst用户通过你的链接和AJAX的应用程序。

是年已通过硬件的方式，回答grew鸭，鸭history.js变得更稳定、跨浏览器。现在，它可以被用来处理两个美国历史的兼容HTML5的抵抗细胞多为只读browsers HTML4。在这里，你可以看到的演示如何以信息工程学院(AS抵抗人类能够尽其functionalities和限制。

"你需要任何帮助，在如何使用和实施这个图书馆，知道你采取一看源代码的demo页：你会看到它很容易做。

终于，一个综合解释了什么是什么的问题可以用散列(鸭hashbangs)退房的链接，这个城市他本杰明。

使用HTML 5 history.pushState()从历史的API。

HTML5的历史参考API的更多细节。

Use:

1 2	let stateObject = { foo:"bar" }; history.pushState(stateObject,"page 2","newpage.html");

你可以看到我的博客没有更新的URL的浏览器加载页面。

相关讨论

Use window.history.pushState("object or string","Title","/new-url"), but it will still send a new URL request to server.

相关讨论

假设你不想做一些恶意的事情，你想对你自己的网址做的任何事情都可以通过htaccess神奇地变成现实。

相关讨论