有没有一种方法可以在不重新加载页面的情况下修改当前页面的URL?
如果可能,我想访问#哈希之前的部分。
我只需要更改域之后的部分,所以我不会违反跨域策略。
window.location.href = "www.mysite.com/page2.php"; // this reloads
有没有一种方法可以在不重新加载页面的情况下修改当前页面的URL?
如果可能,我想访问#哈希之前的部分。
我只需要更改域之后的部分,所以我不会违反跨域策略。
window.location.href = "www.mysite.com/page2.php"; // this reloads
当前回答
在现代浏览器和HTML5中,有一种叫做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根据标签进行SPA的方法。。。
更改#非常简单,比如:
window.location.hash = "example";
你可以这样检测:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
其他回答
如果您想更改url但不想将条目添加到浏览器历史记录中,也可以使用HTML5 replaceState:
if (window.history.replaceState) {
//prevents browser from storing history with each change:
window.history.replaceState(statedata, title, url);
}
这将“破坏”后退按钮功能。在某些情况下,这可能是必需的,例如图像库(您希望后退按钮返回到库索引页,而不是返回到您查看的每个图像),同时为每个图像提供自己的唯一url。
使用HTML5历史API中的history.pushState()。
有关详细信息,请参阅HTML5历史API。
这段代码对我很有用。我在ajax应用程序中使用了它。
history.pushState({ foo: 'bar' }, '', '/bank');
一旦使用ajax将页面加载到ID中,它会自动更改浏览器url,而无需重新加载页面。
这是下面的ajax函数。
function showData(){
$.ajax({
type: "POST",
url: "Bank.php",
data: {},
success: function(html){
$("#viewpage").html(html).show();
$("#viewpage").css("margin-left","0px");
}
});
}
示例:从任何页面或控制器(如“Dashboard”),当我单击银行时,它会使用ajax代码加载银行列表,而无需重新加载页面。此时,浏览器URL将不会更改。
history.pushState({ foo: 'bar' }, '', '/bank');
但是当我在ajax中使用这段代码时,它会在不重新加载页面的情况下更改浏览器url。下面是完整的ajax代码。
function showData(){
$.ajax({
type: "POST",
url: "Bank.php",
data: {},
success: function(html){
$("#viewpage").html(html).show();
$("#viewpage").css("margin-left","0px");
history.pushState({ foo: 'bar' }, '', '/bank');
}
});
}
在现代浏览器和HTML5中,有一种叫做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根据标签进行SPA的方法。。。
更改#非常简单,比如:
window.location.hash = "example";
你可以这样检测:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
这是我的解决方案(newUrl是您要用当前URL替换的新URL):
history.pushState({}, null, newUrl);