Question

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

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

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

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

Answer 1

在HTML5中，您可以更改网址：

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

<强>更新

概述哪个浏览器支持新的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为JavaScript重载应用程序提供结构为模型提供键值绑定和自定义事件，集合具有丰富的可枚举函数API，具有声明性事件的视图处理，并将其全部连接到您现有的应用程序 RESTful JSON接口。 ... pushState支持存在于Backbone的纯粹选择性基础上。不支持pushState的旧浏览器将继续使用基于散列的URL片段，以及a访问散列URL的情况支持pushState的浏览器，它将透明地升级到真正的URL。

Mootools (via Plugin)

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

dojo toolkit

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

......仅举几例。

（!!）BE AWARE

使用pushState时的一个重要副作用（来自Backbone documentation的引文）：

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

Answer 2

可以使用哈希（＃）并随后添加您喜欢的任何内容。

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

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

旁注：

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

Answer 3

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

当然，您也可以将您的“文件夹”放在哈希值之后，因此，如果基本网址为http://example.com/，则添加： location.hash = "/MyPage/MySubPage/MyInfo"; 将其更改为http://example.com/#/MyPage/MySubPage/MyInfo

Answer 4

除非使用哈希标记，否则similar thread推断为否。

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

从W3开始：

没有回应204

服务器已收到请求但是   没有信息要发回，   并且客户应该保持不变   文档视图。这主要是为了允许   脚本输入而不更改   同时记录文件。

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

4 个答案: