如何在不重新加载浏览器的情况下更改我的网址？答案

【问题标题】：How to change my Url without reloading the browser?如何在不重新加载浏览器的情况下更改我的网址？
【发布时间】：2014-04-27 04:16:22
【问题描述】：

基本上，当我单击主页上的链接时，我想使用一些 JavaScript 滑入一个新的 div 并更改 url，这样如果输入了 url，它就会带来正确的信息。单击链接时，我不希望加载整个页面。在从一个链接到另一个链接冲浪时，我想为网页更改设置动画，而不是加载一个新页面。

【问题讨论】：

标签： javascript html url

【解决方案1】：

有3种方法可以实现：

在锚点中使用纯 JavaScript（绝对不推荐）
通过这样做，我的意思是从字面上做：

<a href="javascript:goToHome()">Home page</a>

您可以这样做，但这意味着您将使用全局变量和函数污染全局范围，这是绝对不推荐的。

在所有锚点中使用“#” 这是最常见和最安全的方法，因为几乎所有主流浏览器及其不同版本都可用

<a href="#/home/">Home page</a>

散列的目的是将您直接带到您当前正在阅读的文档中的一个部分，该部分由 HTML 中的 id 属性定义，这适用于非常大的 HTML 文档。使用哈希和window.onhashchange 事件，您可以获得您想要的，除了一些旧版本的 IE 我认为是 7 及以下。

window.addEventListener('hashchange', function(event) {
    //your navigation logic here
});

更多关于hashchange: onhashchange event

使用window.history API 这是实现它的最新方法，因为它很新，并非所有浏览器都支持它，但它是一种很好的方法：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

其中：
stateObj：是一个可以在历史状态之间传递的对象。
title：只是新状态的标题。
url：要在地址栏中显示的新 URL。
该函数调用会在浏览器上触发window.onpopstate事件。

有关历史 API 的更多信息：HTML5 History API

希望对你有帮助。

【讨论】：

【解决方案2】：

你可以这样做：

window.location.hash = "id of the element to be scrolled to";

您可以使用我从css-tricks获取的这段代码

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

上面会自动为你完成工作。

Demo

【讨论】：

【解决方案3】：

如果你想使用“旧”浏览器，那么 window.location.hash 是你唯一的选择，这不能操纵整个 URL，只能操纵例如 #about 到最后。

如果您愿意放弃旧浏览器，则可以按照此处所述转到 window.history.pushState：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

以下是浏览器与 pushState 兼容性的概述：http://caniuse.com/#search=pushstate

此线程中有更多信息：How can I change the page URL without refreshing the page?

【讨论】：

【解决方案4】：

您可能想查看 ember.js。它是一个框架，可以完全满足您的要求（如果我理解正确的话），它会为您处理所有历史记录。有一个关于代码学校的有用教程可以帮助您开始构建一个简单的引导站点：https://www.codeschool.com/courses/warming-up-with-emberjs

【讨论】：