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

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

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

假设我有URL http://www.example.com/controller/function/param
另一个url: http://www.example.com/controller/function/param2http://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.a0method


UPDATE

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

http://caniuse.com/#search=pushState(caniuse.com值得collections!)

已经有一些框架可以为您完成繁重的工作,甚至可以优雅地回退到常见的哈希标记解决方案:

History.js

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

Backbone.js的

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

Mootools (通过插件)

MooTools是一个紧凑的,模块化的,面向对象的JavaScript框架,专为中高级JavaScript开发人员而设计。 […]历史管理通过popstate或hashchange。 在没有重新加载的情况下替换页面的URL,并在旧浏览器上回退到Hashchange。

dojo工具包

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

… 仅举几个。


(!!) 意识到

使用pushState时的一个重要副作用 (来自Backbone文档的引用):

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

可以使用哈希 )并随后添加你喜欢的任何东西。

这是我使用它构建的网站 – 然后我让JavaScript读取哈希并调用适当的函数:

http://bannerhouse.com.au/#/popup=media&id=don

边注:

这对于Flash网站或Flash内容也很有用; 您可以使用FlashVars将哈希值解析为SWF,并根据该值加载适当的部分/屏幕。

通过Javascript使用哈希标签,因此在按钮的点击事件处理程序中: location.hash = "param2"这将改变http://example.com/mypage/#whatever到http://example.com/mypage/#param2

当然,您也可以将您的“文件夹”放在哈希之后,因此,使用http://example.com/的基本url,然后添加: location.hash = "/MyPage/MySubPage/MyInfo"; 将其更改为http://example.com/#/MyPage/MySubPage/MyInfo

除非使用散列标记,否则类似的线程推断为否。

提出但强烈反对的一个想法是使用204 HTTP响应。

从W3:

没有回应204

服务器已收到请求,但没有要发回的信息,客户端应保留在同一文档视图中。 这主要是为了允许脚本输入而不同时更改文档。