小编典典

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

ajax

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

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

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

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


阅读 298

收藏
2020-07-26

共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可以正常工作。

2020-07-26