如何在不重新加载浏览器的情况下更改我的Url

How to change my Url without reloading the browser?

本文关键字：情况下 浏览器 Url 我的 加载 新加载      更新时间：2023-09-26

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

有三种方法可以实现这一点：

在锚点中使用纯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事件

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

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

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

更多关于历史API：HTML5历史API

希望这能帮助到你。

您可以这样做：

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

你可以使用这个代码，这是我从css技巧中获得的

$(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;
            }
        }
    });
});

以上内容将自动为您完成工作。

演示

如果你想使用"旧"浏览器，那么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

这个帖子中有更多信息：如何在不刷新页面的情况下更改页面URL？

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

相关文章：