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

Question

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

如果可能的话,我想访问#hash 之前的部分.

我只需要在域之后更改部分,因此它不像我违反了跨域策略.

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

Answer 1

现在可以在Chrome,Safari,FF4 +和IE10pp4 +中完成!

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

例:

 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文章.

Answer 2

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

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

从这里了解更多相关信息

Answer 3

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

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

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

Answer 4

注意:如果您使用的是document.location浏览器,则应忽略此答案.现在可以在其他答案中看到这一点.

www.mysite.com没有重新加载页面就无法修改浏览器.URL表示上次加载的页面的内容.如果你改变它(www.mybank.com)那么它将重新加载页面.

一个显而易见的原因是,您编写的网站www.mysite.com看起来像银行登录页面.然后你改变浏览器的URL栏来说document.location.用户将完全不知道他们真的在看www.mysite.com.

Answer 5

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

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

Answer 6

parent.location.hash = "hello";

Answer 7

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

Answer 8

在现代浏览器和HTML5中,有一个名为pushStateon window 的方法history.这将更改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');

你也可以改变history.pushStatefor #,这不会重新加载页面,这是根据hashtag <HTML5 browsers做的方式#...

改变pushState很容易,做得像:

window.location.hash = "example";

你可以像这样检测它:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Answer 9

在HTML5之前我们可以使用:

parent.location.hash = "hello";

和:

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

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

Answer 10

如果您要做的是允许用户书签/共享页面,并且您不需要它是完全正确的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);
}

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

Answer 11

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

Answer 12

您可以使用这个漂亮而简单的功能在您的应用程序的任何地方执行此操作。

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

您不仅可以编辑 URL，还可以同时更新标题。

Answer 13

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

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

Answer 14

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

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

Answer 15

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

从那个答案开始差不多一年了,History.js不断发展,变得更加稳定和跨浏览器.现在,它可以用于管理HTML5兼容的历史状态以及许多HTML4浏览器中的历史状态.在本演示中,您可以看到它的工作原理(以及能够尝试其功能和限制的示例).

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

最后,有关使用哈希(和hashbangs)的问题的全面解释,请查看Benjamin Lupton的链接.

Answer 16

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

有关更多详细信息，请参考HTML5历史记录API。

Answer 17

你的新网址。

let newUrlIS =  window.location.origin + '/user/profile/management';

从某种意义上说，调用 pushState() 类似于设置 window.location = "#foo"，两者都将创建和激活与当前文档关联的另一个历史条目。但是 pushState() 有几个优点：

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

您可以查看根目录：https : //developer.mozilla.org/en-US/docs/Web/API/History_API