如何在不刷新页面的情况下更改URL?
我已经用CodeIginer建立了一个网站,我想在我的页面之一中实现AJAX和JQuery。问题是; 当我加载内容时,URL不会改变。
假设我有URL http://www.example.com/controller/function/param 和另一个URL:http://www.example.com/controller/function/param2
http://www.example.com/controller/function/param
http://www.example.com/controller/function/param2
单击按钮时如何将第一个URL更改为第二个URL?
在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
pushState
请注意,使用真实的URL要求您的Web服务器能够正确呈现这些页面 ,因此还需要进行后端更改。例如,如果您的路由为/ documents / 100,并且浏览器直接访问该URL,则您的Web服务器必须能够提供该页面。为了获得完全的搜索引擎可爬网性,最好让服务器为页面生成完整的HTML …但是,如果是Web应用程序,则只需呈现与根URL相同的内容,然后用Backbone填充其余内容即可。视图和JavaScript可以正常工作。