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

问题描述 投票:2064回答:18

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

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

我只需要在域之后更改部分,因此我不会违反跨域策略。

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads
javascript html url url-rewriting friendly-url
18个回答
1851
投票

现在可以在Chrome,Safari,Firefox 4+和Internet Explorer 10pp4 +中完成此操作!

有关更多信息,请参阅此问题的答案:Updating address bar with new URL without hash or reloading the page

例:

 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


20
投票

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

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


13
投票

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

12
投票

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

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


12
投票

您可以添加锚标签。我在我的网站http://www.piano-chords.net/上使用它,以便我可以使用Google Analytics跟踪人们在页面上访问的内容。

我只是添加一个锚标记,然后添加我要跟踪的页面部分:

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

7
投票

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

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

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

最后,有关使用哈希(和hashbangs)的问题的全面解释,请查看Benjamin Lupton撰写的this link


4
投票

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

有关更多详细信息,请参阅HTML5 History API


-4
投票

使用:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

你可以在博客文章Update URL of browser without page reload中看到它。


-6
投票

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


-11
投票

假设你没有尝试做恶意的事情,那么你想对你自己的网址做的任何事情都可能与htaccess混在一起。


492
投票

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

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

here了解更多相关信息


112
投票

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

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

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


101
投票

注意:如果您使用的是HTML5浏览器,那么您应该忽略此答案。现在可以在其他答案中看到这一点。

没有重新加载页面就无法在浏览器中修改URL。 URL表示上次加载的页面的内容。如果你改变它(document.location)然后它将重新加载页面。

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


78
投票
parent.location.hash = "hello";

76
投票

这是我的解决方案(newUrl是您要用当前替换的新URL):

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

25
投票

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


23
投票

在现代浏览器和HTML5中,在窗口pushState上有一个名为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');

您也可以更改#<HTML5 browsers,它不会重新加载页面。这是Angular根据hashtag用来做SPA的方式......

更改#非常简单,如下所示:

window.location.hash = "example";

你可以像这样检测它:

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

21
投票

在HTML5之前我们可以使用:

parent.location.hash = "hello";

和:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.