如何在不重新加载页面的情况下修改URL?
-
05-07-2019 - |
题
有没有办法可以在不重新加载页面的情况下修改当前页面的URL?
如果可能的话,我想访问之前的部分。
我只需要更改域之后的部分,因此我不会违反跨域政策。
window.location.href = "www.mysite.com/page2.php"; // Sadly this reloads
解决方案
现在可以在Chrome,Safari,Firefox 4+和Internet <!>资源管理器<!> 10pp4 +中完成此操作!
有关详细信息,请参阅此问题的答案: 使用新的更新地址栏没有哈希或重新加载页面的网址
示例:
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()
和 history.replaceState()
方法,其中允许您分别添加和修改历史记录条目。
window.history.pushState('page2', 'Title', '/page2.php');
从此处了解详情。
如果您想更改网址但又不想将该条目添加到浏览器历史记录中,您还可以使用HTML5 replaceState :
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栏更改为www.mybank.com
。用户完全不知道他们真的在看<=>。
parent.location.hash = "hello";
以下是我的解决方案(newUrl是您要用当前替换的新网址):
history.pushState({}, null, newUrl);
HTML5 replaceState就是答案,正如Vivart和geo1701已经提到的那样。但是并非所有浏览器/版本都支持它。 History.js 包含HTML5状态功能,并为HTML4浏览器提供额外支持。
在现代浏览器和HTML5 中,窗口pushState
上有一个名为history
的方法。这将更改URL并将其推送到历史记录而不加载页面。
您可以像这样使用它,它将需要3个参数,1)状态对象2)标题和URL):
window.history.pushState({page: "another"}, "another page", "example.html");
这将更改网址,但不会重新加载网页。此外,它不会检查页面是否存在,因此如果您执行一些对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');
此外,您可以更改#
for <HTML5 browsers
,这将不会重新加载页面。这是Angular根据标签用于 SPA 的方式......
更改<=>非常简单,如:
window.location.hash = "example";
你可以这样检测出来:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
在HTML5之前我们可以使用:
parent.location.hash = "hello";
和
window.location.replace("http:www.example.com");
此方法将重新加载您的网页,但HTML5引入了不应重新加载您网页的history.pushState(page, caption, replace_url)
。
如果你要做的是允许用户书签/共享页面,并且你不需要它是完全正确的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/
5)www.site.com/section/page/6
上的代码将用户重定向到<=>,使用以下内容:
if (window.location.hash.length > 0){
window.location = window.location.hash.substring(1);
}
希望有道理!对于某些情况,这是一种有用的方法。
如果<!>#8217;不仅仅是更改URL片段,那么对该位置的任何更改(window.location
或document.location
)都将导致对该新URL的请求。如果您更改了网址,则会更改网址。
使用服务器端URL重写技术,例如 Apache <!>#8217; s mod_rewrite 如果你不喜欢你正在使用的网址。
以下是在不重新加载页面的情况下更改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');
您可以添加锚标记。我在我的网站上使用这个 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链接和应用程序。
自那个答案以来差不多有一年了,History.js变得更加稳定和跨浏览器。现在,它可以用于管理HTML5兼容的历史状态以及许多HTML4浏览器中的历史状态。 在此演示中您可以看到它的工作原理示例(如以及能够尝试其功能和限制。
如果您需要有关如何使用和实现此库的任何帮助,我建议您查看演示页面的源代码:您将看到它非常容易。
最后,要全面解释使用哈希(和hashbangs)的问题,请查看此链接。
使用HTML 5 History API中的history.pushState()
。
有关详细信息,请参阅 HTML5历史记录API 。
使用:
let stateObject = { foo: "bar" };
history.pushState(stateObject, "page 2", "newpage.html");
您可以在博客文章中找到它 更新没有重新加载页面的浏览器的网址 。
使用window.history.pushState("object or string", "Title", "/new-url")
,但它仍会向服务器发送新的URL请求。
假设您没有尝试做恶意的事情,那么您希望对自己的网址做的任何事情都会被 htaccess 。