如何在不刷新页面的情况下更改页面URL？

Question

如何在不刷新页面的情况下更改URL？

我已经用CodeIginer建立了一个网站，我想在我的页面之一中实现AJAX和JQuery。问题是; 当我加载内容时，URL不会改变。

假设我有URL http://www.example.com/controller/function/param
和另一个URL：http://www.example.com/controller/function/param2

单击按钮时如何将第一个URL更改为第二个URL？

Answer 1

在HTML5中，您可以更改URL：

window.history.pushState("object or string", "Title", "/new-url");

检查http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-
refreshing-page/

docs：https
:
//developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0方法

更新

哪种浏览器支持新的HTML5历史记录API概述：

http://caniuse.com/#search=pushState（caniuse.com值得收藏！）

已经有一些框架可以为您完成艰苦的工作，甚至可以优雅地回退到常见的哈希标签解决方案：

History.js

History.js在所有浏览器中都优雅地支持HTML5历史记录/状态API（pushState，replaceState，onPopState）。包括对数据，标题，replaceState的持续支持。支持jQuery，MooTools和Prototype。对于HTML5浏览器，这意味着您可以直接修改URL，而无需再使用哈希。对于HTML4浏览器，它将恢复为使用旧的onhashchange功能。

Backbone.js

Backbone通过为模型提供键值绑定和自定义事件，具有丰富的可枚举函数API的集合，具有声明性事件处理的视图，并通过RESTful
JSON接口将其全部连接到现有应用程序，从而为重载JavaScript的应用程序提供结构。…在Backbone中，pushState支持纯粹是基于选择加入的。不支持pushState的旧版浏览器将继续使用基于哈希的URL片段，并且如果具有pushState的浏览器访问了哈希URL，则将透明地升级为真实URL。

Mootools （通过插件）

MooTools是一个紧凑的，模块化的，面向对象的JavaScript框架，专为中高级JavaScript开发人员设计。[…]通过popstate或hashchange进行历史记录管理。在不重新加载的情况下替换页面的URL，并在较旧的浏览器上使用Hashchange。

dojo工具包

使用Web标准作为平台，Dojo可以节省您的时间并随着开发过程进行扩展。这是经验丰富的开发人员用来构建高质量桌面和移动Web应用程序的工具包。[…]
dojox.app通过HTML5 pushState标准管理导航历史记录，并将其委托给启用浏览器的历史记录管理。

… 仅举几个。

（！！） 意识到

使用（Backbone文档中的引用）时的一个
重要副作用 ：pushState

请注意，使用真实的URL要求您的Web服务器能够正确呈现这些页面 ，因此还需要进行后端更改。例如，如果您的路由为/ documents /
100，并且浏览器直接访问该URL，则您的Web服务器必须能够提供该页面。为了获得完全的搜索引擎可爬网性，最好让服务器为页面生成完整的HTML
…但是，如果是Web应用程序，则只需呈现与根URL相同的内容，然后用Backbone填充其余内容即可。视图和JavaScript可以正常工作。