Bob*_*nly 26 javascript ajax jquery
如何在不刷新页面的情况下更改URL？
我用CodeIginer构建了一个网站,我想在我的一个页面中实现AJAX和JQuery.问题是; 当我加载内容时,URL不会更改.
假设我有URL http://www.example.com/controller/function/param
和另一个URL:http://www.example.com/controller/function/param2
单击按钮时,如何将第一个URL更改为第二个URL？
rob*_*les 34
在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值得收藏!)
已经有一些框架可以为您完成繁重的工作,甚至可以优雅地回退到常见的哈希标记解决方案:
History.js在所有浏览器中优雅地支持HTML5历史/状态API(pushState,replaceState,onPopState).包括对数据,标题,replaceState的持续支持.支持jQuery,MooTools和Prototype.对于HTML5浏览器,这意味着您可以直接修改URL,而无需再使用哈希.对于HTML4浏览器,它将恢复使用旧的onhashchange功能.
Backbone通过提供具有键值绑定和自定义事件的模型,具有可枚举函数的丰富API的集合,具有声明性事件处理的视图,并通过RESTful JSON接口将其全部连接到现有应用程序,为JavaScript重型应用程序提供结构.... pushState支持存在于Backbone的纯粹选择基础上.不支持pushState的较旧浏览器将继续使用基于散列的URL片段,如果支持pushState的浏览器访问散列URL,则它将透明地升级到真实URL.
MooTools是一个紧凑的,模块化的,面向对象的JavaScript框架,专为中高级JavaScript开发人员而设计.[...]历史管理通过popstate或hashchange.在没有重新加载的情况下替换页面的URL,并在旧浏览器上回退到Hashchange.
使用Web标准作为平台,Dojo可以节省您的时间并扩展您的开发过程.它是经验丰富的开发人员用于构建高质量桌面和移动Web应用程序的工具包.[...] dojox.app通过HTML5 pushState标准管理导航历史记录,并将其委托给启用浏览器的历史记录管理.
... 仅举几个.
(!!) 意识到
一个重要的副作用使用时pushState(从引文骨干文档):
请注意,使用真实URL要求您的Web服务器能够正确呈现这些页面,因此也需要进行后端更改.例如,如果您的路径为/ documents/100,则如果浏览器直接访问该网址,则您的网络服务器必须能够提供该网页.对于完整的搜索引擎可抓取性,最好让服务器为页面生成完整的HTML ...但如果它是一个Web应用程序,只需呈现与根URL相同的内容,并使用Backbone填充其余内容视图和JavaScript工作正常.
可以使用哈希(#)并在之后添加任何你喜欢的内容.
这是我使用它构建的网站 - 然后我有JavaScript读取哈希并调用适当的函数:
http://bannerhouse.com.au/#/popup=media&id=don
边注:
这对于Flash网站或Flash内容也很有用; 您可以使用FlashVars将哈希值解析为SWF,并根据该值加载适当的部分/屏幕.