java 重新加载页面_修改URL而不重新加载页面

回答(18)

2 years ago

let stateObject = { foo: "bar" };

history.pushState(stateObject, "page 2", "newpage.html");

2 years ago

使用 window.history.pushState("object or string", "Title", "/new-url") ，但它仍然向服务器发送新的url请求

2 years ago

如果您要做的是允许用户书签/共享页面，并且您不需要它是完全正确的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 ，使用如下内容：

if (window.location.hash.length > 0){

window.location = window.location.hash.substring(1);

}

希望有道理！对于某些情况，这是一种有用的方法 .

2 years ago

如果您不仅仅是更改URL片段，那么对该位置的任何更改( window.location 或 document.location )都将对该新URL产生请求 . 如果更改URL，则更改URL .

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

2 years ago

正如Vivart和geo1701已经提到的那样，HTML5 replaceState就是答案 . 但是并非所有浏览器/版本都支持它 . History.js包含HTML5状态功能，并为HTML4浏览器提供额外支持 .

2 years ago

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

从here了解更多相关信息

2 years ago

这是我的解决方案:( newUrl是你想要替换当前新url的新url)

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

2 years ago

在现代 browsers and HTML5 中，窗口 history 上有一个名为 pushState 的方法 . 这将更改URL并将其推送到历史记录而不加载页面 .

您可以像这样使用它，它将需要3个参数，1)状态对象2) Headers 和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');

你也可以改变 # 为

更改 # 非常简单，如下所示：

window.location.hash = "example";

你可以像这样检测它：

window.onhashchange = function () {

console.log("#changed", window.location.hash);

}

2 years ago

在HTML5之前我们可以使用：

parent.location.hash = "hello";

和：

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

此方法将重新加载您的页面，但HTML5引入了不应重新加载页面的 history.pushState(page, caption, replace_url) .

2 years ago

使用HTML 5 History API中的 history.pushState()

2 years ago

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

if (window.history.replaceState) {

//prevents browser from storing history with each change:

window.history.replaceState(statedata, title, url);

}

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

2 years ago

parent.location.hash = "hello";

2 years ago

现在可以在Chrome，Safari，FF4和IE10pp4中完成此操作！

例：

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;

}

};

有关操纵浏览器历史记录的更深入了解，请参阅this MDN article .

2 years ago

以下是在不重新加载页面的情况下更改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');

2 years ago

正如Thomas Stjernegaard Jeppesen所指出的，当用户浏览您的Ajax链接和应用程序时，您可以使用History.js修改URL参数 .

自那个答案已经过去差不多一年了，History.js不断发展，变得更加稳定和跨浏览器 . 现在，它可以用于管理HTML5兼容的历史状态以及许多HTML4浏览器中的历史状态 . In this demo您可以看到它如何工作的示例(以及能够尝试其功能和限制 .

如果您需要有关如何使用和实现此库的任何帮助，我建议您查看演示页面的源代码：您将看到它非常容易 .

最后，为了关于使用哈希(和hashbangs)的问题的全面解释，请查看Benjamin Lupton撰写的this link .

2 years ago

您可以添加锚标签 . 我在我的网站http://www.piano-chords.net/上使用此功能，以便我可以使用谷歌分析跟踪人们在页面上访问的内容 . 我只是添加一个锚标签，然后添加我要跟踪的页面部分 .

var trackCode = "/#" + urlencode($("myDiv").text());

window.location.href = "http://www.piano-chords.net" + trackCode;

pageTracker._trackPageview(trackCode);

2 years ago

NOTE: If you are working with an HTML5 browser then you should ignore this answer. This is now possible as can be seen in the other answers.

如果不重新加载页面，则无法在浏览器中修改 URL . URL表示上次加载的页面的内容 . 如果你更改它( document.location )，它将重新加载页面 .

一个显而易见的原因是，您在 www.mysite.com 上写了一个看起来像银行登录页面的网站 . 然后更改浏览器URL栏以说出 www.mybank.com . 用户将完全不知道他们真的在看 www.mysite.com .

2 years ago

假设你想对你自己的网址做些什么，可能会被htaccess迷住 .