我可以在不更新页面的情况下更改URL吗？

Question

这似乎是个愚蠢的问题。但我不知道能不能做到。因此，在我开始制作一个投资组合网站的过程之前，我想要一些提示。否则，我只会用另一种设计。

我的问题：

当使用ascencor.js插件时，我网站上的所有内容都在一个文件中。因此，我永远不会去一个新的网址，如/contact或/about。

但后来我想知道，谷歌呢？

我的所有内容都会放在不同的类中，但是放在同一个文件中：

<div class="floor floor-1">
    <span class="text">Floor 1</span>
</div>
<div class="floor floor-2">
    <span class="text">Floor 2</span>
</div>

查看这里的示例：http://rplambech.dk/ascencor/

所以是的，用这种方法，我永远不会改变网址，所以我只能索引一页。

有没有一种方法，我可以改变网址而不更新网站？举个例子，我能去http://rplambech.dk/ascencor/floor5吗？

如果这是不可能的，那么我可以至少覆盖页面的标题，每次我点击一个新的“页面”。例如，使用一些PhP。

或者我应该用一种完全不同的方法？:)

Answer 1

从您的问题及其评论的上下文来看，您正在寻找单页应用程序这个术语。

有很多种方法来实现这个，其中一些方法利用历史对象来支持浏览器的“后退”和“转发”按钮。

我建议您搜索术语“单页应用程序”，同时检查以下一些(或全部)框架(它们将简化您的开发，而不是处理#和讨厌的低级ajax调用)：

1. backbone.js
2. angularJS
3. ember.js

Answer 2

它可以使用散列链接来完成，最初设计为跳转到页面上的某个div，现在通常用于在单个页面上加载动态页。

所以您可以链接到http://rplambech.dk/ascencor/index.html#floor5，例如

然后有一些javascript

var loc = location.hash.split("#")[1];

然后

     if(loc == 'floor5'){
         //execute goto floor 5 code
      }

Answer 3

将history.pushState与HTML5一起使用，如声明的这里。

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

URL：

<a href="#" id='click'>Click to change url to bar.html</a>