有没有一种方法可以让我在不重新加载页面的情况下修改当前页面的URL?
如果可能的话,我想访问***之前的部分,即#哈希值。
我只需要改变***域名之后的部分,所以我不会违反跨域政策。
window.location.href = "www.mysite.com/page2.php"; // Sadly this reloads
现在可以在Chrome、Safari、Firefox 4+和Internet Explorer 10pp4+中进行!
更多信息请看此问题'的回答。 https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page
例:{{{5692695}}。
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
来检测后退/前进按钮的导航。
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
更深入地了解如何操作浏览器历史记录,请参阅这篇MDN文章。
HTML5引入了[history.pushState()
](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method)和[`history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method)方法,分别允许您添加和修改历史条目。
window.history.pushState('page2', 'Title', '/page2.php');
从[这里][1]阅读更多相关内容。
[1]: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
如果您想更改url,但又不想将该条目添加到浏览器历史记录中,您也可以使用HTML5 replaceState。
if (window.history.replaceState) {
//prevents browser from storing history with each change:
window.history.replaceState(statedata, title, url);
}
这将'打破&39。 的后退按钮功能。 这在某些情况下可能是必需的,比如一个图片库(你想让后退按钮返回到图片库索引页,而不是返回到你浏览的每一张图片),同时给每张图片一个独特的网址。
**注意:如果你使用的是HTML5浏览器,那么你应该忽略这个答案。从其他答案中可以看出,现在可以做到这一点了。
没有办法在不重新加载页面的情况下修改浏览器中的URL。URL代表最后加载的页面。如果你改变它(document.location
),那么它将重新加载页面。
一个明显的原因是,你在www.mysite.com
上写了一个网站,看起来像一个银行登录页面。然后你把浏览器的URL栏改为www.mybank.com
。用户将完全不知道他们真正看到的是www.mysite.com
。
正如 Vivart 和 geo1701 所述,HTML5 replaceState 就是答案。 然而它并不是所有浏览器/版本都支持。 History.js][1]封装了HTML5状态功能,并为HTML4浏览器提供了额外的支持。
在现代浏览器和HTML5中,窗口 "history "上有一个叫做 "pushState "的方法。 它将改变URL并将其推送到历史记录中,而无需加载页面。
你可以像这样使用它,它需要3个参数,1)状态对象 2)标题和一个URL)。
window.history.pushState({page: "another"}, "another page", "example.html");
这将改变URL,但不重新加载页面。 另外,它不会检查页面是否存在,所以如果你做了一些对URL有反应的JavaScript代码,你可以像这样使用它们。
还有history.replaceState()
,它做的事情是完全一样的,只是它将修改当前的历史记录,而不是创建一个新的历史记录。
你也可以创建一个函数来检查history.pushState
是否存在,然后像这样继续工作。
function goTo(page, title, url) {
if ("undefined" !== typeof history.pushState) {
history.pushState({page: page}, title, url);
} else {
window.location.assign(url);
}
}
goTo("another page", "example", 'example.html');
也可以把 "#"改成"<HTML5浏览器",这样就不会重载页面了。 这就是Angular根据hashtag做[SPA][1]的方法......
改变#
很简单,像这样做。
window.location.hash = "example";
而你可以这样检测。
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
如果你想做的是允许用户收藏/分享页面,而且你不需要它是完全正确的URL,而且你也不使用哈希锚来做其他事情,那么你可以分两部分来做。 你使用上面讨论的location.hash,然后在主页上实现一个检查,寻找一个带有hash锚的URL,并将你重定向到随后的结果。
举个例子
1)用户在www.site.com/section/page/4
上。
2)用户做了一些操作,将URL改为www.site.com/#/section/page/6
(带哈希值)。
假设你'已经把第6页的正确内容加载到了页面中,所以除了哈希值之外,用户不会受到太大的干扰。
4)别人或同一用户在以后的日子里,到www.site.com/#/section/page/6
。
www.site.com/
上的代码将用户重定向到www.site.com/section/page/6
,使用类似这样的代码。if (window.location.hash.length > 0){
window.location = window.location.hash.substring(1);
}
希望这有意义! 对于某些情况来说,这是一个有用的方法。
下面是无需重新加载页面就可以更改URL的功能。 它只支持HTML5。
function ChangeUrl(page, url) {
if (typeof (history.pushState) != "undefined") {
var obj = {Page: page, Url: url};
history.pushState(obj, obj.Page, obj.Url);
} else {
window.location.href = "homePage";
// alert("Browser does not support HTML5.");
}
}
ChangeUrl('Page1', 'homePage');
如果你不只是改变URL片段,任何对LOECTION(无论是window.location
还是document.location
)的改变都会引起对新URL的请求。如果你改变了URL,你就改变了URL。
如果你不喜欢你目前使用的URL,请使用服务器端的URL重写技术,如Apache的mod_rewrite。
你可以添加锚标签。 我在我的网站http://www.piano-chords.net/ 上使用了这个功能,这样我就可以用 Google Analytics 跟踪人们在页面上访问的内容。
我只需添加一个锚标签,然后添加我想跟踪的页面部分。
var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
正如Thomas Stjernegaard Jeppesen所指出的,你可以使用History.js在用户浏览你的Ajax链接和应用程序时修改URL参数。
从那个答案到现在已经过去了将近一年,History.js也在不断成长,变得更加稳定和跨浏览器。 现在,它可以用于管理HTML5兼容的历史状态,也可以用于许多只支持HTML4的浏览器。 在这个演示中]2你可以看到它如何工作的一个例子(以及能够尝试它的功能和限制。
如果你需要任何帮助来使用和实现这个库,我建议你看看演示页面的源代码。 你会看到它非常容易做到。
最后,关于使用哈希(和hashbangs)可能存在的问题的全面解释,请查看Benjamin Lupton的[本链接][3]。
[3]:https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
使用HTML 5 History API中的history.pushState()
。
更多细节请参考[HTML5 History API][1]。
使用。
let stateObject = { foo: "bar" };
history.pushState(stateObject, "page 2", "newpage.html");
你可以在博文中看到更新浏览器的URL,不重载页面。
1:
使用window.history.pushState("object or string", "Title", "/new-url")
,但它仍然会向服务器发送一个新的URL请求。