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

基本上，当我点击我的主页的链接，我想用一些JavaScript到一个新的div下滑并更改网址，这样，如果该URL被输入，它会带来正确的信息。点击链接时，我不希望整个页面加载。从链接冲浪到链接时，我想让网页动画更改，而不是加载新页面。如何在不重新加载浏览器的情况下更改我的Url？

来源

2014-04-27 user1919552

你可以这样做：

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

来源

2014-04-27 04:17:25

如果你要使用“旧”的浏览器，然后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?

来源

2014-04-27 04:31:58 thexacre

有实现这一目标的3种方式：

在你的锚使用普通的JavaScript（DEFINITELY不推荐）
通过这样做，我的意思是字面上做：

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

你能做到这一点，但这意味着你会被污染与全局变量和函数，这是严格不建议在全球范围内。

在所有的锚使用“＃” 这是做的最常见和最安全的方式，因为在几乎所有主要的浏览器可用，并且他们的不同版本

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

的意图哈希将直接带您访问当前正在阅读的文档中的一个部分，该部分由HTML中的id属性定义，该属性用于非常大的HTML文档。随着哈希和window.onhashchange事件，你可以得到你想要的东西，除了一些旧版本的IE 其中我认为是及以下。

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：是可以在历史状态之间传递的对象。
标题：只是一个新的国家的标题。
网址：新的URL显示在地址栏中。
此函数调用将触发浏览器上的window.onpopstate事件。

更多关于历史API：HTML5 History API

希望这可以帮助你。

来源

2014-04-27 04:50:21 user3577147

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

来源

2014-04-27 09:46:33 jme11

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

回答

相关问题